refactor: change dark theme colors

S0fft · Aug 26, 2024 · e35e200 · e35e200
1 parent 21da2ea
commit e35e200
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/client/src/features/AppTheme/lib/const/index.ts b/client/src/features/AppTheme/lib/const/index.ts
@@ -1,3 +1,3 @@
-export const DARK_MODE_CLASS = 'dark-mode';
+export const DARK_MODE_CLASS = 'dark';
 
-export const LIGHT_MODE_CLASS = 'light-mode';
+export const LIGHT_MODE_CLASS = 'light';
diff --git a/client/src/index.css b/client/src/index.css
@@ -55,7 +55,7 @@
   --toastify-toast-width: fit-content;
 }
 
-:root.dark-mode {
+:root.dark {
   --md-sys-color-primary: rgb(190 206 127);
   --md-sys-color-surface-tint: rgb(190 206 127);
   --md-sys-color-on-primary: rgb(42 52 0);
@@ -109,7 +109,7 @@
 }
 
 :root,
-:root.light-mode {
+:root.light {
   --md-sys-color-primary: rgb(86 100 34);
   --md-sys-color-surface-tint: rgb(86 100 34);
   --md-sys-color-on-primary: rgb(255 255 255);

diff --git a/client/src/pages/Notes/ui/Note.tsx b/client/src/pages/Notes/ui/Note.tsx
@@ -86,7 +86,7 @@ const Note: FC<NoteProps> = ({
       className={cn(
         'relative flex h-[200px] w-full flex-col gap-5 rounded-xl bg-surface-container pl-6 pr-3 pt-6 text-on-surface transition-all duration-400 ease-emphasized-decelerate after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:h-[90px] after:w-full after:rounded-xl after:bg-gradient-to-t after:from-surface-container-lowest after:to-transparent after:opacity-30 hover:bg-surface-container-low',
         {
-          '!-translate-y-0.5 bg-high-contrast-inverse-primary drop-shadow-md [box-shadow:_0px_1px_2px_0px_#0000004D] hover:bg-high-contrast-inverse-primary':
+          '!-translate-y-0.5 bg-high-contrast-inverse-primary drop-shadow-md [box-shadow:_0px_1px_2px_0px_#0000004D] hover:bg-high-contrast-inverse-primary dark:bg-primary dark:text-on-primary dark:hover:bg-primary':
             isActiveNote,
         },
       )}>

diff --git a/client/src/shared/ui/NavItem.tsx b/client/src/shared/ui/NavItem.tsx
@@ -36,7 +36,7 @@ const NavItem: FC<NavButtonProps> = ({
           className={cn(
             'group relative flex w-full items-center justify-center gap-3 rounded-full bg-surface-container-highest font-medium text-on-surface-variant ease-linear before:absolute before:-top-1 before:left-0.5 before:h-[32px] before:w-[56px] before:rounded-full hover:duration-0 before:hover:bg-[color-mix(in_srgb,_var(--md-sys-color-inverse-surface)_10%,_transparent)] lg:justify-start lg:py-4 lg:pl-4 lg:pr-6 lg:before:hidden lg:hover:brightness-95 lg:active:brightness-90',
             {
-              'text-on-secondary-container': isActive,
+              'text-on-secondary-container dark:text-on-primary': isActive,
               'origin-left justify-start py-4 pl-4 pr-6 duration-[inherit] ease-[inherit] before:hidden hover:bg-[color-mix(in_srgb,_var(--md-sys-color-inverse-surface)_8%,_transparent)] active:bg-[color-mix(in_srgb,_var(--md-sys-color-inverse-surface)_10%,_transparent)]':
                 isExpand,
             },
@@ -45,7 +45,7 @@ const NavItem: FC<NavButtonProps> = ({
             className={cn(
               'absolute -top-1 left-0.5 h-[32px] w-[56px] scale-x-[.32] rounded-full py-4 pl-4 pr-6 opacity-0 transition-all duration-200 ease-linear lg:left-0 lg:top-0 lg:h-full lg:w-full',
               {
-                'scale-x-100 bg-primary-container opacity-100 group-active:bg-[color-mix(in_srgb,_var(--md-sys-color-secondary)_20%,_transparent)] lg:group-hover:brightness-95':
+                'scale-x-100 bg-primary-container opacity-100 group-active:bg-[color-mix(in_srgb,_var(--md-sys-color-secondary)_20%,_transparent)] lg:group-hover:brightness-95 dark:bg-primary':
                   isActive,
                 'left-0 top-0 h-full w-full': isExpand,
               },

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'class',
+  darkMode: 'selector',
   theme: {
     extend: {
       fontFamily: {