lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve dark mode with variables

Browse Source
This commit is contained in:
Daniel
2021-05-23 09:40:36 +05:30
parent c88680e30c
commit e5a668aa45
17 changed files with 150 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/scss/_main-sidebar.scss
View File

@@ -14,7 +14,8 @@
$lte-sidebar-dark-submenu-hover-color,
$lte-sidebar-dark-submenu-hover-bg,
$lte-sidebar-dark-submenu-active-color,
$lte-sidebar-dark-submenu-active-bg
$lte-sidebar-dark-submenu-active-bg,
$lte-sidebar-dark-header-color
);
}
@@ -30,7 +31,8 @@
$lte-sidebar-light-submenu-hover-color,
$lte-sidebar-light-submenu-hover-bg,
$lte-sidebar-light-submenu-active-color,
$lte-sidebar-light-submenu-active-bg
$lte-sidebar-light-submenu-active-bg,
$lte-sidebar-light-header-color
);
}

97
src/scss/_variables.scss
View File

@@ -3,50 +3,77 @@
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
$gray-800: #343a40 !default;
$dark: $gray-800 !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-shadows: true !default;
$enable-shadows: true;
// Links
//
// Style anchor elements.
$link-decoration: none !default;
$link-decoration: none;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// stylelint-enable value-keyword-case
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding-y: .75rem !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem;
$table-cell-padding-x: .75rem;
// Forms
$form-check-input-width: 1em !default;
$form-check-input-width: 1em;
// Navbar
$navbar-nav-link-padding-x: 1rem !default;
$navbar-nav-link-padding-x: 1rem;
// End of Bootstrap Variables
// Variables for AdminLTE
// Dynamic Variables
// --------------------------------------------------------
:root {
// Dark Sidebar Native Variables
--lte-sidebar-dark-bg: #343a40;
--lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
--lte-sidebar-dark-color: #c2c7d0;
--lte-sidebar-dark-hover-color: #{$white};
--lte-sidebar-dark-active-color: #{$white};
--lte-sidebar-dark-submenu-bg: transparent;
--lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-color);
--lte-sidebar-dark-submenu-hover-color: #{$white};
--lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-hover-bg);
--lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-bg);
--lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
--lte-sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)};
// Light Sidebar Native Variables
--lte-sidebar-light-bg: #{$white};
--lte-sidebar-light-hover-bg: rgba(#{$black}, .1);
--lte-sidebar-light-color: #{$gray-800};
--lte-sidebar-light-hover-color: #{$gray-900};
--lte-sidebar-light-active-color: #{$black};
--lte-sidebar-light-submenu-bg: transparent;
--lte-sidebar-light-submenu-color: #777;
--lte-sidebar-light-submenu-hover-color: #{$black};
--lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-hover-bg);
--lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-hover-color);
--lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-hover-bg);
--lte-sidebar-light-header-color: #{shade-color($gray-800, 5%)};
}
// LAYOUT
// --------------------------------------------------------
@@ -85,30 +112,32 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
// --------------------------------------------------------
// Dark sidebar
$lte-sidebar-dark-bg: $dark !default;
$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color: #c2c7d0 !default;
$lte-sidebar-dark-hover-color: $white !default;
$lte-sidebar-dark-active-color: $white !default;
$lte-sidebar-dark-submenu-bg: transparent !default;
$lte-sidebar-dark-submenu-color: #c2c7d0 !default;
$lte-sidebar-dark-submenu-hover-color: $white !default;
$lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default;
$lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default;
$lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
$lte-sidebar-dark-bg: var(--lte-sidebar-dark-bg) !default;
$lte-sidebar-dark-hover-bg: var(--lte-sidebar-dark-hover-bg) !default;
$lte-sidebar-dark-color: var(--lte-sidebar-dark-color) !default;
$lte-sidebar-dark-hover-color: var(--lte-sidebar-dark-hover-color) !default;
$lte-sidebar-dark-active-color: var(--lte-sidebar-dark-active-color) !default;
$lte-sidebar-dark-submenu-bg: var(--lte-sidebar-dark-submenu-bg) !default;
$lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-submenu-color) !default;
$lte-sidebar-dark-submenu-hover-color: var(--lte-sidebar-dark-submenu-hover-color) !default;
$lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-submenu-hover-bg) !default;
$lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-submenu-active-color) !default;
$lte-sidebar-dark-submenu-active-bg: var(--lte-sidebar-dark-submenu-active-bg) !default;
$lte-sidebar-dark-header-color: var(--lte-sidebar-dark-header-color) !default;
// Light sidebar
$lte-sidebar-light-bg: $white !default;
$lte-sidebar-light-hover-bg: rgba($black, .1) !default;
$lte-sidebar-light-color: $gray-800 !default;
$lte-sidebar-light-hover-color: $gray-900 !default;
$lte-sidebar-light-active-color: $black !default;
$lte-sidebar-light-submenu-bg: transparent !default;
$lte-sidebar-light-submenu-color: #777 !default;
$lte-sidebar-light-submenu-hover-color: $black !default;
$lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default;
$lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default;
$lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default;
$lte-sidebar-light-bg: var(--lte-sidebar-light-bg) !default;
$lte-sidebar-light-hover-bg: var(--lte-sidebar-light-hover-bg) !default;
$lte-sidebar-light-color: var(--lte-sidebar-light-color) !default;
$lte-sidebar-light-hover-color: var(--lte-sidebar-light-hover-color) !default;
$lte-sidebar-light-active-color: var(--lte-sidebar-light-active-color) !default;
$lte-sidebar-light-submenu-bg: var(--lte-sidebar-light-submenu-bg) !default;
$lte-sidebar-light-submenu-color: var(--lte-sidebar-light-submenu-color) !default;
$lte-sidebar-light-submenu-hover-color: var(--lte-sidebar-light-submenu-hover-color) !default;
$lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-submenu-hover-bg) !default;
$lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-submenu-active-color) !default;
$lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-active-bg) !default;
$lte-sidebar-light-header-color: var(--lte-sidebar-light-header-color) !default;
// SIDEBAR MINI
// --------------------------------------------------------

