diff --git a/_config.yml b/_config.yml
index cc913a1d135e702f31fc0c207c6875ca31f5fd3e..d49ec3a115aad42d55bb048baf14911bc006df71 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 8b6074bca89ab9ef3a87e4654dd62b40c2886d74..86e295bcf088f10d28f8cd6c85712302468704a7 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 687d129d09bf7c28f8df96d639e602b04255872d..87de7e28655b2354d370e73b6b8d44878a8fa915 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 f4140c0fc8706614b30c690eaf3dcdb303046cb2..c761c0c04c8c617044d8871acc8ffa3ff95eec01 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 4e81091ed588908a63e0fc1c6f5f0821c47f7d60..197e01a1c5283bf98dc91cbc4adbfa0918ca6aaf 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 a318a4111bb2575a12bdaf3c7f61e4f2b011acc8..080c0f347f0dbc8498be1d44ac9355beb34beb88 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 0269884a563aa04aa91ccc1a40438e877a744d24..342f9e7e49c65837ccf79dd6807e27cbce8ff35f 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 666791ab586bd8b23d4ea8984d74c5ff831727b9..fe99f648e4e8d4c5b2ce1caa27928f3d43aa2098 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 b9ff09e1c9f625e3aa6319448bc17443e1ff25b0..401765835242ac8304940c0c17f753121ee87fdb 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 eba4cb39c6b8ce1c8cac84fdea99b8cea4a69285..87116428c4ee3b89204d41a5997f6daaf85491ec 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 3d71f2fc0ca2b08518cdb422c27e5c9b1bb6f115..7d7a1379e31a5211acd3326b1817233144e2b3f0 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 d78b4013596769df09f4ad867a3c211603671e98..cb12130965f19d428f739433a641324f5014c7b7 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 5e190ab5404426b4f86c999d9d606cad6d2a6225..5eef76b9b33a4ebdc15476cc529987077162e748 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 54b97a997e88cdd3fc4e19a752794ce9bfe0e6b4..e51c76658016d689b71185758f1f31aedcd117ad 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;