From 6d786c27eded5b0b431e183d5e51aad23c6e01cf Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 16 Dec 2019 00:35:54 +0100 Subject: [PATCH] dark theme, remove unused functions --- _config.yml | 2 ++ pages/_includes/cards/invoice.html | 12 +++---- pages/_layouts/base.html | 4 ++- scss/_dark.scss | 53 ++++++++++++++++++----------- scss/_variables.scss | 5 ++- scss/layout/_page.scss | 2 +- scss/mixins/_functions.scss | 11 +----- scss/ui/_forms.scss | 4 +-- scss/ui/_highlight.scss | 2 +- scss/ui/_icons.scss | 4 +-- scss/ui/_pagination.scss | 2 +- scss/ui/_typo.scss | 1 + scss/ui/forms/_form-imagecheck.scss | 4 +-- scss/vendor/_sparkline.scss | 2 +- 14 files changed, 58 insertions(+), 50 deletions(-) diff --git a/_config.yml b/_config.yml index cc913a1d..d49ec3a1 100644 --- a/_config.yml +++ b/_config.yml @@ -8,6 +8,8 @@ github_url: https://github.com/tabler/tabler debug: false +dark-theme: false + plugins: - jekyll-random - jekyll-tidy diff --git a/pages/_includes/cards/invoice.html b/pages/_includes/cards/invoice.html index 8b6074bc..86e295bc 100644 --- a/pages/_includes/cards/invoice.html +++ b/pages/_includes/cards/invoice.html @@ -46,7 +46,7 @@ 1 -

Logo Creation

+

Logo Creation

Logo and business cards design
@@ -58,7 +58,7 @@ 2 -

Online Store Design & Development

+

Online Store Design & Development

Design/Development for all popular modern browsers
@@ -70,7 +70,7 @@ 3 -

App Design

+

App Design

