Skip to content

Commit 722e6ed

Browse files
rmosolgormosolgo
committed
More dark theme
1 parent 2efcf36 commit 722e6ed

File tree

3 files changed

+140
-88
lines changed

3 files changed

+140
-88
lines changed

‎guides/_layouts/default.html‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,33 @@
1414
</head>
1515
<body>
1616
<script>
17-
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
18-
if (prefersDarkScheme.matches) {
19-
document.body.classList.add('dark-theme');
20-
} else {
21-
document.body.classList.remove('dark-theme');
17+
function detectDarkTheme(toggle) {
18+
var prefersDarkSchemeSetting = localStorage.getItem("prefersDarkScheme")
19+
if (prefersDarkSchemeSetting == null) {
20+
prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
21+
} else {
22+
prefersDarkScheme = prefersDarkSchemeSetting == "true"
23+
}
24+
25+
if (toggle) {
26+
if (prefersDarkScheme) {
27+
prefersDarkScheme = false
28+
localStorage.setItem("prefersDarkScheme", "false")
29+
} else {
30+
prefersDarkScheme = true
31+
localStorage.setItem("prefersDarkScheme", "true")
32+
}
33+
}
34+
console.log(toggle, prefersDarkSchemeSetting, prefersDarkScheme)
35+
36+
if (prefersDarkScheme) {
37+
document.body.classList.add('dark-theme');
38+
} else {
39+
document.body.classList.remove('dark-theme');
40+
}
2241
}
42+
43+
detectDarkTheme(false)
2344
</script>
2445
<div class="header">
2546
<div class="header-container">
@@ -39,6 +60,7 @@
3960
type="text"
4061
placeholder="Search the docs..."
4162
/>
63+
<a href="#" onclick="event.preventDefault(); detectDarkTheme(true)">☀</a>
4264
</div>
4365
</div>
4466
<div class="search-results-container">

‎guides/css/main.scss‎

Lines changed: 112 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "reset";
55

66
$brand-color: #a5152a;
7+
$dark-theme-brand-color: #e5534b;
78
$brand-color-light: #ed8090;
89
$brand-color-extralight: #f9e8ee;
910
$dark-theme-brand-color-extralight: #262324;
@@ -21,7 +22,7 @@ $dark-theme-code-border: #aaaaaa;
2122
$code-border: #d6d6d6;
2223
$dark-theme-code-background: #1e1b1b;
2324
$code-background: #fafafa;
24-
$dark-theme-code-color: #cacaca;
25+
$dark-theme-code-color: #b5b5b5;
2526
$code-color: #777777;
2627
$code-border-radius: 2px;
2728

@@ -31,7 +32,7 @@ $font: 'Rubik', sans-serif;
3132
$code-font: 'Monaco', monospace;
3233

3334
$faint-color: #f0f0f0;
34-
$dark-theme-faint-color: #909090;
35+
$dark-theme-faint-color: #6a6969;
3536

3637
$font-color: black;
3738
$dark-theme-font-color: #dbdbdb;
@@ -48,7 +49,7 @@ body {
4849
}
4950

5051
body.dark-theme {
51-
background: #010101;
52+
background: $dark-theme-code-background;
5253
color: $dark-theme-font-color;
5354
}
5455

@@ -66,6 +67,10 @@ strong, b {
6667
.header {
6768
background: $dark-theme-container-color;
6869
box-shadow: 0px 0px 10px 0px black;
70+
.nav a:hover {
71+
color: $font-color;
72+
background-color: $dark-theme-brand-color;
73+
}
6974
}
7075
}
7176
.header {
@@ -122,12 +127,12 @@ strong, b {
122127
}
123128

124129
.header-container {
125-
max-width: 1040px;
130+
max-width: 1240px;
126131
margin: 0px auto;
127132
}
128133

129134
.container {
130-
max-width: 1000px;
135+
max-width: 1200px;
131136
margin: 0px auto;
132137
padding: 10px 20px;
133138
background: $container-color;
@@ -193,6 +198,11 @@ code {
193198
}
194199

195200

201+
.dark-theme a {
202+
color: $dark-theme-brand-color;
203+
border-color: $dark-theme-brand-color;
204+
}
205+
196206
a {
197207
color: $brand-color;
198208
border-color: $brand-color;
@@ -317,6 +327,7 @@ a:hover, a:hover code {
317327
}
318328

319329
h2 {
330+
color: $dark-theme-brand-color;
320331
text-shadow: $dark-theme-background-color 1px 1px 1px;
321332
}
322333
}
@@ -401,6 +412,30 @@ table {
401412
}
402413
}
403414

415+
.dark-theme {
416+
.search-input {
417+
background: $dark-theme-code-background;
418+
color: $dark-theme-font-color;
419+
}
420+
.search-results-container {
421+
background-color: $dark-theme-background-color;
422+
#search-results {
423+
.search-result {
424+
&:focus, &:hover {
425+
background-color: $dark-theme-container-color;
426+
border-bottom-color: $dark-theme-brand-color;
427+
.search-title {
428+
color: $dark-theme-brand-color;
429+
}
430+
}
431+
.search-category {
432+
border: 1px solid $dark-theme-brand-color;
433+
color: $dark-theme-brand-color;
434+
}
435+
}
436+
}
437+
}
438+
}
404439
.search-input {
405440
font-size: 1em;
406441
padding: 5px;
@@ -456,15 +491,18 @@ table {
456491
color: $brand-color;
457492
}
458493
background-color: $bg-highlight;
459-
}
460-
461-
&:hover {
462494
border-bottom-color: $brand-color;
463495
}
464496
}
465497
}
466498
}
467499

