shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add theme helpers

This commit is contained in:
Shadowfacts 2020-07-08 18:00:54 -04:00
parent ea35c3b677
commit 2a0f1ab773
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
5 changed files with 185 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/css/auto.scss
View File

@ -2,4 +2,4 @@
@media (prefers-color-scheme: dark) {
<%- include("dark.scss"); %>
}
}

65
site/css/dark.scss
View File

@ -1,23 +1,48 @@
:root {
--accent-color: #f9c72f;
--content-background-color: #111;
--shadow-color: #151515;
--ui-background-color: #111;
--ui-text-color: white;
--secondary-ui-text-color: #999;
--content-text-color: #ddd;
--accent-color: var(--dark-accent-color);
--content-background-color: var(--dark-content-background-color);
--shadow-color: var(--dark-shadow-color);
--ui-background-color: var(--dark-ui-background-color);
--ui-text-color: var(--dark-ui-text-color);
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
--atom-mono-2: var(--dark-atom-mono-2);
--atom-mono-3: var(--dark-atom-mono-3);
--atom-hue-1: var(--dark-atom-hue-1);
--atom-hue-2: var(--dark-atom-hue-2);
--atom-hue-3: var(--dark-atom-hue-3);
--atom-hue-4: var(--dark-atom-hue-4);
--atom-hue-5: var(--dark-atom-hue-5);
--atom-hue-5-2: var(--dark-atom-hue-5-2);
--atom-hue-6: var(--dark-atom-hue-6);
--atom-hue-6-2: var(--dark-atom-hue-6-2);
}
.theme-inverted {
--accent-color: var(--light-accent-color);
--content-background-color: var(--light-content-background-color);
--shadow-color: var(--light-shadow-color);
--ui-background-color: var(--light-ui-background-color);
--ui-text-color: var(--light-ui-text-color);
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
// Syntax highlighting
--atom-base: #282c34;
--atom-mono-1: #abb2bf;
--atom-mono-2: #818896;
--atom-mono-3: #5c6370;
--atom-hue-1: #56b6c2;
--atom-hue-2: #61aeee;
--atom-hue-3: #c678dd;
--atom-hue-4: #98c379;
--atom-hue-5: #e06c75;
--atom-hue-5-2: #be5046;
--atom-hue-6: #d19a66;
--atom-hue-6-2: #e6c07b;
}
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
--atom-mono-2: var(--light-atom-mono-2);
--atom-mono-3: var(--light-atom-mono-3);
--atom-hue-1: var(--light-atom-hue-1);
--atom-hue-2: var(--light-atom-hue-2);
--atom-hue-3: var(--light-atom-hue-3);
--atom-hue-4: var(--light-atom-hue-4);
--atom-hue-5: var(--light-atom-hue-5);
--atom-hue-5-2: var(--light-atom-hue-5-2);
--atom-hue-6: var(--light-atom-hue-6);
--atom-hue-6-2: var(--light-atom-hue-6-2);
}

64
site/css/light.scss
View File

@ -1,23 +1,47 @@
:root {
--accent-color: #0638d0;
--content-background-color: white;
--shadow-color: #f7f7f7;
--ui-background-color: white;
--ui-text-color: black;
--secondary-ui-text-color: #666;
--content-text-color: #222;
--accent-color: var(--light-accent-color);
--content-background-color: var(--light-content-background-color);
--shadow-color: var(--light-shadow-color);
--ui-background-color: var(--light-ui-background-color);
--ui-text-color: var(--light-ui-text-color);
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
// Syntax highlighting
--atom-base: #fafafa;
--atom-mono-1: #383a42;
--atom-mono-2: #686b77;
--atom-mono-3: #a0a1a7;
--atom-hue-1: #0184bb;
--atom-hue-2: #4078f2;
--atom-hue-3: #a626a4;
--atom-hue-4: #50a14f;
--atom-hue-5: #e45649;
--atom-hue-5-2: #c91243;
--atom-hue-6: #986801;
--atom-hue-6-2: #c18401;
}
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
--atom-mono-2: var(--light-atom-mono-2);
--atom-mono-3: var(--light-atom-mono-3);
--atom-hue-1: var(--light-atom-hue-1);
--atom-hue-2: var(--light-atom-hue-2);
--atom-hue-3: var(--light-atom-hue-3);
--atom-hue-4: var(--light-atom-hue-4);
--atom-hue-5: var(--light-atom-hue-5);
--atom-hue-5-2: var(--light-atom-hue-5-2);
--atom-hue-6: var(--light-atom-hue-6);
--atom-hue-6-2: var(--light-atom-hue-6-2);
}
.theme-inverted {
--accent-color: var(--dark-accent-color);
--content-background-color: var(--dark-content-background-color);
--shadow-color: var(--dark-shadow-color);
--ui-background-color: var(--dark-ui-background-color);
--ui-text-color: var(--dark-ui-text-color);
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
--atom-mono-2: var(--dark-atom-mono-2);
--atom-mono-3: var(--dark-atom-mono-3);
--atom-hue-1: var(--dark-atom-hue-1);
--atom-hue-2: var(--dark-atom-hue-2);
--atom-hue-3: var(--dark-atom-hue-3);
--atom-hue-4: var(--dark-atom-hue-4);
--atom-hue-5: var(--dark-atom-hue-5);
--atom-hue-5-2: var(--dark-atom-hue-5-2);
--atom-hue-6: var(--dark-atom-hue-6);
--atom-hue-6-2: var(--dark-atom-hue-6-2);
}