Promotional mobile application
@@ -80,15 +80,15 @@ $3.200,00 - Subtotal + Subtotal $25.000,00 - Vat Rate + Vat Rate 20% - Vat Due + Vat Due $5.000,00 diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html index 687d129d..87de7e28 100644 --- a/pages/_layouts/base.html +++ b/pages/_layouts/base.html @@ -31,7 +31,9 @@ - + +{% assign dark-theme = page.dark-theme | default: site.dark-theme %} + {{ content }} diff --git a/scss/_dark.scss b/scss/_dark.scss index f4140c0f..c761c0c0 100644 --- a/scss/_dark.scss +++ b/scss/_dark.scss @@ -1,30 +1,37 @@ // stylelint-disable declaration-no-important -@mixin dark-mode { +$dark-body-bg: #222935; +$dark-body-color: #afbdd1; +$dark-border-color: rgba($border-color, .01); +@mixin dark-mode { &, .modal-content, - .dropdown-menu { - color: #afbdd1; - background: $dark; - } - - .dropdown-menu-arrow::after { - border-bottom-color: $dark; + .dropdown-menu, + .example-bg { + color: $dark-body-color; + background: $dark-body-bg; } .card, - .header, .sidebar, - .sidenav, - .topnav, - .navbar, - .form-control, - .form-select, - .form-switch .form-check-input, - .selectgroup-button { + .topbar { color: inherit; - background: rgba(0, 0, 0, .1); + background: rgba($white, .02); + border-color: $dark-border-color; + } + + .progress, + .form-control-light { + background: $dark-border-color; + } + + .example, + .card-footer, + .card-header, + .table th, .markdown table th, .table td, .markdown table td, + .dropdown-menu { + border-color: $dark-border-color; } .text-body { @@ -32,16 +39,22 @@ } .avatar-list-stacked .avatar { - box-shadow: 0 0 0 2px #2b3648; + box-shadow: 0 0 0 2px #222226; } .navbar-brand-logo { filter: brightness(0) invert(1); } + + .form-fieldset { + border-color: transparent; + } } -body.theme-dark { - @include dark-mode; +@media not print { + body.theme-dark { + @include dark-mode; + } } @media (prefers-color-scheme: dark) { diff --git a/scss/_variables.scss b/scss/_variables.scss index 4e81091e..197e01a1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -217,7 +217,7 @@ $btn-font-weight: $font-weight-bold !default; $btn-border-radius: 3px !default; //cards -$card-border-color: $border-color !default; +$card-border-color: $border-color-alpha !default; $card-border-radius: $border-radius !default; $card-cap-bg: $min-black !default; @@ -250,8 +250,7 @@ $loader-size: 2.5rem !default; //navbar $navbar-bg: $white !default; $navbar-height: 3.5rem !default; -$navbar-border-color: $border-color !default; -$navbar-border-color: $border-color !default; +$navbar-border-color: $border-color-alpha !default; //nav $nav-link-padding-y: 1rem !default; diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index a318a411..080c0f34 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -18,5 +18,5 @@ font-size: $h2-font-size; font-weight: 400; line-height: 1; - color: $body-color; + color: inherit; } diff --git a/scss/mixins/_functions.scss b/scss/mixins/_functions.scss index 0269884a..342f9e7e 100644 --- a/scss/mixins/_functions.scss +++ b/scss/mixins/_functions.scss @@ -1,7 +1,3 @@ -@function px2rem($px) { - @return ($px / 16px) * 1rem; -} - @function alpha-attribute($color, $background) { $percent: alpha($color) * 100%; $opaque: opacify($color, 1); @@ -10,14 +6,9 @@ } @function theme-color-lighter($color) { - @return alpha-attribute(rgba($color, .2), #fff); + @return rgba($color, .2); } -@function theme-color-lightest($color) { - @return mix($color, #fff, 10%); -} - - @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss index 666791ab..fe99f648 100644 --- a/scss/ui/_forms.scss +++ b/scss/ui/_forms.scss @@ -37,7 +37,7 @@ textarea { .form-fieldset { padding: 1rem; margin-bottom: 1rem; - background: $gray-100; + background: $min-black; border: 1px solid $border-color; border-radius: $border-radius; } @@ -58,7 +58,7 @@ Form help display: inline-block; width: 1rem; height: 1rem; - font-size: px2rem(12px); + font-size: $h5-font-size; line-height: 1rem; color: $text-muted; text-align: center; diff --git a/scss/ui/_highlight.scss b/scss/ui/_highlight.scss index b9ff09e1..40176583 100644 --- a/scss/ui/_highlight.scss +++ b/scss/ui/_highlight.scss @@ -2,7 +2,7 @@ max-height: 40rem; margin: 1rem 0 2rem; overflow: auto; - font-size: px2rem(15px); + font-size: $font-size-base; background: #fcfcfc; border: 1px solid $border-color; border-radius: 3px; diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index eba4cb39..87116428 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -18,11 +18,11 @@ } .icon-md { - font-size: px2rem(24px); + font-size: 1.5rem; } .icon-lg { - font-size: px2rem(32px); + font-size: 2rem; } diff --git a/scss/ui/_pagination.scss b/scss/ui/_pagination.scss index 3d71f2fc..7d7a1379 100644 --- a/scss/ui/_pagination.scss +++ b/scss/ui/_pagination.scss @@ -3,7 +3,7 @@ } .page-link { - min-width: px2rem(26px); + min-width: 1.5rem; border-radius: $border-radius; &:hover { diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index d78b4013..cb121309 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -27,6 +27,7 @@ h6, } strong, +.strong, b { font-weight: $font-weight-bold; } diff --git a/scss/ui/forms/_form-imagecheck.scss b/scss/ui/forms/_form-imagecheck.scss index 5e190ab5..5eef76b9 100644 --- a/scss/ui/forms/_form-imagecheck.scss +++ b/scss/ui/forms/_form-imagecheck.scss @@ -18,7 +18,7 @@ Image check display: flex; margin: 0; user-select: none; - border: 1px solid $border-color; + border: 1px solid $border-color-alpha; border-radius: 3px; .imagecheck-input:focus ~ & { @@ -27,7 +27,7 @@ Image check } .imagecheck-input:checked ~ & { - border-color: $border-color; + border-color: $border-color-alpha; } &::before { diff --git a/scss/vendor/_sparkline.scss b/scss/vendor/_sparkline.scss index 54b97a99..e51c7665 100644 --- a/scss/vendor/_sparkline.scss +++ b/scss/vendor/_sparkline.scss @@ -22,7 +22,7 @@ display: flex; align-items: center; justify-content: center; - font-size: px2rem(11px); + font-size: $h6-font-size; .icon { width: 1rem; -- GitLab