[PLA-1753] dark mode (#108)

enjin · May 13, 2024 · 251f03d · 251f03d
1 parent 3b0637c
commit 251f03d
Show file tree

Hide file tree

Showing 115 changed files with 1,952 additions and 819 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-full bg-gray-50">
+<html class="h-full bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50">
     <head>
         <meta charset="utf-8" />
         <link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />

diff --git a/resources/js/components/Address.vue b/resources/js/components/Address.vue
@@ -1,5 +1,5 @@
 <template>
-    <dd class="mt-1 text-sm text-gray-900 break-words" v-if="addressSwitch">
+    <dd class="mt-1 text-sm text-light-content-strong dark:text-dark-content-strong break-words" v-if="addressSwitch">
         <CopyTextIcon :text="addressSwitch">
             <span class="break-words">
                 {{ displayAddress }}

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-full flex flex-row bg-light-surface-background">
+    <div class="h-full flex flex-row bg-light-surface-background dark:bg-dark-surface-background">
         <SideNavbar v-if="appStore.hasValidConfig" />
         <SnackbarGroup />
         <SupportButton />
@@ -29,13 +29,20 @@ const appStore = useAppStore();
 const router = useRouter();
 const route = useRoute();
 
-(async () => {
-    await appStore.init();
-})();
-
 const canaryHost = computed(() => appStore.config.network === 'canary');
 
+const initialTheme = () => {
+    if (appStore.theme === 'dark') {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+};
+
 (() => {
+    appStore.init();
+    initialTheme();
+
     if (window.bootstrap?.name) {
         return;
     }
@@ -47,6 +54,13 @@ const canaryHost = computed(() => appStore.config.network === 'canary');
     }
 })();
 
+watch(
+    () => appStore.theme,
+    () => {
+        initialTheme();
+    }
+);
+
 watch(
     () => appStore.loggedIn,
     () => {

diff --git a/resources/js/components/Btn.vue b/resources/js/components/Btn.vue
@@ -6,7 +6,8 @@
         :class="{
             'text-white bg-primary hover:bg-primary-light': primary,
             'text-white bg-red-500 hover:bg-red-600': error,
-            'text-gray-900 bg-white hover:bg-gray-50 ring-1 ring-inset ring-gray-300': basic && !error && !primary,
+            'text-light-content-strong dark:text-dark-content-strong bg-light-surface-primary dark:bg-dark-surface-primary hover:bg-light-surface-background hover:dark:bg-dark-surface-background !bg-opacity-50 ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong':
+                basic && !error && !primary,
             'px-5': loading,
             '!bg-gray-400': disabled,
         }"

diff --git a/resources/js/components/CardToModal.vue b/resources/js/components/CardToModal.vue
@@ -1,6 +1,9 @@
 <template>
-    <div class="bg-white shadow rounded-lg">
-        <div class="flex divide-x divide-gray-200 transition-all" :class="{ 'border-b border-gray-200': open }">
+    <div class="bg-light-surface-primary dark:bg-dark-surface-primary shadow rounded-lg">
+        <div
+            class="flex divide-x divide-light-stroke dark:divide-dark-stroke transition-all"
+            :class="{ 'border-b border-light-stroke dark:border-dark-stroke': open }"
+        >
             <div class="flex justify-between px-4 py-5 flex-1" @click="toggleCard">
                 <div class="inline-flex">
                     <label>{{ title }}</label>

diff --git a/resources/js/components/Chip.vue b/resources/js/components/Chip.vue
@@ -3,7 +3,8 @@
         class="inline-flex rounded-md px-1 truncate"
         :class="{
             'bg-red-500 !text-white ': isError,
-            'bg-slate-200 text-slate-600': !isError,
+            'bg-light-surface-primary/60 dark:bg-dark-surface-primary/60 text-light-content-strong dark:text-dark-content-strong':
+                !isError,
         }"
     >
         <span
@@ -15,7 +16,7 @@
             v-if="closable"
             class="h-5 w-5 ml-auto my-auto cursor-pointer flex-shrink-0"
             :class="{
-                'text-gray-400': !isError,
+                'text-light-content dark:text-dark-content': !isError,
             }"
             @click="emit('remove')"
         />

diff --git a/resources/js/components/CollapseCard.vue b/resources/js/components/CollapseCard.vue
@@ -1,7 +1,14 @@
 <template>