2
src/scss/adminlte.scss
View File

@@ -10,9 +10,7 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "variables"; // little modified are here
@import "bootstrap/scss/mixins";
@import "custom-utilities";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/bootstrap";
// Variables and Mixins

10
src/scss/bootstrap-dark/_list-group.scss
View File

@@ -53,11 +53,11 @@
// List group contextual variants
@each $state, $value in $theme-colors-alt {
$list-group-background-alt: shift-color($value, $list-group-item-bg-scale-alt);
$list-group-color-alt: shift-color($value, $list-group-item-color-scale-alt);
@if (contrast-ratio($list-group-background-alt, $list-group-color-alt) < $min-contrast-ratio-alt) {
$list-group-color-alt: mix($value, color-contrast($list-group-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
$list-group-variant-bg-alt: shift-color($value, $list-group-item-bg-scale-alt);
$list-group-variant-color-alt: shift-color($value, $list-group-item-color-scale-alt);
@if (contrast-ratio($list-group-variant-bg-alt, $list-group-variant-color-alt) < $min-contrast-ratio-alt) {
$list-group-variant-color-alt: mix($value, color-contrast($list-group-variant-bg-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
}
@include list-group-item-variant($state, $list-group-background-alt, $list-group-color-alt);
@include list-group-item-variant($state, $list-group-variant-bg-alt, $list-group-variant-color-alt);
}

1
src/scss/bootstrap-dark/_tables.scss
View File

@@ -4,6 +4,7 @@
.table {
--#{$variable-prefix}table-bg: #{$table-bg-alt};
--#{$variable-prefix}table-accent-bg: #{$table-bg-alt};
--#{$variable-prefix}table-striped-color: #{$table-striped-color-alt};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt};
--#{$variable-prefix}table-active-color: #{$table-active-color-alt};

20
src/scss/bootstrap-dark/_variables-alt.scss
View File

@@ -14,11 +14,11 @@ $color-schemes: (
// items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
$white-alt: #f0f6fc !default;
$gray-100-alt: #f8f9fa !default;
$gray-200-alt: #e9ecef !default;
$gray-300-alt: #dee2e6 !default;
$gray-400-alt: #ced4da !default;
$gray-500-alt: #6c757d !default;
$gray-100-alt: #c9d1d9 !default;
$gray-200-alt: #b1bac4 !default;
$gray-300-alt: #8b949e !default;
$gray-400-alt: #6e7681 !default;
$gray-500-alt: #484f58 !default;
$gray-600-alt: #30363d !default;
$gray-700-alt: #21262d !default;
$gray-800-alt: #161b22 !default;
@@ -74,7 +74,7 @@ $info-alt: $cyan-alt !default;
$warning-alt: $yellow-alt !default;
$danger-alt: $red-alt !default;
$light-alt: $gray-100-alt !default;
$dark-alt: $gray-900-alt !default;
$dark-alt: $gray-800-alt !default;
$theme-colors-alt: (
"primary": $primary-alt,
@@ -114,7 +114,7 @@ $body-color-alt: $gray-100-alt !default; // $gray-900 !default;
// ______________________________________
// Style anchor elements.
$link-color-alt: shift-color($primary-alt, -15%) !default;
$link-color-alt: #58a6ff !default;
$link-shade-percentage-alt: 20% !default; // TODO: should be -20%;
$link-hover-color-alt: tint-color($link-color-alt, $link-shade-percentage-alt) !default; // TODO: shift-color
@@ -235,7 +235,7 @@ $input-bg-alt: $gray-800-alt !default;
$input-disabled-bg-alt: $gray-900-alt !default;
$input-disabled-border-color-alt: null !default;
$input-color-alt: $gray-300-alt !default;
$input-color-alt: $body-color-alt !default;
$input-border-color-alt: $gray-700-alt !default;
$input-box-shadow-alt: $box-shadow-inset-alt !default;
@@ -310,7 +310,7 @@ $form-range-thumb-disabled-bg-alt: $gray-500-alt !default;
$form-file-button-color-alt: $input-color-alt !default;
$form-file-button-bg-alt: $input-group-addon-bg-alt !default;
$form-file-button-hover-bg-alt: shade-color($form-file-button-bg-alt, 5%) !default;
$form-file-button-hover-bg-alt: tint-color($form-file-button-bg-alt, 5%) !default;
$form-floating-label-opacity-alt: .65 !default;
@@ -593,7 +593,7 @@ $figure-caption-color-alt: $gray-400-alt !default;
// Breadcrumbs
// ______________________________________
$breadcrumb-bg-alt: $gray-800-alt !default; // null !default;
$breadcrumb-bg-alt: null !default; // null !default;
$breadcrumb-divider-color-alt: $gray-400-alt !default;
$breadcrumb-active-color-alt: $gray-400-alt !default;

6
src/scss/bootstrap-dark/forms/_form-control.scss
View File

@@ -28,7 +28,7 @@
// Disabled and read-only inputs
&:disabled,
&:read-only {
&[readonly] {
background-color: $input-disabled-bg-alt;
border-color: $input-disabled-border-color-alt;
}
@@ -40,7 +40,7 @@
border-color: inherit;
}
&:hover:not(:disabled):not(:read-only)::file-selector-button {
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: $form-file-button-hover-bg-alt;
}
@@ -50,7 +50,7 @@
border-color: inherit;
}
&:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: $form-file-button-hover-bg-alt;
}
}

12
src/scss/dark/_cards.scss
View File

@@ -8,11 +8,11 @@
}
.card {
background-color: $dark-alt;
background-color: $gray-900-alt;
color: $white-alt;
.card {
background-color: tint-colors($dark-alt, 5%);
background-color: tint-colors($gray-900-alt, 5%);
color: $white-alt;
}
.nav.flex-column > li {
@@ -31,18 +31,18 @@
}
.card-comments {
background-color: tint-colors($dark-alt, 1.25%);
background-color: tint-colors($gray-900-alt, 1.25%);
.username {
color: $gray-400-alt;
}
.card-comment {
border-bottom-color: tint-colors($dark-alt, 7.5%);
border-bottom-color: tint-colors($gray-900-alt, 7.5%);
}
}
.todo-list > li {
background-color: tint-colors($dark-alt, 5%);
border-color: tint-colors($dark-alt, 7.5%);
background-color: tint-colors($gray-900-alt, 5%);
border-color: tint-colors($gray-900-alt, 7.5%);
color: $white-alt;
}

2
src/scss/dark/_main-header.scss
View File

@@ -3,7 +3,7 @@
border-bottom-color: tint-color($dark-alt, 10%);
.nav-link {
color: $gray-400-alt;
color: $body-color-alt;
&:hover,
&:focus {

39
src/scss/dark/_main-sidebar.scss
View File

@@ -1,39 +0,0 @@
//
// Core: Main Sidebar
//
.sidebar-bg-dark {
@include nav-treeview-dark (
$lte-sidebar-dark-bg-alt,
$lte-sidebar-dark-hover-bg-alt,
$lte-sidebar-dark-color-alt,
$lte-sidebar-dark-hover-color-alt,
$lte-sidebar-dark-active-color-alt,
$lte-sidebar-dark-submenu-bg-alt,
$lte-sidebar-dark-submenu-color-alt,
$lte-sidebar-dark-submenu-hover-color-alt,
$lte-sidebar-dark-submenu-hover-bg-alt,
$lte-sidebar-dark-submenu-active-color-alt,
$lte-sidebar-dark-submenu-active-bg-alt
);
}
.sidebar-bg-light {
@include nav-treeview-light (
$lte-sidebar-light-bg-alt,
$lte-sidebar-light-hover-bg-alt,
$lte-sidebar-light-color-alt,
$lte-sidebar-light-hover-color-alt,
$lte-sidebar-light-active-color-alt,
$lte-sidebar-light-submenu-bg-alt,
$lte-sidebar-light-submenu-color-alt,
$lte-sidebar-light-submenu-hover-color-alt,
$lte-sidebar-light-submenu-hover-bg-alt,
$lte-sidebar-light-submenu-active-color-alt,
$lte-sidebar-light-submenu-active-bg-alt
);
}
.sidebar-color-primary {
@include sidebar-color($primary-alt);
}

34
src/scss/dark/_variables-alt.scss
View File

@@ -1,36 +1,18 @@
// SIDEBAR SKINS
// Dynamic Variables
// --------------------------------------------------------
// Dark sidebar
$lte-sidebar-dark-bg-alt: $dark-alt !default;
$lte-sidebar-dark-hover-bg-alt: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color-alt: #c2c7d0 !default;
$lte-sidebar-dark-hover-color-alt: $white-alt !default;
$lte-sidebar-dark-active-color-alt: $white-alt !default;
$lte-sidebar-dark-submenu-bg-alt: transparent !default;
$lte-sidebar-dark-submenu-color-alt: #c2c7d0 !default;
$lte-sidebar-dark-submenu-hover-color-alt: $white-alt !default;
$lte-sidebar-dark-submenu-hover-bg-alt: $lte-sidebar-dark-hover-bg-alt !default;
$lte-sidebar-dark-submenu-active-color-alt: $lte-sidebar-dark-bg-alt !default;
$lte-sidebar-dark-submenu-active-bg-alt: rgba(255, 255, 255, .9) !default;
:root {
// Dark Sidebar Native Variables
--lte-sidebar-dark-bg: #{$dark-alt};
// Light sidebar
$lte-sidebar-light-bg-alt: $white-alt !default;
$lte-sidebar-light-hover-bg-alt: rgba($black-alt, .1) !default;
$lte-sidebar-light-color-alt: $gray-800-alt !default;
$lte-sidebar-light-hover-color-alt: $gray-900-alt !default;
$lte-sidebar-light-active-color-alt: $black-alt !default;
$lte-sidebar-light-submenu-bg-alt: transparent !default;
$lte-sidebar-light-submenu-color-alt: #777 !default;
$lte-sidebar-light-submenu-hover-color-alt: $black-alt !default;
$lte-sidebar-light-submenu-hover-bg-alt: $lte-sidebar-light-hover-bg-alt !default;
$lte-sidebar-light-submenu-active-color-alt: $lte-sidebar-light-hover-color-alt !default;
$lte-sidebar-light-submenu-active-bg-alt: $lte-sidebar-light-submenu-hover-bg-alt !default;
// Light Sidebar Native Variables
--lte-sidebar-light-bg: #{$white-alt};
}
// MAIN FOOTER
// --------------------------------------------------------
$lte-main-footer-bg-alt: $dark-alt !default;
// Body background (Affects main content background only)
$lte-main-bg-alt: $black-alt !default;
$lte-main-bg-alt: $gray-900-alt !default;
$lte-main-color-alt: $white-alt !default;

2
src/scss/dark/parts/_core.scss
View File

@@ -1,4 +1,4 @@
@import "../main-header";
@import "../main-sidebar";
// @import "../main-sidebar";
@import "../content-wrapper";
@import "../main-footer";

5
src/scss/mixins/_nav-treeview-dark.scss
View File

@@ -9,7 +9,8 @@
$lte-sidebar-submenu-hover-color,
$lte-sidebar-submenu-hover-bg,
$lte-sidebar-submenu-active-color,
$lte-sidebar-submenu-active-bg
$lte-sidebar-submenu-active-bg,
$lte-sidebar-header-color
) {
// Sidebar background color
background-color: $lte-sidebar-bg;
@@ -45,7 +46,7 @@
// Section Heading
.nav-header {
background-color: inherit; //darken($lte-sidebar-bg, 3%);
color: tint-color($lte-sidebar-color, 5%);
color: $lte-sidebar-header-color;
}
// All links within the sidebar menu

5
src/scss/mixins/_nav-treeview-light.scss
View File

@@ -9,7 +9,8 @@
$lte-sidebar-submenu-hover-color,
$lte-sidebar-submenu-hover-bg,
$lte-sidebar-submenu-active-color,
$lte-sidebar-submenu-active-bg
$lte-sidebar-submenu-active-bg,
$lte-sidebar-header-color
) {
// Sidebar background color
background-color: $lte-sidebar-bg;
@@ -45,7 +46,7 @@
// Section Heading
.nav-header {
background-color: inherit;
color: shade-color($lte-sidebar-color, 5%);
color: $lte-sidebar-header-color;
}
// All links within the sidebar menu