refactor: Move dark theme style to separate file

This commit is contained in:
Suraj Shetty 2020-07-28 17:29:52 +05:30
parent f8afa998da
commit e44c2bfb71
2 changed files with 37 additions and 37 deletions

View 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);
}

View file

@ -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';