aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/_defaults.scss58
-rw-r--r--assets/_main.scss20
-rw-r--r--assets/_markdown.scss21
-rw-r--r--assets/_shortcodes.scss16
-rw-r--r--assets/book.scss1
-rw-r--r--assets/plugins/_dark.scss10
-rw-r--r--assets/plugins/_scrollbars.scss6
-rw-r--r--assets/themes/_auto.scss9
-rw-r--r--assets/themes/_dark.scss3
-rw-r--r--assets/themes/_light.scss3
10 files changed, 85 insertions, 62 deletions
diff --git a/assets/_defaults.scss b/assets/_defaults.scss
index 94e7357..4c86697 100644
--- a/assets/_defaults.scss
+++ b/assets/_defaults.scss
@@ -11,24 +11,6 @@ $font-size-16: 1rem !default;
$border-radius: $padding-4 !default;
-// Grayscale
-$white: #ffffff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$color-link: #05b !default;
-$color-visited-link: #8440f1 !default;
-
-$body-background: white !default;
-$body-font-color: $black !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
@@ -40,11 +22,45 @@ $toc-width: 16rem !default;
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
-// Hint colors
$hint-colors: (
info: #6bf,
warning: #fd6,
- danger: #f66
+ danger: #f66,
) !default;
-$icon-filter: none !default;
+// Themes
+@mixin theme-light {
+ --gray-100: #f8f9fa;
+ --gray-200: #e9ecef;
+ --gray-500: #adb5bd;
+
+ --color-link: #0055bb;
+ --color-visited-link: #8440f1;
+
+ --body-background: white;
+ --body-font-color: black;
+
+ --icon-filter: none;
+
+ --hint-color-info: #6bf;
+ --hint-color-warning: #fd6;
+ --hint-color-danger: #f66;
+}
+
+@mixin theme-dark {
+ --gray-100: rgba(255, 255, 255, 0.1);
+ --gray-200: rgba(255, 255, 255, 0.2);
+ --gray-500: rgba(255, 255, 255, 0.5);
+
+ --color-link: #84b2ff;
+ --color-visited-link: #b88dff;
+
+ --body-background: #343a40;
+ --body-font-color: #e9ecef;
+
+ --icon-filter: brightness(0) invert(1);
+
+ --hint-color-info: #6bf;
+ --hint-color-warning: #fd6;
+ --hint-color-danger: #f66;
+}
diff --git a/assets/_main.scss b/assets/_main.scss
index b8a0e5d..5cf81d0 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -6,8 +6,8 @@ html {
body {
min-width: $body-min-width;
- color: $body-font-color;
- background: $body-background;
+ color: var(--body-font-color);
+ background: var(--body-background);
letter-spacing: 0.33px;
font-weight: $body-font-weight;
@@ -31,7 +31,7 @@ h5 {
a {
text-decoration: none;
- color: $color-link;
+ color: var(--color-link);
}
img {
@@ -81,7 +81,7 @@ ul.pagination {
}
.book-icon {
- filter: $icon-filter;
+ filter: var(--icon-filter);
}
.book-brand {
@@ -102,7 +102,7 @@ ul.pagination {
nav {
width: $menu-width;
padding: $padding-16;
- background: $body-background;
+ background: var(--body-background);
@include fixed;
}
@@ -113,7 +113,7 @@ ul.pagination {
}
a.active {
- color: $color-link;
+ color: var(--color-link);
}
a.collapsed {
@@ -174,8 +174,8 @@ ul.pagination {
border: 0;
border-radius: $border-radius;
- background: $gray-100;
- color: $body-font-color;
+ background: var(--gray-100);
+ color: var(--body-font-color);
&:required + .book-search-spinner {
display: block;
@@ -192,7 +192,7 @@ ul.pagination {
height: $padding-16;
border: $padding-1 solid transparent;
- border-top-color: $body-font-color;
+ border-top-color: var(--body-font-color);
border-radius: 50%;
@include spin(1s);
@@ -271,7 +271,7 @@ ul.pagination {
left: 0;
padding: $padding-8 0;
- background: $body-background;
+ background: var(--body-background);
box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
li img {
diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 009473d..e71de43 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -21,12 +21,13 @@
a.anchor {
opacity: 0;
- font-size: .75em;
+ font-size: 0.75em;
vertical-align: middle;
text-decoration: none;
}
- &:hover a.anchor, a.anchor:focus {
+ &:hover a.anchor,
+ a.anchor:focus {
opacity: initial;
}
}
@@ -58,7 +59,7 @@
text-decoration: underline;
}
&:visited {
- color: $color-visited-link;
+ color: var(--color-visited-link);
}
}
@@ -68,14 +69,14 @@
code {
padding: 0 $padding-4;
- background: $gray-200;
+ background: var(--gray-200);
border-radius: $border-radius;
font-size: 0.875em;
}
pre {
padding: $padding-16;
- background: $gray-100;
+ background: var(--gray-100);
border-radius: $border-radius;
overflow-x: auto;
@@ -89,7 +90,7 @@
margin: $padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
- border-inline-start: $padding-4 solid $gray-200;
+ border-inline-start: $padding-4 solid var(--gray-200);
border-radius: $border-radius;
:first-child {
@@ -111,18 +112,18 @@
tr th,
tr td {
padding: $padding-8 $padding-16;
- border: $padding-1 solid $gray-200;
+ border: $padding-1 solid var(--gray-200);
}
tr:nth-child(2n) {
- background: $gray-100;
+ background: var(--gray-100);
}
}
hr {
height: $padding-1;
border: none;
- background: $gray-200;
+ background: var(--gray-200);
}
ul,
@@ -156,7 +157,7 @@
details {
padding: $padding-16;
- border: $padding-1 solid $gray-200;
+ border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
summary {
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 7802078..714de2a 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -4,13 +4,13 @@
margin-top: $padding-16;
margin-bottom: $padding-16;
- border: $padding-1 solid $gray-200;
+ border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
overflow: hidden;
.book-expand-head {
- background: $gray-100;
+ background: var(--gray-100);
padding: $padding-8 $padding-16;
cursor: pointer;
}
@@ -30,7 +30,7 @@
margin-top: $padding-16;
margin-bottom: $padding-16;
- border: $padding-1 solid $gray-200;
+ border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
overflow: hidden;
@@ -48,19 +48,19 @@
.book-tabs-content {
order: 999; //Move content blocks to the end
width: 100%;
- border-top: $padding-1 solid $gray-100;
+ border-top: $padding-1 solid var(--gray-100);
padding: $padding-16;
display: none;
}
input[type="radio"]:checked + label {
- border-bottom: $padding-1 solid $color-link;
+ border-bottom: $padding-1 solid var(--color-link);
}
input[type="radio"]:checked + label + .book-tabs-content {
display: block;
}
input[type="radio"]:focus + label {
- @include outline
+ @include outline;
}
}
@@ -80,10 +80,10 @@
a.book-btn {
display: inline-block;
font-size: $font-size-14;
- color: $color-link;
+ color: var(--color-link);
line-height: $padding-16 * 2;
padding: 0 $padding-16;
- border: $padding-1 solid $color-link;
+ border: $padding-1 solid var(--color-link);
border-radius: $border-radius;
cursor: pointer;
diff --git a/assets/book.scss b/assets/book.scss
index 68f6318..f3b833b 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -1,5 +1,6 @@
@import "defaults";
@import "variables";
+@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
@import "normalize";
@import "utils";
diff --git a/assets/plugins/_dark.scss b/assets/plugins/_dark.scss
deleted file mode 100644
index 5796a89..0000000
--- a/assets/plugins/_dark.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$gray-100: rgba(255, 255, 255, 0.1);
-$gray-200: rgba(255, 255, 255, 0.2);
-
-$body-background: #343a40;
-$body-font-color: #e9ecef;
-
-$color-link: #84b2ff;
-$color-visited-link: #b88dff;
-
-$icon-filter: brightness(0) invert(1);
diff --git a/assets/plugins/_scrollbars.scss b/assets/plugins/_scrollbars.scss
index fb46543..0062582 100644
--- a/assets/plugins/_scrollbars.scss
+++ b/assets/plugins/_scrollbars.scss
@@ -12,15 +12,15 @@
}
:hover::-webkit-scrollbar-thumb {
- background: $gray-500;
+ background: var(--gray-500);
}
// MS
body {
- -ms-overflow-style: -ms-autohiding-scrollbar
+ -ms-overflow-style: -ms-autohiding-scrollbar;
}
// Future
.book-menu nav {
- scrollbar-color: transparent $gray-500;
+ scrollbar-color: transparent var(--gray-500);
}
diff --git a/assets/themes/_auto.scss b/assets/themes/_auto.scss
new file mode 100644
index 0000000..31d7f9a
--- /dev/null
+++ b/assets/themes/_auto.scss
@@ -0,0 +1,9 @@
+:root {
+ @include theme-light;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ @include theme-dark;
+ }
+}
diff --git a/assets/themes/_dark.scss b/assets/themes/_dark.scss
new file mode 100644
index 0000000..e00e38e
--- /dev/null
+++ b/assets/themes/_dark.scss
@@ -0,0 +1,3 @@
+:root {
+ @include theme-dark;
+}
diff --git a/assets/themes/_light.scss b/assets/themes/_light.scss
new file mode 100644
index 0000000..8c0e346
--- /dev/null
+++ b/assets/themes/_light.scss
@@ -0,0 +1,3 @@
+:root {
+ @include theme-light;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 05:28:03 +0000