feat(ui): update site styles

Author: ansidev

src/assets/scss/_styles.scss

@@ -7,6 +7,10 @@ a {
   @extend %link;
 }
 
+.header-icon {
+  @apply text-site-header-text hover:text-site-header-text-hover;
+}
+
 /* Badge CSS */
 %badge {
   @apply px-3 py-2 border rounded-full border-style-primary;

src/components/AppHeader.astro

@@ -52,10 +52,6 @@ const { title, description, author } = siteConfig
     @apply bg-site-header-bg border-b-site-header-border;
   }
 
-  .header-icon {
-    @apply text-site-header-text hover:text-site-header-text-hover;
-  }
-
   .site-title {
     @apply text-site-title hover:text-site-header-text-hover;
   }

theme.config.cjs

@@ -46,6 +46,9 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'header-text': baseColors.text,
         'header-text-hover': baseColors.fill,
       },
+      'theme-menu': {
+        'text-hover': baseColors.fill,
+      },
       difficulty: {
         ...textDifficultyColors,
       },
@@ -60,6 +63,10 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'bg': '#1a1a1a',
         'header-bg': '#282828',
       },
+      'theme-menu': {
+        'bg': colors.zinc['800'],
+        'bg-hover': tertiary,
+      },
       difficulty: {
         easy: themeColors.leetcode.easy,
         'easy-hover': baseColors.text,
@@ -118,6 +125,9 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'header-text': baseColors['text-inverted'],
         'header-text-hover': colors.gray['300'],
       },
+      'theme-menu': {
+        'text-hover': baseColors.fill,
+      },
       difficulty: {
         ...textDifficultyColors,
       },
@@ -132,6 +142,10 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'bg': colors.white,
         'header-bg': primary,
       },
+      'theme-menu': {
+        'bg': baseColors['text-inverted'],
+        'bg-hover': colors.gray['100'],
+      },
       difficulty: {
         easy: themeColors.leetcode.easy,
         'easy-hover': baseColors.text,