-    <div class="bg-white shadow rounded-lg">
-        <div class="flex divide-x divide-gray-200 transition-all" :class="{ 'border-b border-gray-200': open }">
-            <div class="flex justify-between px-4 py-5 flex-1 cursor-pointer" @click="toggleCard" :dusk="duskId">
+    <div class="bg-light-surface-primary dark:bg-dark-surface-primary shadow rounded-lg">
+        <div
+            class="flex divide-x divide-light-stroke dark:divide-dark-stroke transition-all"
+            :class="{ 'border-b border-light-stroke dark:border-dark-stroke': open }"
+        >
+            <div
+                class="flex justify-between px-4 py-5 flex-1 cursor-pointer text-light-content-strong dark:text-dark-content-strong"
+                @click="toggleCard"
+                :dusk="duskId"
+            >
                 <div class="inline-flex items-center">
                     <label>{{ title }}</label>
                     <slot name="icon" />

diff --git a/resources/js/components/CollapseFilter.vue b/resources/js/components/CollapseFilter.vue
@@ -2,16 +2,23 @@
     <Popover ref="popperRef" theme="dark" @open:popper="open = true" @close:popper="open = false">
         <template #activator>
             <Btn ref="btnOpenerRef" :class="open ? 'ring-1 ring-primary' : 'text-opacity-90'">
-                <span class="text-sm text-gray-900 hover:text-opacity-100 font-normal">{{ label }}</span>
-                <span class="ml-2 w-2 text-sm text-gray-500 font-normal">{{ localModelValue.length }}</span>
+                <span
+                    class="text-sm text-light-content-strong dark:text-dark-content-strong hover:text-opacity-100 font-normal"
+                    >{{ label }}</span
+                >
+                <span class="ml-2 w-2 text-sm text-light-content dark:text-dark-content font-normal">{{
+                    localModelValue.length
+                }}</span>
                 <ChevronDownIcon
-                    class="ml-2 h-5 w-5 text-gray-900 transition duration-150 ease-in-out group-hover:text-opacity-80"
+                    class="ml-2 h-5 w-5 text-light-content-strong dark:text-dark-content-strong transition duration-150 ease-in-out group-hover:text-opacity-80"
                     aria-hidden="true"
                 />
             </Btn>
         </template>
         <template #content>
-            <div class="bg-white rounded-md shadow-md p-4 flex flex-col w-[320px] z-10">
+            <div
+                class="bg-light-surface-primary dark:bg-dark-surface-primary rounded-md shadow-md p-4 flex flex-col w-[320px] z-10"
+            >
                 <div class="flex space-x-3">
                     <FormInput
                         v-if="type === 'text'"

diff --git a/resources/js/components/ConfirmModal.vue b/resources/js/components/ConfirmModal.vue
@@ -1,8 +1,13 @@
 <template>
     <Modal :is-open="isOpen" :close="closeModal">
-        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900"> {{ title }} </DialogTitle>
+        <DialogTitle
+            as="h3"
+            class="text-lg font-medium leading-6 text-light-content-strong dark:text-dark-content-strong"
+        >
+            {{ title }}
+        </DialogTitle>
         <div class="mt-2">
-            <p class="text-sm text-gray-500">
+            <p class="text-sm text-light-content dark:text-dark-content">
                 {{ description }}
             </p>
         </div>

diff --git a/resources/js/components/DisclosureMenu.vue b/resources/js/components/DisclosureMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <DisclosurePanel
-        class="fixed bg-white left-0 right-0 md:hidden divide-y divide-gray-200 shadow-md"
+        class="fixed bg-light-surface-primary dark:bg-dark-surface-primary left-0 right-0 md:hidden divide-y divide-light-stroke dark:divide-dark-stroke shadow-md"
         v-slot="{ close }"
         v-if="appStore.loggedIn"
     >
@@ -9,7 +9,7 @@
                 v-for="item in navigations"
                 :key="item.name"
                 :to="item.to"
-                class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center rounded-md px-2 py-2 text-sm font-medium"
+                class="text-light-content dark:text-dark-content hover:bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 hover:text-light-content-strong hover:dark:text-dark-content-strong group flex items-center rounded-md px-2 py-2 text-sm font-medium"
                 @click="close"
             >
                 <span class="flex-1">{{ item.name }}</span>
@@ -19,14 +19,14 @@
             <a
                 href="https://docs.enjin.io"
                 target="_blank"
