Skip to content

Commit dd6ed60

Browse files
qwerdenkerXDqwerdenkerXD
committed
added system-preferred dark/light mode, prettified code blocks
1 parent 351f29f commit dd6ed60

17 files changed

Lines changed: 312 additions & 269 deletions

‎_config.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ description: Here you will find a tutorial for all Zendro projects and how to do
33
theme: just-the-docs
44

55
url: https://zendro-dev.github.io/
6-
color_scheme: dark
76

87
aux_links:
98
Template Repository: https://github.com/Zendro-dev/Zendro-dev.github.io

‎_includes/acl.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ To switch the access rights check on, uncomment the command line switch `acl` (`
66

77
You can also whitelist certain roles to own all user permissions, using the `WHITELIST_ROLES` environment variable. For example, to whitelist reading actions, add this to `./graphql-server/.env`:
88

9-
```
9+
```properties
1010
WHITELIST_ROLES="reader"
1111
```
1212

‎_sass/code_highlighting_dark.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
$black: hsl(0, 0%, 0%);
2+
$blue: hsl(210, 50%, 60%);
3+
$blue-vibrant: hsl(210, 60%, 60%);
4+
$blue2: hsla(210, 13%, 40%, 0.7);
5+
$blue3: hsl(210, 15%, 22%);
6+
$blue4: hsl(210, 13%, 45%);
7+
$blue5: hsl(180, 36%, 54%);
8+
$blue6: hsl(221, 12%, 69%);
9+
$green: hsl(114, 31%, 68%);
10+
$grey: hsl(0, 0%, 20%);
11+
$orange: hsl(32, 93%, 66%);
12+
$orange2: hsl(32, 85%, 55%);
13+
$orange3: hsl(40, 94%, 68%);
14+
$pink: hsl(300, 30%, 68%);
15+
$red: hsl(357, 79%, 65%);
16+
$red2: hsl(13, 93%, 66%);
17+
$white: hsl(0, 0%, 100%);
18+
$white2: hsl(0, 0%, 97%);
19+
$white3: hsl(219, 28%, 88%);
20+
21+
// "globals" section:
22+
$fg: $white3; // foreground for code
23+
$bg: $blue3; // background
24+
$line-highlight: $blue2; // line_highlight
25+
26+
@import "./css/code_highlighting";

‎_sass/code_highlighting_light.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Lightness values lowered vs. the dark theme so text colors keep
2+
// enough contrast against the near-white $bg below (badge-style
3+
// colors that are always paired with light text, like $orange2, are
4+
// left at their original lightness).
5+
$black: hsl(0, 0%, 0%);
6+
$blue: hsl(210, 55%, 38%);
7+
$blue-vibrant: hsl(210, 65%, 38%);
8+
$blue2: hsla(210, 13%, 40%, 0.7);
9+
$blue3: hsl(210, 15%, 22%);
10+
$blue4: hsl(210, 13%, 45%);
11+
$blue5: hsl(180, 45%, 32%);
12+
$blue6: hsl(221, 15%, 40%);
13+
$green: hsl(114, 40%, 32%);
14+
$grey: hsl(0, 0%, 20%);
15+
$orange: hsl(32, 90%, 38%);
16+
$orange2: hsl(32, 85%, 55%);
17+
$orange3: hsl(40, 94%, 68%);
18+
$pink: hsl(300, 45%, 38%);
19+
$red: hsl(357, 70%, 42%);
20+
$red2: hsl(13, 85%, 40%);
21+
$white: hsl(0, 0%, 100%);
22+
$white2: hsl(0, 0%, 97%);
23+
$white3: hsl(219, 28%, 88%);
24+
25+
// "globals" section:
26+
$fg: $blue3; // foreground for code
27+
$bg: hsl(210, 11%, 93%); // background
28+
$line-highlight: $blue2; // line_highlight
29+
30+
@import "./css/code_highlighting";

_sass/code_highlighting.scss renamed to _sass/css/code_highlighting.scss

Lines changed: 19 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,26 @@
1-
// Colors sourced from _sass/theme.json (a Sublime Text color scheme).
2-
// "variables" section:
3-
$black: hsl(0, 0%, 0%);
4-
$blue: hsl(210, 50%, 60%);
5-
$blue-vibrant: hsl(210, 60%, 60%);
6-
$blue2: hsla(210, 13%, 40%, 0.7);
7-
$blue3: hsl(210, 15%, 22%);
8-
$blue4: hsl(210, 13%, 45%);
9-
$blue5: hsl(180, 36%, 54%);
10-
$blue6: hsl(221, 12%, 69%);
11-
$green: hsl(114, 31%, 68%);
12-
$grey: hsl(0, 0%, 20%);
13-
$orange: hsl(32, 93%, 66%);
14-
$orange2: hsl(32, 85%, 55%);
15-
$orange3: hsl(40, 94%, 68%);
16-
$pink: hsl(300, 30%, 68%);
17-
$red: hsl(357, 79%, 65%);
18-
$red2: hsl(13, 93%, 66%);
19-
$white: hsl(0, 0%, 100%);
20-
$white2: hsl(0, 0%, 97%);
21-
$white3: hsl(219, 28%, 88%);
22-
23-
// "globals" section:
24-
$fg: $white3; // foreground
25-
$bg: $blue3; // background
26-
$line-highlight: $blue2; // line_highlight
27-
281
.highlighter-rouge { background: $bg; }
292

303
.highlight, pre.highlight, pre {
31-
background: #272822
4+
background: $bg;
5+
color: $fg;
326
}
33-
.language-json, .language-js {
34-
.highlight, pre.highlight, pre {
35-
background: $bg;
36-
}
7+
.language-plaintext {
8+
.highlight, pre.highlight, pre {
9+
background: #272822;
10+
color: hsl(219, 28%, 88%);
11+
}
3712
}
3813

3914
.highlight {
40-
color: $fg;
41-
4215
.hll { background-color: $line-highlight } /* line_highlight */
4316
.err { color: $white2; background-color: $red } /* Error -> "Invalid" */
4417
.c { color: $blue6 } /* Comment -> "Comment" */
45-
.g { color: $fg } /* Generic */
18+
.g { color: inherit } /* Generic */
4619
.k { color: $pink } /* Keyword -> "Keyword" */
47-
.l { color: $fg } /* Literal */
48-
.n { color: $fg } /* Name */
20+
.l { color: inherit } /* Literal */
21+
.n { color: inherit } /* Name */
4922
.o { color: $red2 } /* Operator -> "Operators" */
50-
.x { color: $fg } /* Other */
23+
.x { color: inherit } /* Other */
5124
.p { color: $blue6 } /* Punctuation -> "Punctuation" (separator/terminator) */
5225
.cm { color: $blue6 } /* Comment.Multiline -> "Comment" */
5326
.cp { color: $blue6 } /* Comment.Preproc -> "Comment" */
@@ -60,7 +33,7 @@ $line-highlight: $blue2; // line_highlight
6033
.gi { color: $green; background-color: hsla(180, 45%, 60%, 0.15) } /* Generic.Inserted -> "diff.inserted" */
6134
span.go { color: $blue; background-color: hsl(210, 15%, 16%) } /* Generic.Output -> "message.info"
6235
.gp { color: $blue6 } /* Generic.Prompt */
63-
.gs { color: $fg; font-weight: bold } /* Generic.Strong -> "markup bold" */
36+
.gs { color: inherit; font-weight: bold } /* Generic.Strong -> "markup bold" */
6437
.gu { color: $pink; font-weight: bold } /* Generic.Subheading -> "diff.header" */
6538
.gt { color: $white2; background-color: $orange2 } /* Generic.Traceback -> "Invalid deprecated" */
6639
.kc { color: $red; font-style: italic } /* Keyword.Constant -> "Built-in constant" */
@@ -82,12 +55,12 @@ $line-highlight: $blue2; // line_highlight
8255
.nf { color: $blue5 } /* Name.Function -> "Entity name" (entity.name.function) */
8356
.nl { color: $blue5 } /* Name.Label */
8457
.nn { color: $orange } /* Name.Namespace -> "Entity name" */
85-
.nx { color: $fg } /* Name.Other */
58+
.nx { color: inherit } /* Name.Other */
8659
.py { color: $red } /* Name.Property -> "Member Variable" */
8760
.nt { color: $red } /* Name.Tag -> "Tag name" */
88-
.nv { color: $fg } /* Name.Variable */
61+
.nv { color: inherit } /* Name.Variable */
8962
.ow { color: $red2 } /* Operator.Word -> "Operators" */
90-
.w { color: $fg } /* Text.Whitespace */
63+
.w { color: inherit } /* Text.Whitespace */
9164
.mf { color: $orange } /* Literal.Number.Float -> "Number" */
9265
.mh { color: $orange } /* Literal.Number.Hex -> "Number" */
9366
.mi { color: $orange } /* Literal.Number.Integer -> "Number" */
@@ -104,8 +77,8 @@ $line-highlight: $blue2; // line_highlight
10477
.s1 { color: $green } /* Literal.String.Single -> "String" */
10578
.ss { color: $pink } /* Literal.String.Symbol -> "User-defined constant" */
10679
.bp { color: $red; font-style: italic } /* Name.Builtin.Pseudo -> "Language variable" */
107-
.vc { color: $fg } /* Name.Variable.Class */
108-
.vg { color: $fg } /* Name.Variable.Global */
80+
.vc { color: inherit } /* Name.Variable.Class */
81+
.vg { color: inherit } /* Name.Variable.Global */
10982
.vi { color: $red } /* Name.Variable.Instance -> "Member Variable" */
11083
.il { color: $orange } /* Literal.Number.Integer.Long -> "Number" */
11184
.bash .nv {
@@ -119,8 +92,8 @@ $line-highlight: $blue2; // line_highlight
11992
.kr { color: $pink }
12093
.nf { color: $blue5 }
12194
.nt { color: $red }
122-
.nv { color: $fg }
95+
.nv { color: inherit }
12396
}
12497
}
12598

126-
.language-sh .highlight * { color: $fg }
99+
.language-sh .highlight * { color: inherit }

0 commit comments

Comments
 (0)