summaryrefslogtreecommitdiff
path: root/assets/theme/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/theme/main.scss')
-rw-r--r--assets/theme/main.scss48
1 files changed, 31 insertions, 17 deletions
diff --git a/assets/theme/main.scss b/assets/theme/main.scss
index 9cc1d1b..fd244ce 100644
--- a/assets/theme/main.scss
+++ b/assets/theme/main.scss
@@ -1,18 +1,32 @@
// Variables
-$bodyBackgroundColor: #fefefe;
-$bodyTextColor: #454545;
-$linkColor: #07a;
-$blockBackgroundColor: #f6f6f6;
-$blockBorderColor: #d7d7d7;
$mainWidth: 900px;
+// Colors
+@media (prefers-color-scheme: light) {
+ :root {
+ --bodyBackgroundColor: #d7d5d1;
+ --bodyForegroundColor: #2a2e2f;
+ --blockBackgroundColor: #c2beb9;
+ --linkForegroundColor: #07a;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --BodyBackgroundColor: #131516;
+ --BodyForegroundColor: #bcb7ae;
+ --BlockBackgroundColor: #1c1e1f;
+ --linkForegroundColor: #07a;
+ }
+}
+
// Actual CSS
html {
- background-color: $bodyBackgroundColor;
+ background-color: var(--bodyBackgroundColor);
}
body {
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
font-size: 16px;
line-height: 1.4;
text-align: justify;
@@ -64,8 +78,8 @@ article {
}
section.admonition {
- background-color: #f6f6f6;
- border: 1px solid #d7d7d7;
+ background-color: var(--blockBackgroundColor);
+ border: 1px solid var(--bodyForegroundColor);
margin: .5rem auto 1.74rem auto;
width: 85%;
max-width: $mainWidth * .9;
@@ -122,7 +136,7 @@ section.admonition {
// Navigation bar
nav {
padding-bottom: 8px;
- border-bottom: double $bodyTextColor;
+ border-bottom: double var(--bodyForegroundColor);
text-align: center;
font-family: Sans;
@@ -130,7 +144,7 @@ nav {
margin: 0 0.5em;
font-size: 24px;
text-decoration: none;
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
}
.brand-name {
@@ -138,20 +152,20 @@ nav {
display: block;
font-weight: bold;
font-size: 32px;
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
margin-bottom: 8px;
}
}
// Generic links
a, a:visited {
- color: $linkColor;
+ color: var(--linkForegroundColor);
}
// Syntax highlighting
div.highlight {
- border: 2px solid $blockBorderColor;
- background-color: $blockBackgroundColor;
+ border: 2px solid var(--bodyForegroundColor);
+ background-color: var(--blockBackgroundColor);
width: 90%;
margin: 0 auto;
overflow-x: auto;
@@ -162,7 +176,7 @@ div.highlight {
}
.code-link {
- border-top: 1px dotted $blockBorderColor;
+ border-top: 1px dotted var(--bodyForegroundColor);
padding: 3px 8px;
text-align: right;
}
@@ -186,7 +200,7 @@ pre code {
margin: .5rem auto;
border-left: double black;
padding: 0.5em;
- background-color: $blockBackgroundColor;
+ background-color: var(--blockBackgroundColor);
blockquote {
font-style: italic;