dark theme, remove unused functions

6d786c27 · codecalm · 7d66c8ab · 6d786c27 · 6d786c27 · 6d786c27
14 changed file
--- 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

--- a/pages/_includes/cards/invoice.html
+++ b/pages/_includes/cards/invoice.html
@@ -46,7 +46,7 @@
 				<tr>
 					<td class="text-center">1</td>
 					<td>
-						<p class="font-w600 mb-1">Logo Creation</p>
+						<p class="strong mb-1">Logo Creation</p>
 						<div class="text-muted">Logo and business cards design</div>
 					</td>
 					<td class="text-center">
@@ -58,7 +58,7 @@
 				<tr>
 					<td class="text-center">2</td>
 					<td>
-						<p class="font-w600 mb-1">Online Store Design &amp; Development</p>
+						<p class="strong mb-1">Online Store Design &amp; Development</p>
 						<div class="text-muted">Design/Development for all popular modern browsers</div>
 					</td>
 					<td class="text-center">
@@ -70,7 +70,7 @@
 				<tr>
 					<td class="text-center">3</td>
 					<td>
-						<p class="font-w600 mb-1">App Design</p>
+						<p class="strong mb-1">App Design</p>
 						<div class="text-muted">Promotional mobile application</div>
 					</td>
 					<td class="text-center">
@@ -80,15 +80,15 @@
 					<td class="text-right">$3.200,00</td>
 				</tr>
 				<tr>
-					<td colspan="4" class="font-w600 text-right">Subtotal</td>
+					<td colspan="4" class="strong text-right">Subtotal</td>
 					<td class="text-right">$25.000,00</td>
 				</tr>
 				<tr>
-					<td colspan="4" class="font-w600 text-right">Vat Rate</td>
+					<td colspan="4" class="strong text-right">Vat Rate</td>
 					<td class="text-right">20%</td>
 				</tr>
 				<tr>
-					<td colspan="4" class="font-w600 text-right">Vat Due</td>
+					<td colspan="4" class="strong text-right">Vat Due</td>
 					<td class="text-right">$5.000,00</td>
 				</tr>
 				<tr>

--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -31,7 +31,9 @@

   <style>body { display: none; }</style>
 </head>
-<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+
+{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
+<body class="antialiased{% if dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

 	{{ content }}


--- a/scss/_dark.scss
+++ b/scss/_dark.scss
 // 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) {

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

--- 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;
 }
--- a/scss/mixins/_functions.scss
+++ b/scss/mixins/_functions.scss
-@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);


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

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

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



--- 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 {

--- a/scss/ui/_typo.scss
+++ b/scss/ui/_typo.scss
@@ -27,6 +27,7 @@ h6,
 }

 strong,
+.strong,
 b {
  font-weight: $font-weight-bold;
 }

--- 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 {

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