-                class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center rounded-md px-2 py-2 text-sm font-medium"
+                class="text-light-content dark:text-dark-content hover:bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 hover:text-light-content-strong hover:dark:text-dark-content-strong group flex items-center rounded-md px-2 py-2 text-sm font-medium"
             >
                 Documentation
             </a>
             <a
                 href="https://feedback.enjin.io"
                 target="_blank"
-                class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center rounded-md px-2 py-2 text-sm font-medium"
+                class="text-light-content dark:text-dark-content hover:bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 hover:text-light-content-strong hover:dark:text-dark-content-strong group flex items-center rounded-md px-2 py-2 text-sm font-medium"
             >
                 Feedback
             </a>

diff --git a/resources/js/components/DropdownMenu.vue b/resources/js/components/DropdownMenu.vue
@@ -2,23 +2,25 @@
     <Menu as="div" class="relative ml-3 inline-block text-left">
         <div>
             <MenuButton
-                class="-my-2 flex items-center rounded-full p-2 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-0"
+                class="-my-2 flex items-center rounded-full p-2 text-light-content dark:text-dark-content hover:text-light-content-strong hover:dark:text-dark-content-strong focus:outline-none focus:ring-0"
             >
                 <EllipsisVerticalIcon class="h-5 w-5" aria-hidden="true" />
             </MenuButton>
         </div>
 
         <ScaleTransition>
             <MenuItems
-                class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-light-surface-primary dark:bg-dark-surface-primary shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
                 <div class="py-1">
                     <MenuItem v-slot="{ active }" v-for="action in actions" :key="action.name">
                         <div
                             class="cursor-pointer"
                             :class="[
-                                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                                'flex justify-between px-4 py-2 text-sm',
+                                active
+                                    ? 'bg-light-surface-background dark:bg-dark-surface-background text-light-content-strong dark:text-dark-content-strong'
+                                    : 'text-light-content dark:text-dark-content ',
+                                'flex justify-between px-4 py-2 text-sm transition-all',
                             ]"
                             @click="emitAction(action.component)"
                         >

diff --git a/resources/js/components/FormCheckbox.vue b/resources/js/components/FormCheckbox.vue
@@ -12,7 +12,7 @@
                     v-model="localModelValue"
                     v-bind="{ ...field }"
                     type="checkbox"
-                    class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary-light"
+                    class="h-4 w-4 rounded border-light-stroke-strong dark:border-dark-stroke-strong text-primary focus:ring-primary-light bg-light-surface-background dark:bg-dark-surface-background"
                 />
             </div>
             <div class="ml-3">

diff --git a/resources/js/components/FormChipsInput.vue b/resources/js/components/FormChipsInput.vue
@@ -18,7 +18,7 @@
 
             <input class="hidden" v-bind="{ ...field }" />
             <div
-                class="mt-2 flex flex-col space-y-2 rounded-md p-2 flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 overflow-hidden transition-all"
+                class="mt-2 flex flex-col space-y-2 rounded-md p-2 flex-1 flex-shrink-0 border-0 text-light-content-strong dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong overflow-hidden transition-all bg-light-surface-background dark:bg-dark-surface-background"
             >
                 <div class="flex space-x-3">
                     <FormInput

diff --git a/resources/js/components/FormDateInput.vue b/resources/js/components/FormDateInput.vue
@@ -20,6 +20,7 @@
                 :min-date="minDate"
                 :is-24="false"
                 position="right"
+                dark
                 auto-apply
                 class="mt-2 shadow-sm rounded-md"
             >
@@ -28,7 +29,7 @@
                         type="text"
                         :value="value"
                         :placeholder="placeholder"
-                        class="block w-full flex-1 rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 overflow-hidden transition-all,"
+                        class="block w-full flex-1 rounded-md border-0 py-1.5 text-light-content-strong placeholder:dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong placeholder:text-light-content dark:text-dark-content focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 overflow-hidden transition-all bg-light-surface-background dark:bg-dark-surface-background"
                         @input="handleInput"
                         @change="handleChange"
                         @blur="handleBlur"

diff --git a/resources/js/components/FormInput.vue b/resources/js/components/FormInput.vue
@@ -21,7 +21,7 @@
                 </p>
                 <div
                     v-if="prefix"
-                    class="flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 text-sm"
+                    class="flex items-center rounded-l-md border border-r-0 border-light-stroke-strong dark:border-dark-stroke-strong px-3 text-light-content dark:text-dark-content text-sm"
                 >
                     {{ prefix }}
                 </div>