500+
.dark-theme ul.breadcrumb .jump-to-select {
501+
color: $dark-theme-brand-color;
502+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23e5534b' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
503+
504+
}
505+
468506
ul.breadcrumb {
469507
color: $muted-color;
470508

@@ -618,78 +656,70 @@ ul.breadcrumb {
618656

619657

620658
.dark-theme {
621-
.highlight .hll { background-color: #ffffcc }
622-
pre.highlight { background: #002B36; color: #93A1A1 }
623-
.highlight .c { color: #586E75 } /* Comment */
624-
.highlight .err { color: #93A1A1 } /* Error */
625-
.highlight .esc { color: #93A1A1 } /* Escape */
626-
.highlight .g { color: #93A1A1 } /* Generic */
627-
.highlight .k { color: #719e07 } /* Keyword */
628-
.highlight .l { color: #93A1A1 } /* Literal */
629-
.highlight .n { color: #93A1A1 } /* Name */
630-
.highlight .o { color: #719e07 } /* Operator */
631-
.highlight .x { color: #CB4B16 } /* Other */
632-
.highlight .p { color: #93A1A1 } /* Punctuation */
633-
.highlight .ch { color: #586E75 } /* Comment.Hashbang */
634-
.highlight .cm { color: #586E75 } /* Comment.Multiline */
635-
.highlight .cp { color: #719e07 } /* Comment.Preproc */
636-
.highlight .cpf { color: #586E75 } /* Comment.PreprocFile */
637-
.highlight .c1 { color: #586E75 } /* Comment.Single */
638-
.highlight .cs { color: #719e07 } /* Comment.Special */
639-
.highlight .gd { color: #DC322F } /* Generic.Deleted */
640-
.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */
641-
.highlight .gr { color: #DC322F; font-weight: bold } /* Generic.Error */
642-
.highlight .gh { color: #CB4B16 } /* Generic.Heading */
643-
.highlight .gi { color: #719e07 } /* Generic.Inserted */
644-
.highlight .go { color: #93A1A1 } /* Generic.Output */
645-
.highlight .gp { color: #93A1A1 } /* Generic.Prompt */
646-
.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */
647-
.highlight .gu { color: #268BD2 } /* Generic.Subheading */
648-
.highlight .gt { color: #93A1A1 } /* Generic.Traceback */
649-
.highlight .kc { color: #CB4B16 } /* Keyword.Constant */
650-
.highlight .kd { color: #268BD2 } /* Keyword.Declaration */
651-
.highlight .kn { color: #719e07 } /* Keyword.Namespace */
652-
.highlight .kp { color: #719e07 } /* Keyword.Pseudo */
653-
.highlight .kr { color: #268BD2 } /* Keyword.Reserved */
654-
.highlight .kt { color: #DC322F } /* Keyword.Type */
655-
.highlight .ld { color: #93A1A1 } /* Literal.Date */
656-
.highlight .m { color: #2AA198 } /* Literal.Number */
657-
.highlight .s { color: #2AA198 } /* Literal.String */
658-
.highlight .na { color: #93A1A1 } /* Name.Attribute */
659-
.highlight .nb { color: #B58900 } /* Name.Builtin */
660-
.highlight .nc { color: #268BD2 } /* Name.Class */
661-
.highlight .no { color: #CB4B16 } /* Name.Constant */
662-
.highlight .nd { color: #268BD2 } /* Name.Decorator */
663-
.highlight .ni { color: #CB4B16 } /* Name.Entity */
664-
.highlight .ne { color: #CB4B16 } /* Name.Exception */
665-
.highlight .nf { color: #268BD2 } /* Name.Function */
666-
.highlight .nl { color: #93A1A1 } /* Name.Label */
667-
.highlight .nn { color: #93A1A1 } /* Name.Namespace */
668-
.highlight .nx { color: #93A1A1 } /* Name.Other */
669-
.highlight .py { color: #93A1A1 } /* Name.Property */
670-
.highlight .nt { color: #268BD2 } /* Name.Tag */
671-
.highlight .nv { color: #268BD2 } /* Name.Variable */
672-
.highlight .ow { color: #719e07 } /* Operator.Word */
673-
.highlight .w { color: #93A1A1 } /* Text.Whitespace */
674-
.highlight .mb { color: #2AA198 } /* Literal.Number.Bin */
675-
.highlight .mf { color: #2AA198 } /* Literal.Number.Float */
676-
.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */
677-
.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */
678-
.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */
679-
.highlight .sb { color: #586E75 } /* Literal.String.Backtick */
680-
.highlight .sc { color: #2AA198 } /* Literal.String.Char */
681-
.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */
682-
.highlight .s2 { color: #2AA198 } /* Literal.String.Double */
683-
.highlight .se { color: #CB4B16 } /* Literal.String.Escape */
684-
.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */
685-
.highlight .si { color: #2AA198 } /* Literal.String.Interpol */
686-
.highlight .sx { color: #2AA198 } /* Literal.String.Other */
687-
.highlight .sr { color: #DC322F } /* Literal.String.Regex */
688-
.highlight .s1 { color: #2AA198 } /* Literal.String.Single */
689-
.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */
690-
.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */
691-
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
692-
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
693-
.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
694-
.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
659+
.highlight .hll { background-color: #49483e }
660+
pre.highlight { background: #272822; color: #f8f8f2 }
661+
.highlight .c { color: #75715e } /* Comment */
662+
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
663+
.highlight .k { color: #66d9ef } /* Keyword */
664+
.highlight .l { color: #ae81ff } /* Literal */
665+
.highlight .n { color: #f8f8f2 } /* Name */
666+
.highlight .o { color: #f92672 } /* Operator */
667+
.highlight .p { color: #f8f8f2 } /* Punctuation */
668+
.highlight .ch { color: #75715e } /* Comment.Hashbang */
669+
.highlight .cm { color: #75715e } /* Comment.Multiline */
670+
.highlight .cp { color: #75715e } /* Comment.Preproc */
671+
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
672+
.highlight .c1 { color: #75715e } /* Comment.Single */
673+
.highlight .cs { color: #75715e } /* Comment.Special */
674+
.highlight .gd { color: #f92672 } /* Generic.Deleted */
675+
.highlight .ge { font-style: italic } /* Generic.Emph */
676+
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
677+
.highlight .gs { font-weight: bold } /* Generic.Strong */
678+
.highlight .gu { color: #75715e } /* Generic.Subheading */
679+
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
680+
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
681+
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
682+
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
683+
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
684+
.highlight .kt { color: #66d9ef } /* Keyword.Type */
685+
.highlight .ld { color: #e6db74 } /* Literal.Date */
686+
.highlight .m { color: #ae81ff } /* Literal.Number */
687+
.highlight .s { color: #e6db74 } /* Literal.String */
688+
.highlight .na { color: #a6e22e } /* Name.Attribute */
689+
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
690+
.highlight .nc { color: #a6e22e } /* Name.Class */
691+
.highlight .no { color: #66d9ef } /* Name.Constant */
692+
.highlight .nd { color: #a6e22e } /* Name.Decorator */
693+
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
694+
.highlight .ne { color: #a6e22e } /* Name.Exception */
695+
.highlight .nf { color: #a6e22e } /* Name.Function */
696+
.highlight .nl { color: #f8f8f2 } /* Name.Label */
697+
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
698+
.highlight .nx { color: #a6e22e } /* Name.Other */
699+
.highlight .py { color: #f8f8f2 } /* Name.Property */
700+
.highlight .nt { color: #f92672 } /* Name.Tag */
701+
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
702+
.highlight .ow { color: #f92672 } /* Operator.Word */
703+
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
704+
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
705+
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
706+
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
707+
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
708+
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
709+
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
710+
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
711+
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
712+
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
713+
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
714+
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
715+
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
716+
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
717+
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
718+
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
719+
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
720+
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
721+
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
722+
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
723+
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
724+
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
695725
}

‎guides/dataloader/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ desc: Getting started with the Fiber-based Dataloader
77
index: 0
88
---
99

10-
{{ "GraphQL::Dataloader" | api_doc }} provides efficient, batched access to external services, backed by Ruby's `Fiber` concurrency primitive. It has a per-query result cache and {% internal_link AsyncDataloader, "/dataloader/async_dataloader" %} supports truly parallel execution out-of-the-box.
10+
{{ "GraphQL::Dataloader" | api_doc }} provides efficient, batched access to external services, backed by Ruby's `Fiber` concurrency primitive. It has a per-query result cache and {% internal_link "AsyncDataloader", "/dataloader/async_dataloader" %} supports truly parallel execution out-of-the-box.
1111

1212
`GraphQL::Dataloader` is inspired by [`@bessey`'s proof-of-concept](https://github.com/bessey/graphql-fiber-test/tree/no-gem-changes) and [shopify/graphql-batch](https://github.com/shopify/graphql-batch).
1313

0 commit comments

Comments
 (0)