forked from shadowfacts/shadowfacts.net
Add theme helpers
This commit is contained in:
parent
ea35c3b677
commit
2a0f1ab773
|
@ -1,23 +1,48 @@
|
||||||
:root {
|
:root {
|
||||||
--accent-color: #f9c72f;
|
--accent-color: var(--dark-accent-color);
|
||||||
--content-background-color: #111;
|
--content-background-color: var(--dark-content-background-color);
|
||||||
--shadow-color: #151515;
|
--shadow-color: var(--dark-shadow-color);
|
||||||
--ui-background-color: #111;
|
--ui-background-color: var(--dark-ui-background-color);
|
||||||
--ui-text-color: white;
|
--ui-text-color: var(--dark-ui-text-color);
|
||||||
--secondary-ui-text-color: #999;
|
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
|
||||||
--content-text-color: #ddd;
|
--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
|
// Syntax highlighting
|
||||||
--atom-base: #282c34;
|
--atom-base: var(--light-atom-base);
|
||||||
--atom-mono-1: #abb2bf;
|
--atom-mono-1: var(--light-atom-mono-1);
|
||||||
--atom-mono-2: #818896;
|
--atom-mono-2: var(--light-atom-mono-2);
|
||||||
--atom-mono-3: #5c6370;
|
--atom-mono-3: var(--light-atom-mono-3);
|
||||||
--atom-hue-1: #56b6c2;
|
--atom-hue-1: var(--light-atom-hue-1);
|
||||||
--atom-hue-2: #61aeee;
|
--atom-hue-2: var(--light-atom-hue-2);
|
||||||
--atom-hue-3: #c678dd;
|
--atom-hue-3: var(--light-atom-hue-3);
|
||||||
--atom-hue-4: #98c379;
|
--atom-hue-4: var(--light-atom-hue-4);
|
||||||
--atom-hue-5: #e06c75;
|
--atom-hue-5: var(--light-atom-hue-5);
|
||||||
--atom-hue-5-2: #be5046;
|
--atom-hue-5-2: var(--light-atom-hue-5-2);
|
||||||
--atom-hue-6: #d19a66;
|
--atom-hue-6: var(--light-atom-hue-6);
|
||||||
--atom-hue-6-2: #e6c07b;
|
--atom-hue-6-2: var(--light-atom-hue-6-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,47 @@
|
||||||
:root {
|
:root {
|
||||||
--accent-color: #0638d0;
|
--accent-color: var(--light-accent-color);
|
||||||
--content-background-color: white;
|
--content-background-color: var(--light-content-background-color);
|
||||||
--shadow-color: #f7f7f7;
|
--shadow-color: var(--light-shadow-color);
|
||||||
--ui-background-color: white;
|
--ui-background-color: var(--light-ui-background-color);
|
||||||
--ui-text-color: black;
|
--ui-text-color: var(--light-ui-text-color);
|
||||||
--secondary-ui-text-color: #666;
|
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
|
||||||
--content-text-color: #222;
|
--content-text-color: var(--light-content-text-color);
|
||||||
|
|
||||||
// Syntax highlighting
|
// Syntax highlighting
|
||||||
--atom-base: #fafafa;
|
--atom-base: var(--light-atom-base);
|
||||||
--atom-mono-1: #383a42;
|
--atom-mono-1: var(--light-atom-mono-1);
|
||||||
--atom-mono-2: #686b77;
|
--atom-mono-2: var(--light-atom-mono-2);
|
||||||
--atom-mono-3: #a0a1a7;
|
--atom-mono-3: var(--light-atom-mono-3);
|
||||||
--atom-hue-1: #0184bb;
|
--atom-hue-1: var(--light-atom-hue-1);
|
||||||
--atom-hue-2: #4078f2;
|
--atom-hue-2: var(--light-atom-hue-2);
|
||||||
--atom-hue-3: #a626a4;
|
--atom-hue-3: var(--light-atom-hue-3);
|
||||||
--atom-hue-4: #50a14f;
|
--atom-hue-4: var(--light-atom-hue-4);
|
||||||
--atom-hue-5: #e45649;
|
--atom-hue-5: var(--light-atom-hue-5);
|
||||||
--atom-hue-5-2: #c91243;
|
--atom-hue-5-2: var(--light-atom-hue-5-2);
|
||||||
--atom-hue-6: #986801;
|
--atom-hue-6: var(--light-atom-hue-6);
|
||||||
--atom-hue-6-2: #c18401;
|
--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);
|
||||||
}
|
}
|
|
@ -1,6 +1,95 @@
|
||||||
<%- include("normalize.css") %>
|
<%- include("normalize.css") %>
|
||||||
<%- include("syntax-highlighting.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
|
// Fonts
|
||||||
$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
|
$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
|
||||||
$serif: Charter, Georgia, serif;
|
$serif: Charter, Georgia, serif;
|
||||||
|
@ -154,6 +243,11 @@ article {
|
||||||
color: var(--secondary-ui-text-color);
|
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 {
|
#comments-container {
|
||||||
|
|
Loading…
Reference in New Issue