fix(scss): fix media query light/dark themes

Author: dvcol

src/components/common/background/GridBackground.vue

@@ -63,13 +63,13 @@ onBeforeUnmount(() => window.removeEventListener('resize', handleResize));
   .grid-item {
     width: var(--grid-size);
     height: var(--grid-size);
-    border-top: 0.1px solid var(--bg-blur-black);
-    border-left: 0.1px solid var(--bg-blur-black);
+    border-top: 0.1px solid var(--bg-blur-bg);
+    border-left: 0.1px solid var(--bg-blur-bg);
     transition: background-color 0.25s var(--n-bezier);
     will-change: background-color;
 
     &:hover {
-      background-color: var(--bg-blur-black-hover);
+      background-color: var(--bg-blur-bg-hover);
       transition: none;
     }
   }

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -25,7 +25,6 @@ import {
   useUserSettingsStore,
   useUserSettingsStoreRefs,
 } from '~/stores/settings/user.store';
-import { Blurs, Colors } from '~/styles/colors.style';
 import { useI18n } from '~/utils';
 
 import { chromeRuntimeId, createTab } from '~/utils/browser/browser.utils';
@@ -146,8 +145,6 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
       'text-align': 'left',
       'min-width': 'max(calc(100vw / 6), 8rem)',
       'max-width': '20rem',
-      'background-color': Colors.bgBlurBlackHover,
-      'backdrop-filter': Blurs.blur,
     }"
     @select="onSelect"
   >
@@ -182,3 +179,19 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     </NFlex>
   </NDropdown>
 </template>
+
+<style lang="scss">
+@use '~/styles/mixin' as mixin;
+
+.n-dropdown-menu {
+  @include mixin.hover-background;
+
+  @media (prefers-color-scheme: light) {
+    @include mixin.hover-background;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include mixin.hover-background(rgb(0 0 0 / 80%), rgb(0 0 0 / 90%));
+  }
+}
+</style>

src/components/container/ContainerComponent.ce.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   darkTheme,
+  type GlobalThemeOverrides,
   lightTheme,
   NConfigProvider,
   NLoadingBarProvider,
@@ -21,12 +22,16 @@ const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue')
 const isDark = watchPreferDark();
 const theme = computed(() => (isDark.value ? darkTheme : lightTheme));
 
+const override: GlobalThemeOverrides = {
+  // TODO red palette
+};
+
 const root = ref<HTMLElement>();
 </script>
 
 <template>
   <div id="trakt-extension-root" ref="root">
-    <NConfigProvider :theme="theme" abstract>
+    <NConfigProvider :theme="theme" :theme-overrides="override" abstract>
       <AppComponent />
 
       <NLoadingBarProvider
@@ -48,7 +53,7 @@ const root = ref<HTMLElement>();
 </template>
 
 <style lang="scss">
-@import '~/styles/base.css';
+@use '~/styles/base.scss';
 
 :host {
   display: flex;

src/components/views/history/HistoryNavbar.vue

@@ -89,7 +89,15 @@ const onDateChange = debounce((values?: [number, number]) => {
 @use '~/styles/mixin' as mixin;
 
 .n-date-panel {
-  @include mixin.hover-background(rgb(0 0 0 / 80%), rgb(0 0 0 / 90%));
+  @include mixin.hover-background;
+
+  @media (prefers-color-scheme: light) {
+    @include mixin.hover-background;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include mixin.hover-background(rgb(0 0 0 / 80%), rgb(0 0 0 / 90%));
+  }
 
   margin-top: 12px;
   margin-left: -16px;

src/styles/base.css src/styles/base.scss

@@ -18,8 +18,8 @@
 
   /* ui color variables */
   --bg-blur: 2px;
-  --bg-blur-black: rgb(0 0 0 / 30%);
-  --bg-blur-black-hover: rgb(0 0 0 / 60%);
+  --bg-blur-bg: rgb(0 0 0 / 30%);
+  --bg-blur-bg-hover: rgb(0 0 0 / 60%);
 
   /* trakt.tv brand color */
   --trakt-red: #ed1c24;
@@ -45,9 +45,13 @@
     --color-border: var(--vt-c-divider-dark-2);
     --color-border-hover: var(--vt-c-divider-dark-1);
     --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2)
+    --color-text: var(--vt-c-text-dark-2);
+
+    /* ui color variables */
+    --bg-blur-bg: rgb(0 0 0 / 30%);
+    --bg-blur-bg-hover: rgb(0 0 0 / 60%);
   }
-  
+
   @media (prefers-color-scheme: light) {
     --color-background: var(--vt-c-white);
     --color-background-soft: var(--vt-c-white-soft);
@@ -56,6 +60,10 @@
     --color-border-hover: var(--vt-c-divider-light-1);
     --color-heading: var(--vt-c-text-light-1);
     --color-text: var(--vt-c-text-light-1);
+
+    /* ui color variables */
+    --bg-blur-bg: rgba(255 222 223 / 80%);
+    --bg-blur-bg-hover: rgba(255 222 223 / 90%);
   }
 }
 

src/styles/mixin.scss

@@ -1,6 +1,6 @@
 @mixin hover-background(
-  $from: var(--bg-blur-black),
-  $to: var(--bg-blur-black-hover),
+  $from: var(--bg-blur-bg),
+  $to: var(--bg-blur-bg-hover),
   $blur: var(--bg-blur),
   $transition: 0.5s var(--n-bezier)
 ) {