refactor: Move dark theme style to separate file
This commit is contained in:
parent
f8afa998da
commit
e44c2bfb71
2 changed files with 37 additions and 37 deletions
36
frappe/public/scss/dark.scss
Normal file
36
frappe/public/scss/dark.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
[data-theme="dark"] {
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #F7FAFC;
|
||||
--gray-200: #EDF2F7;
|
||||
--gray-300: #E2E8F0;
|
||||
--gray-400: #CBD5E0;
|
||||
--gray-500: #A0AEC0;
|
||||
--gray-600: #718096;
|
||||
--gray-700: #4A5568;
|
||||
--gray-800: #2D3748;
|
||||
--gray-900: #1A202C;
|
||||
|
||||
// Type Colors
|
||||
--text-muted: var(--gray-300);
|
||||
--text-light: var(--gray-400);
|
||||
--text-color: var(--gray-50);
|
||||
--heading-color: var(--gray-50);
|
||||
|
||||
// SVG Colors
|
||||
--icon-fill: transparent;
|
||||
--icon-stroke: var(--gray-500);
|
||||
|
||||
// Layout Colors
|
||||
--bg-color: var(--gray-900);
|
||||
--fg-color: var(--gray-800);
|
||||
--card-bg: var(--gray-800);
|
||||
--control-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-700);
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: var(--bg-color);
|
||||
|
||||
--sidebar-select-color: var(--gray-800);
|
||||
|
||||
--shadow-inset: var(--fg-color);
|
||||
--border-color: var(--gray-600);
|
||||
}
|
||||
|
|
@ -232,43 +232,6 @@ $dropdown-border-radius: 0.375rem !default;
|
|||
$dropdown-item-padding-y: 0.5rem !default;
|
||||
$dropdown-item-padding-x: 0.5rem !default;
|
||||
|
||||
[data-theme="dark"] {
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #F7FAFC;
|
||||
--gray-200: #EDF2F7;
|
||||
--gray-300: #E2E8F0;
|
||||
--gray-400: #CBD5E0;
|
||||
--gray-500: #A0AEC0;
|
||||
--gray-600: #718096;
|
||||
--gray-700: #4A5568;
|
||||
--gray-800: #2D3748;
|
||||
--gray-900: #1A202C;
|
||||
|
||||
// Type Colors
|
||||
--text-muted: var(--gray-300);
|
||||
--text-light: var(--gray-400);
|
||||
--text-color: var(--gray-50);
|
||||
--heading-color: var(--gray-50);
|
||||
|
||||
// SVG Colors
|
||||
--icon-fill: transparent;
|
||||
--icon-stroke: var(--gray-500);
|
||||
|
||||
// Layout Colors
|
||||
--bg-color: var(--gray-900);
|
||||
--fg-color: var(--gray-800);
|
||||
--card-bg: var(--gray-800);
|
||||
--control-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-700);
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: var(--bg-color);
|
||||
|
||||
--sidebar-select-color: var(--gray-800);
|
||||
|
||||
--shadow-inset: var(--fg-color);
|
||||
--border-color: var(--gray-600);
|
||||
}
|
||||
|
||||
$spacer: 14px;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
|
|
@ -279,6 +242,7 @@ $grid-breakpoints: (
|
|||
2xl: 1440px
|
||||
) !default;
|
||||
|
||||
@import 'dark';
|
||||
@import 'typography';
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue