From 31e665add127d191c8a046f4be177b46823ea4af Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Wed, 10 Mar 2021 01:14:26 +0530 Subject: [PATCH] upgrade dark mode --- build/scss/_alerts.scss | 16 ++++ build/scss/_buttons.scss | 12 +++ build/scss/_callout.scss | 16 ++++ build/scss/_cards.scss | 25 ++++- build/scss/_colors.scss | 40 ++++++++ build/scss/_direct-chat.scss | 13 +++ build/scss/_forms.scss | 27 ++++++ build/scss/_info-box.scss | 12 +++ build/scss/_layout.scss | 32 +++++++ build/scss/_main-header.scss | 15 +-- build/scss/_main-sidebar.scss | 18 ++++ build/scss/_miscellaneous.scss | 30 ++++++ build/scss/_navs.scss | 22 +++++ build/scss/_pagination.scss | 10 +- build/scss/_text.scss | 6 ++ build/scss/_toasts.scss | 9 ++ build/scss/_variables-alt.scss | 107 ++++++++++++++++++++++ build/scss/plugins/_bootstrap-slider.scss | 16 ++++ build/scss/plugins/_bootstrap-switch.scss | 16 ++++ build/scss/plugins/_icheck-bootstrap.scss | 37 ++++++++ build/scss/plugins/_select2.scss | 10 ++ 21 files changed, 473 insertions(+), 16 deletions(-) create mode 100644 build/scss/_variables-alt.scss diff --git a/build/scss/_alerts.scss b/build/scss/_alerts.scss index e6952a5ef..e882666a5 100644 --- a/build/scss/_alerts.scss +++ b/build/scss/_alerts.scss @@ -34,3 +34,19 @@ @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); } } + +.dark-mode { + @each $color, $value in $theme-colors-alt { + .alert-#{$color} { + color: color-yiq($value); + background-color: $value; + border-color: darken($value, 5%); + } + + .alert-default-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } + } +} + +// diff --git a/build/scss/_buttons.scss b/build/scss/_buttons.scss index 8bef8ebe1..362e7800b 100644 --- a/build/scss/_buttons.scss +++ b/build/scss/_buttons.scss @@ -139,4 +139,16 @@ border-color: lighten($gray-600, 5%); } } + + @each $color, $value in $theme-colors-alt { + .btn-#{$color} { + @include button-variant($value, $value); + } + } + + @each $color, $value in $theme-colors-alt { + .btn-outline-#{$color} { + @include button-outline-variant($value); + } + } } diff --git a/build/scss/_callout.scss b/build/scss/_callout.scss index 27f4d82ae..9e1877ad6 100644 --- a/build/scss/_callout.scss +++ b/build/scss/_callout.scss @@ -53,5 +53,21 @@ .dark-mode { .callout { background-color: lighten($dark, 5%); + + &.callout-danger { + border-left-color: lighten($danger-alt, 10%); + } + + &.callout-warning { + border-left-color: lighten($warning-alt, 10%); + } + + &.callout-info { + border-left-color: lighten($info-alt, 10%); + } + + &.callout-success { + border-left-color: lighten($success-alt, 10%); + } } } diff --git a/build/scss/_cards.scss b/build/scss/_cards.scss index b86a72c56..9807629f1 100644 --- a/build/scss/_cards.scss +++ b/build/scss/_cards.scss @@ -481,6 +481,15 @@ html.maximized-card { .dark-mode { + // Color variants + @each $name, $color in $theme-colors-alt { + @include cards-variant($name, $color); + } + + @each $name, $color in $colors-alt { + @include cards-variant($name, $color); + } + .card { background-color: $dark; color: $white; @@ -499,7 +508,7 @@ html.maximized-card { border-color: $gray-600; } &:not(.card-outline) > .card-header a.active { - color: $white; + color: $dark; } } @@ -518,4 +527,18 @@ html.maximized-card { border-color: lighten($dark, 7.5%); color: $white; } + + .todo-list { + @each $name, $color in $theme-colors-alt { + .#{$name} { + border-left-color: $color; + } + } + + @each $name, $color in $colors-alt { + .#{$name} { + border-left-color: $color; + } + } + } } diff --git a/build/scss/_colors.scss b/build/scss/_colors.scss index 4a8b74bd4..107ba795d 100644 --- a/build/scss/_colors.scss +++ b/build/scss/_colors.scss @@ -101,4 +101,44 @@ a.text-muted:hover { .link-dark { color: $gray-400; } + + // Background colors (theme colors) + @each $name, $color in $theme-colors-alt { + @include background-variant($name, $color); + } + + // Background colors (colors) + @each $name, $color in $colors-alt { + @include background-variant($name, $color); + } + + // Gradient Background colors (theme colors) + @each $name, $color in $theme-colors-alt { + @include background-gradient-variant($name, $color); + } + + // Gradient Background colors (colors) + @each $name, $color in $colors-alt { + @include background-gradient-variant($name, $color); + } + + // Accent colors (theme colors) + @each $name, $color in $theme-colors-alt { + @include accent-variant($name, $color); + } + + [class*="accent-"] { + @each $name, $color in $theme-colors-alt { + a.btn-#{$name} { + color: color-yiq($color); + } + } + } + + // Accent colors (colors) + @each $name, $color in $colors-alt { + @include accent-variant($name, $color); + } } + +// diff --git a/build/scss/_direct-chat.scss b/build/scss/_direct-chat.scss index a75b5ee0f..ce0321605 100644 --- a/build/scss/_direct-chat.scss +++ b/build/scss/_direct-chat.scss @@ -243,4 +243,17 @@ border-right-color: transparent; } } + + // Color variants + @each $name, $color in $theme-colors-alt { + .direct-chat-#{$name} { + @include direct-chat-variant($color); + } + } + + @each $name, $color in $colors-alt { + .direct-chat-#{$name} { + @include direct-chat-variant($color); + } + } } diff --git a/build/scss/_forms.scss b/build/scss/_forms.scss index 97c20bb1f..93dfb595b 100644 --- a/build/scss/_forms.scss +++ b/build/scss/_forms.scss @@ -400,5 +400,32 @@ body.text-sm { &::-ms-track { background-color: lighten($dark, 7.5%); } + + @each $name, $color in $theme-colors-alt { + @include custom-range-variant($name, $color); + } + + @each $name, $color in $colors-alt { + @include custom-range-variant($name, $color); + } + } + + // custom switch color variations + .custom-switch { + @each $name, $color in $theme-colors-alt { + @include custom-switch-variant($name, $color); + } + + @each $name, $color in $colors-alt { + @include custom-switch-variant($name, $color); + } + } + + @each $name, $color in $theme-colors-alt { + @include custom-control-input-variant($name, $color); + } + + @each $name, $color in $colors-alt { + @include custom-control-input-variant($name, $color); } } diff --git a/build/scss/_info-box.scss b/build/scss/_info-box.scss index 6ae9a6c38..1a636ca08 100644 --- a/build/scss/_info-box.scss +++ b/build/scss/_info-box.scss @@ -149,5 +149,17 @@ .info-box { background-color: $dark; color: $white; + @each $name, $color in $theme-colors-alt { + .info-box { + .bg-#{$name}, + .bg-gradient-#{$name} { + color: color-yiq($color); + + .progress-bar { + background-color: color-yiq($color); + } + } + } + } } } diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index 79317df86..7769fecd0 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -651,6 +651,38 @@ body:not(.layout-fixed) { background-color: $dark-main-bg; color: $white; + .wrapper { + .layout-navbar-fixed & { + @each $name, $color in $theme-colors-alt { + .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-dark-bg; + } + + .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-light-bg; + } + } + } + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .layout#{$infix}-navbar-fixed & { + @each $name, $color in $theme-colors-alt { + .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-dark-bg; + } + + .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-light-bg; + } + } + } + } + } + } + .breadcrumb-item { &.active, + .breadcrumb-item::before { diff --git a/build/scss/_main-header.scss b/build/scss/_main-header.scss index 7ebeaac87..f43019236 100644 --- a/build/scss/_main-header.scss +++ b/build/scss/_main-header.scss @@ -167,20 +167,7 @@ display: none; justify-content: center; flex-direction: column; - - @each $color, $value in $theme-colors { - @if $color != dark and $color != light { - .navbar-#{$color} & { - background-color: $value; - } - } - } - - @each $color, $value in $colors { - .navbar-#{$color} & { - background-color: $value; - } - } + background-color: initial; &.navbar-search-open { display: flex; diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss index df79e539f..e87c4395a 100644 --- a/build/scss/_main-sidebar.scss +++ b/build/scss/_main-sidebar.scss @@ -1144,3 +1144,21 @@ } } } + +.dark-mode { + @each $name, $color in $theme-colors-alt { + .sidebar-dark-#{$name}, + .sidebar-light-#{$name} { + @include sidebar-color($color); + } + } + + @each $name, $color in $colors-alt { + .sidebar-dark-#{$name}, + .sidebar-light-#{$name} { + @include sidebar-color($color); + } + } +} + +// diff --git a/build/scss/_miscellaneous.scss b/build/scss/_miscellaneous.scss index 4489ca172..3fbd6cdb4 100644 --- a/build/scss/_miscellaneous.scss +++ b/build/scss/_miscellaneous.scss @@ -495,6 +495,36 @@ blockquote { } blockquote { background-color: lighten($dark, 5%); + + @each $color, $value in $theme-colors { + &.quote-#{$color} { + border-color: $value; + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $value; + } + } + } + + @each $color, $value in $colors { + &.quote-#{$color} { + border-color: $value; + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $value; + } + } + } } .close, .mailbox-attachment-close { diff --git a/build/scss/_navs.scss b/build/scss/_navs.scss index 0fbe6edd2..25c5d741c 100644 --- a/build/scss/_navs.scss +++ b/build/scss/_navs.scss @@ -143,4 +143,26 @@ } } } + + // Color variants + @each $color, $value in $theme-colors-alt { + @if $color == dark or $color == light { + .navbar-#{$color} { + background-color: $value; + @if $color == dark { + border-color: lighten($dark, 10%); + } + } + } + } + + @each $color, $value in $theme-colors-alt { + @if $color != dark and $color != light { + @include navbar-variant($color, $value); + } + } + + @each $color, $value in $colors-alt { + @include navbar-variant($color, $value); + } } diff --git a/build/scss/_pagination.scss b/build/scss/_pagination.scss index 12cce8a79..668ec9188 100644 --- a/build/scss/_pagination.scss +++ b/build/scss/_pagination.scss @@ -50,8 +50,16 @@ border-color: $gray-600 !important; color: $gray-600; } + + .page-link { + color: $primary-alt; + } + &.active { .page-link { + background-color: $primary-alt; + color: $white; + &:hover, &:focus { color: $gray-400 !important; @@ -65,7 +73,7 @@ &:hover, &:focus { - color: lighten($primary, 5%); + color: lighten($primary-alt, 5%); background-color: lighten($dark, 5%); } } diff --git a/build/scss/_text.scss b/build/scss/_text.scss index bf198a19c..2c285b303 100644 --- a/build/scss/_text.scss +++ b/build/scss/_text.scss @@ -42,4 +42,10 @@ .text-muted { color: $gray-500 !important; } + + @each $name, $color in $colors-alt { + .text-#{$name} { + color: #{$color} !important; + } + } } diff --git a/build/scss/_toasts.scss b/build/scss/_toasts.scss index 60500007b..34d2b393e 100644 --- a/build/scss/_toasts.scss +++ b/build/scss/_toasts.scss @@ -55,9 +55,18 @@ background-color: rgba($dark, .7); color: $gray-100; } + + @each $name, $color in $theme-colors-alt { + @include toast-variant($name, $color); + } + + @each $name, $color in $colors-alt { + @include toast-variant($name, $color); + } } } + .toast { @each $name, $color in $theme-colors { @include toast-variant($name, $color); diff --git a/build/scss/_variables-alt.scss b/build/scss/_variables-alt.scss new file mode 100644 index 000000000..66d438bd2 --- /dev/null +++ b/build/scss/_variables-alt.scss @@ -0,0 +1,107 @@ +// +// Core: Variables for Dark Mode +// + +// COLORS +// -------------------------------------------------------- + +// stylelint-disable +// Gray color will be default in dark mode +$white-alt: $white !default; +$gray-100-alt: $gray-100 !default; +$gray-200-alt: $gray-200 !default; +$gray-300-alt: $gray-300 !default; +$gray-400-alt: $gray-400 !default; +$gray-500-alt: $gray-500 !default; +$gray-600-alt: $gray-600 !default; +$gray-700-alt: $gray-700 !default; +$gray-800-alt: $gray-800 !default; +$gray-900-alt: $gray-900 !default; +$black-alt: $black !default; + +$grays-alt: () !default; +$grays-alt: map-merge(( + "100": $gray-100-alt, + "200": $gray-200-alt, + "300": $gray-300-alt, + "400": $gray-400-alt, + "500": $gray-500-alt, + "600": $gray-600-alt, + "700": $gray-700-alt, + "800": $gray-800-alt, + "900": $gray-900-alt +), $grays-alt); + +// Below colors from bootwatch darkly +$blue-alt: #375a7f !default; +$indigo-alt: #6610f2 !default; +$purple-alt: #6f42c1 !default; +$pink-alt: #e83e8c !default; +$red-alt: #e74c3c !default; +$orange-alt: #fd7e14 !default; +$yellow-alt: #f39c12 !default; +$green-alt: #00bc8c !default; +$teal-alt: #20c997 !default; +$cyan-alt: #3498db !default; + +// by darken function +$lightblue-alt: lighten(#3c8dbc, 20%) !default; +$navy-alt: lighten(#001f3f, 5%) !default; +$olive-alt: lighten(#3d9970, 20%) !default; +$lime-alt: lighten(#01ff70, 20%) !default; +$fuchsia-alt: lighten(#f012be, 20%) !default; +$maroon-alt: lighten(#d81b60, 20%) !default; +$gray-x-light-alt: lighten(#d2d6de, 20%) !default; + +$colors-alt: () !default; +$colors-alt: map-merge(( + "blue": $blue-alt, + "indigo": $indigo-alt, + "purple": $purple-alt, + "pink": $pink-alt, + "red": $red-alt, + "orange": $orange-alt, + "yellow": $yellow-alt, + "green": $green-alt, + "teal": $teal-alt, + "cyan": $cyan-alt, + "white": $white-alt, + "gray": $gray-600-alt, + "gray-dark": $gray-800-alt +), $colors-alt); + +$primary-alt: $blue-alt !default; +$secondary-alt: $gray-600-alt !default; +$success-alt: $green-alt !default; +$info-alt: $cyan-alt !default; +$warning-alt: $yellow-alt !default; +$danger-alt: $red-alt !default; +$light-alt: $gray-100-alt !default; +$dark-alt: $gray-800-alt !default; + +$theme-colors-alt: () !default; +$theme-colors-alt: map-merge(( + "primary": $primary-alt, + "secondary": $secondary-alt, + "success": $success-alt, + "info": $info-alt, + "warning": $warning-alt, + "danger": $danger-alt, + "light": $light-alt, + "dark": $dark-alt +), $theme-colors-alt); + +$colors-alt: map-merge( + ( + "lightblue": $lightblue-alt, + "navy": $navy-alt, + "olive": $olive-alt, + "lime": $lime-alt, + "fuchsia": $fuchsia-alt, + "maroon": $maroon-alt, + ), + $colors-alt +); +// stylelint-enable + +// diff --git a/build/scss/plugins/_bootstrap-slider.scss b/build/scss/plugins/_bootstrap-slider.scss index 3358c340b..85395a003 100644 --- a/build/scss/plugins/_bootstrap-slider.scss +++ b/build/scss/plugins/_bootstrap-slider.scss @@ -39,4 +39,20 @@ background-color: lighten($dark, 10%); background-image: none; } + + @each $name, $color in $theme-colors-alt { + .slider-#{$name} .slider { + .slider-selection { + background: $color; + } + } + } + + @each $name, $color in $colors-alt { + .slider-#{$name} .slider { + .slider-selection { + background: $color; + } + } + } } diff --git a/build/scss/plugins/_bootstrap-switch.scss b/build/scss/plugins/_bootstrap-switch.scss index c0af65df4..f1f41a3f3 100644 --- a/build/scss/plugins/_bootstrap-switch.scss +++ b/build/scss/plugins/_bootstrap-switch.scss @@ -184,5 +184,21 @@ $bootstrap-switch-handle-border-radius: .1rem; color: $white; border-color: lighten($dark, 7.5%); } + .bootstrap-switch-handle-on, + .bootstrap-switch-handle-off { + @each $name, $color in $theme-colors-alt { + &.bootstrap-switch-#{$name} { + background: $color; + color: color-yiq($color); + } + } + + @each $name, $color in $colors-alt { + &.bootstrap-switch-#{$name} { + background: $color; + color: color-yiq($color); + } + } + } } } diff --git a/build/scss/plugins/_icheck-bootstrap.scss b/build/scss/plugins/_icheck-bootstrap.scss index ba5a68b16..020f9e0e5 100644 --- a/build/scss/plugins/_icheck-bootstrap.scss +++ b/build/scss/plugins/_icheck-bootstrap.scss @@ -47,4 +47,41 @@ border-color: $gray-600; } } + // iCheck colors (theme colors) + @each $name, $color in $theme-colors-alt { + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before, + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before { + border-color: #{$color}; + } + + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before, + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before { + border-color: #{$color}; + } + + .icheck-#{$name} > input:first-child:checked + label::before, + .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before { + background-color: #{$color}; + border-color: #{$color}; + } + } + + // iCheck colors (colors) + @each $name, $color in $colors-alt { + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before, + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before { + border-color: #{$color}; + } + + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before, + .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before { + border-color: #{$color}; + } + + .icheck-#{$name} > input:first-child:checked + label::before, + .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before { + background-color: #{$color}; + border-color: #{$color}; + } + } } diff --git a/build/scss/plugins/_select2.scss b/build/scss/plugins/_select2.scss index 0dbd46fd4..8aef3aca7 100644 --- a/build/scss/plugins/_select2.scss +++ b/build/scss/plugins/_select2.scss @@ -314,4 +314,14 @@ select.form-control-sm ~ { .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { color: $white; } + + // Background colors (theme colors) + @each $name, $color in $theme-colors-alt { + @include select2-variant($name, $color); + } + + // Background colors (colors) + @each $name, $color in $colors-alt { + @include select2-variant($name, $color); + } }