94
site/css/main.scss
View File

@ -1,6 +1,95 @@
<%- include("normalize.css") %>
<%- include("syntax-highlighting.css") %>
:root {
--light-accent-color: #0638d0;
--dark-accent-color: #f9c72f;
--light-content-background-color: white;
--dark-content-background-color: #111;
--light-shadow-color: #f7f7f7;
--dark-shadow-color: #151515;
--light-ui-background-color: white;
--dark-ui-background-color: #111;
--light-ui-text-color: black;
--dark-ui-text-color: white;
--light-secondary-ui-text-color: #666;
--dark-secondary-ui-text-color: #999;
--light-content-text-color: #222;
--dark-content-text-color: #ddd;
// Syntax highlighting
--light-atom-base: #fafafa;
--dark-atom-base: #282c34;
--light-atom-mono-1: #383a42;
--dark-atom-mono-1: #abb2bf;
--light-atom-mono-2: #686b77;
--dark-atom-mono-2: #818896;
--light-atom-mono-3: #a0a1a7;
--dark-atom-mono-3: #5c6370;
--light-atom-hue-1: #0184bb;
--dark-atom-hue-1: #56b6c2;
--light-atom-hue-2: #4078f2;
--dark-atom-hue-2: #61aeee;
--light-atom-hue-3: #a626a4;
--dark-atom-hue-3: #c678dd;
--light-atom-hue-4: #50a14f;
--dark-atom-hue-4: #98c379;
--light-atom-hue-5: #e45649;
--dark-atom-hue-5: #e06c75;
--light-atom-hue-5-2: #c91243;
--dark-atom-hue-5-2: #be5046;
--light-atom-hue-6: #986801;
--dark-atom-hue-6: #d19a66;
--light-atom-hue-6-2: #c18401;
--dark-atom-hue-6-2: #e6c07b;
}
.theme-light {
--accent-color: var(--light-accent-color);
--content-background-color: var(--light-content-background-color);
--shadow-color: var(--light-shadow-color);
--ui-background-color: var(--light-ui-background-color);
--ui-text-color: var(--light-ui-text-color);
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
--atom-mono-2: var(--light-atom-mono-2);
--atom-mono-3: var(--light-atom-mono-3);
--atom-hue-1: var(--light-atom-hue-1);
--atom-hue-2: var(--light-atom-hue-2);
--atom-hue-3: var(--light-atom-hue-3);
--atom-hue-4: var(--light-atom-hue-4);
--atom-hue-5: var(--light-atom-hue-5);
--atom-hue-5-2: var(--light-atom-hue-5-2);
--atom-hue-6: var(--light-atom-hue-6);
--atom-hue-6-2: var(--light-atom-hue-6-2);
}
.theme-dark {
--accent-color: var(--dark-accent-color);
--content-background-color: var(--dark-content-background-color);
--shadow-color: var(--dark-shadow-color);
--ui-background-color: var(--dark-ui-background-color);
--ui-text-color: var(--dark-ui-text-color);
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
--atom-mono-2: var(--dark-atom-mono-2);
--atom-mono-3: var(--dark-atom-mono-3);
--atom-hue-1: var(--dark-atom-hue-1);
--atom-hue-2: var(--dark-atom-hue-2);
--atom-hue-3: var(--dark-atom-hue-3);
--atom-hue-4: var(--dark-atom-hue-4);
--atom-hue-5: var(--dark-atom-hue-5);
--atom-hue-5-2: var(--dark-atom-hue-5-2);
--atom-hue-6: var(--dark-atom-hue-6);
--atom-hue-6-2: var(--dark-atom-hue-6-2);
}
// Fonts
$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
$serif: Charter, Georgia, serif;
@ -154,6 +243,11 @@ article {
color: var(--secondary-ui-text-color);
}
}
.theme-dark, .theme-light, .theme-inverted {
color: var(--content-text-color);
background-color: var(--content-background-color);
}
}
#comments-container {

2
site/layouts/default.html.ejs
View File

@ -115,4 +115,4 @@
</footer>
</body>
</html>
</html>