refactor: theme options, includes fix bg on firefox with dialog (#3247)

Co-authored-by: dni ⚡ <office@dnilabs.com>
2025-07-11 12:39:02 +02:00
parent 6563610b6c
commit b0d0901969
13 changed files with 424 additions and 937 deletions
@@ -1,130 +1,6 @@
-$themes: (
-  'classic': (
-    primary: #673ab7,
-    secondary: #9c27b0,
-    dark: #1f2234,
-    info: #333646,
-    marginal-bg: #1f2234,
-    marginal-text: #fff
-  ),
-  'bitcoin': (
-    primary: #ea611d,
-    secondary: #e56f35,
-    dark: #2d293b,
-    info: #333646,
-    marginal-bg: #000000,
-    marginal-text: #fff
-  ),
-  'freedom': (
-    primary: #e22156,
-    secondary: #b91a45,
-    dark: #0a0a0a,
-    info: #1b1b1b,
-    marginal-bg: #2d293b,
-    marginal-text: #fff
-  ),
-  'cyber': (
-    primary: #7cb342,
-    secondary: #558b2f,
-    dark: #0a0a0a,
-    info: #1b1b1b,
-    marginal-bg: #2d293b,
-    marginal-text: #fff
-  ),
-  'mint': (
-    primary: #3ab77d,
-    secondary: #27b065,
-    dark: #1f342b,
-    info: #334642,
-    marginal-bg: #1f342b,
-    marginal-text: #fff
-  ),
-  'autumn': (
-    primary: #b7763a,
-    secondary: #b07927,
-    dark: #34291f,
-    info: #463f33,
-    marginal-bg: #342a1f,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'flamingo': (
-    primary: #ff00ff,
-    secondary: #fda3fd,
-    dark: #2f032f,
-    info: #bc23bc,
-    marginal-bg: #311231,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'monochrome': (
-    primary: #494949,
-    secondary: #6b6b6b,
-    dark: #000,
-    info: rgb(39, 39, 39),
-    marginal-bg: #000,
-    marginal-text: rgb(255, 255, 255)
-  )
-);
-@each $theme, $colors in $themes {
-  @each $name, $color in $colors {
-    @if $name== 'dark' {
-      [data-theme='#{$theme}'] .q-drawer--dark,
-      body[data-theme='#{$theme}'].body--dark,
-      [data-theme='#{$theme}'] .q-menu--dark {
-        background: $color !important;
-      }
-      /* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
-      // set a darker body bg for all themes, when in "dark mode"
-      body[data-theme='#{$theme}'].body--dark {
-        background: scale-color($color, $lightness: -60%);
-      }
-      */
-    } @else {
-      body[data-theme='#{$theme}'].body--light {
-        background-color: #f4f4f4;
-      }
-    }
-    @if $name== 'info' {
-      [data-theme='#{$theme}'] .q-card--dark,
-      [data-theme='#{$theme}'] .q-stepper--dark {
-        background: $color !important;
-      }
-    }
-  }
-  [data-theme='#{$theme}'] {
-    @each $name, $color in $colors {
-      .bg-#{$name} {
-        background: $color !important;
-      }
-      .text-#{$name} {
-        color: $color !important;
-      }
-    }
-  }
-}
-
-[data-theme='freedom'] .q-drawer--dark {
-  background: #0a0a0a !important;
-}
-
-[data-theme='freedom'] .q-header {
-  background: #0a0a0a !important;
-}
-
-[data-theme='cyber'] .q-drawer--dark {
-  background: #0a0a0a !important;
-}
-
-[data-theme='cyber'] .q-header {
-  background: #0a0a0a !important;
-}
-
-[data-theme='salvador'] .q-drawer--dark {
-  background: #242424 !important;
-}
-
-[data-theme='salvador'] .q-header {
-  background: #0f47af !important;
-}
+@import 'themes';
+@import 'borders';
+@import 'background';

 [v-cloak] {
  display: none;