@@ -37,7 +37,7 @@
                                 'rounded-md': !prefix,
                                 'rounded-r-none': hasAddon,
                             },
-                            'block flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-gray-100 outline-none',
+                            'block flex-1 flex-shrink-0 border-0 bg-light-surface-background dark:bg-dark-surface-background  text-light-content-strong dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong  placeholder:text-light-content placeholder:dark:text-dark-content focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-dark-surface-background/10 disabled:dark:bg-light-surface-background/10 outline-none',
                             inputClass,
                         ]"
                         :placeholder="placeholder"

diff --git a/resources/js/components/FormList.vue b/resources/js/components/FormList.vue
@@ -2,13 +2,17 @@
     <div class="space-y-4" :class="{ 'md:!flex md:!flex-col': flex }">
         <div class="" v-if="label || description">
             <div class="flex" v-if="label">
-                <h3 class="text-base font-semibold leading-6 text-gray-900">{{ label }}</h3>
+                <h3 class="text-base font-semibold leading-6 text-light-content-strong dark:text-dark-content-strong">
+                    {{ label }}
+                </h3>
                 <Tooltip class="!flex items-center" v-if="tooltip" :text="tooltip">
-                    <QuestionMarkCircleIcon class="ml-1 w-4 h-4 cursor-pointer" />
+                    <QuestionMarkCircleIcon
+                        class="ml-1 w-4 h-4 cursor-pointer text-light-content dark:text-dark-content"
+                    />
                 </Tooltip>
             </div>
 
-            <p v-if="description" class="mt-1 text-sm text-gray-500">
+            <p v-if="description" class="mt-1 text-sm text-light-content dark:text-dark-content">
                 {{ description }}
                 <ReadMoreButton v-if="readmore" :readmore="readmore" :dusk="duskId" />
             </p>

diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
@@ -15,15 +15,18 @@
                         {{ errorMessage }}
                     </p>
                     <div
-                        class="relative w-full cursor-default overflow-hidden bg-white text-left text-sm leading-6 transition-all"
+                        class="relative w-full cursor-default overflow-hidden bg-light-surface-primary dark:bg-dark-surface-primary text-left text-sm leading-6 transition-all"
                     >
                         <ComboboxInput
-                            :class="`w-full py-2.5 pl-3 pr-10 text-sm leading-5 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary rounded-md transition-all disabled:bg-gray-100 {inputClass}`"
+                            class="w-full py-2.5 pl-3 pr-10 text-sm leading-5 border-0 text-light-content-strong dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong placeholder:text-light-content placeholder:dark:text-dark-content focus:ring-2 focus:ring-inset focus:ring-primary rounded-md transition-all disabled:bg-dark-surface-background/10 disabled:dark:bg-light-surface-background/10 bg-light-surface-background dark:bg-dark-surface-background"
                             @change="query = $event.target.value"
                             @click="openSelect"
                         />
                         <ComboboxButton ref="comboButtonRef" class="absolute inset-y-0 right-0 flex items-center pr-2">
-                            <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+                            <ChevronUpDownIcon
+                                class="h-5 w-5 text-light-content dark:text-dark-content"
+                                aria-hidden="true"
+                            />
                         </ComboboxButton>
                     </div>
                     <TransitionRoot
@@ -33,11 +36,11 @@
                         @after-leave="query = ''"
                     >
                         <ComboboxOptions
-                            class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30 py-1 w-full"
+                            class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-light-surface-primary dark:bg-dark-surface-primary text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30 py-1 w-full"
                         >
                             <div
                                 v-if="filteredOptions.length === 0 && query !== ''"
-                                class="relative cursor-default select-none py-2 px-4 text-gray-700"
+                                class="relative cursor-default select-none py-2 px-4 text-light-content dark:text-dark-content"
                             >
                                 Nothing found.
                             </div>
@@ -52,8 +55,9 @@
                                 <li
                                     class="relative cursor-default select-none py-2 pl-10 pr-4 transition-all"
                                     :class="{
-                                        'bg-primary-light/10': active,
-                                        'text-gray-900': !active,
+                                        'bg-light-surface-primary/10 text-light-content-strong dark:text-dark-content-strong':
+                                            active,
+                                        'text-light-content-strong dark:text-dark-content-strong': !active,
                                     }"
                                 >
                                     <span