Skip to content

Commit 5e08d9f

Browse files
georgedoescodegeorgedoescode
committed
Add light mode styles for survey, add color theme toggle
1 parent f1b42e6 commit 5e08d9f

File tree

15 files changed

+163
-46
lines changed

15 files changed

+163
-46
lines changed

‎src/css/d3chart.css‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,18 @@
5050
}
5151
.d3chart .tick line {
5252
shape-rendering: crispEdges;
53-
stroke: rgba(255,255,255,.15);
53+
}
54+
55+
.d3chart .tick line {
56+
stroke: rgba(22,26,42,.15);
5457
}
5558
.d3chart-bubble .tick:nth-child(2n) line {
56-
stroke: rgba(255,255,255,.22);
59+
stroke: rgba(22,26,42,.22);
5760
}
5861
.d3chart-bubble .tick:nth-child(2n+1) line {
59-
stroke: rgba(255,255,255,.1);
62+
stroke: rgba(22,26,42,.1);
6063
}
64+
6165
.d3chart-bubble .d3chart-xaxis :first-child line,
6266
.d3chart-bubble .d3chart-yaxis .tick:last-child line {
6367
stroke: #737680;
@@ -112,7 +116,6 @@
112116

113117
/* Axis labels */
114118
.d3chart-axislabel {
115-
fill: #fff;
116119
text-anchor: end;
117120
font-weight: 700;
118121
}
@@ -327,6 +330,23 @@
327330
background: linear-gradient(108.82deg, #FF72CF 0%, #C92ECC 90.74%);
328331
}
329332

333+
/* Overrides */
334+
335+
/* Dark mode */
336+
.dark .tick line {
337+
stroke: rgba(255,255,255,.15);
338+
}
339+
.dark .d3chart-bubble .tick:nth-child(2n) line {
340+
stroke: rgba(255,255,255,.22);
341+
}
342+
.dark .d3chart-bubble .tick:nth-child(2n+1) line {
343+
stroke: rgba(255,255,255,.1);
344+
}
330345

346+
.dark .d3chart-axislabel {
347+
fill: #fff;
348+
}
331349

332-
/* Overrides */
350+
.dark .d3chart-bubblelabel.offset-l {
351+
filter: url(#offset-label-bg);
352+
}

‎src/css/tailwind.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ section {
4040
}
4141

4242

43-
section a,
44-
dd a {
43+
:where(section a),
44+
:where(dd a) {
4545
@apply dark:text-white;
4646
@apply border-b;
4747
@apply border-blue-900 dark:border-blue-100;
@@ -471,6 +471,11 @@ details[open] .summary-swap-open {
471471
height: 4px;
472472
background-color: red;
473473
}
474+
475+
/* Survey */
476+
.chart-data-table-head {
477+
@apply bg-gray-200 dark:bg-gray-700 border-b-2;
478+
}
474479
/* purgecss end ignore */
475480

476481
@tailwind utilities;

‎src/js/color-theme.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const htmlElement = document.documentElement;
2+
const colorThemeSelector = document.querySelector(
3+
"[data-color-theme-selector]"
4+
);
5+
const colorThemeSelectorInput = colorThemeSelector.querySelector("select");
6+
const storedTheme = localStorage.theme;
7+
8+
function setInputState(storedTheme) {
9+
if (!!storedTheme) {
10+
colorThemeSelectorInput.querySelector(
11+
`[value="${storedTheme}"]`
12+
).selected = true;
13+
14+
htmlElement.classList.add(storedTheme);
15+
}
16+
}
17+
18+
function displayThemeSelector() {
19+
colorThemeSelector.classList.remove("invisible");
20+
}
21+
22+
function toggleThemeClass(type) {
23+
if (type === "dark") {
24+
if (htmlElement.classList.contains("light")) {
25+
htmlElement.classList.remove("light");
26+
}
27+
28+
htmlElement.classList.add("dark");
29+
} else if (type == "light") {
30+
if (htmlElement.classList.contains("dark")) {
31+
htmlElement.classList.remove("dark");
32+
}
33+
34+
htmlElement.classList.add("light");
35+
} else {
36+
// "System" mode - blanket remove all theme classes from the root <html> element
37+
if (htmlElement.classList.contains("dark")) {
38+
htmlElement.classList.remove("dark");
39+
}
40+
41+
if (htmlElement.classList.contains("light")) {
42+
htmlElement.classList.remove("light");
43+
}
44+
45+
// If the current system color scheme preference is dark, apply the .dark class
46+
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
47+
htmlElement.classList.add("dark");
48+
}
49+
}
50+
}
51+
52+
function updateTheme(type) {
53+
switch (type) {
54+
case "dark":
55+
toggleThemeClass("dark");
56+
localStorage.theme = "dark";
57+
break;
58+
case "light":
59+
toggleThemeClass("light");
60+
localStorage.theme = "light";
61+
break;
62+
default:
63+
toggleThemeClass("system");
64+
65+
localStorage.removeItem("theme");
66+
break;
67+
}
68+
}
69+
70+
setInputState(storedTheme);
71+
displayThemeSelector();
72+
73+
colorThemeSelectorInput.addEventListener("change", (e) => {
74+
updateTheme(e.target.value);
75+
});

‎src/site/_includes/components/color-theme-selector.njk‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="flex justify-end p-4">
2+
<label class="color-theme-selector-wrapper inline-flex invisible" data-color-theme-selector>
3+
<span class="sr-only">Color theme</span>
4+
<select class="text-black py-1 px-2 rounded-default border border-white bg-white">
5+
<option selected value="system">System</option>
6+
<option value="dark">Dark</option>
7+
<option value="light">Light</option>
8+
</select>
9+
</label>
10+
</div>

‎src/site/_includes/layouts/base.njk‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,17 @@ ogimage: "/img/og/default-og-image.png"
3535
<meta name="google-site-verification" content="i5IheizQ6X_M4jNqb_b7vbJrT34i_gvEg8Gxkq9IY_w" />
3636
<meta name="google-site-verification" content="WDIQ_1X8K7XIpPJ5G1Z8KnOqdSeYetPQB4EgoTLfIsc" />
3737
<script type="module">document.documentElement.classList.add("js");</script>
38+
<script>
39+
if (
40+
localStorage.theme === "dark" ||
41+
(!("theme" in localStorage) &&
42+
window.matchMedia("(prefers-color-scheme: dark)").matches)
43+
) {
44+
document.documentElement.classList.add("dark");
45+
} else {
46+
document.documentElement.classList.remove("dark");
47+
}
48+
</script>
3849
{%- for url in javascripts %}
3950
<script defer src="{{ url }}"></script>
4051
{%- endfor %}
@@ -54,6 +65,7 @@ ogimage: "/img/og/default-og-image.png"
5465
</div>
5566
<div>
5667
{% include "banner.njk" %}
68+
{% include "components/color-theme-selector.njk" %}
5769
{{ content | safe }}
5870
<div class="border-gray-300 dark:border-blue-800 border-t">
5971
{% include "footer.njk" %}
@@ -84,6 +96,7 @@ ogimage: "/img/og/default-og-image.png"
8496
</defs>
8597
</svg>
8698
<script type="module" src="/js/details-force-state.js"></script>
99+
<script type="module" src="/js/color-theme.js"></script>
87100
<script type="module" src="/js/filter-container.js"></script>
88101
<script type="module" src="/js/sort-container.js"></script>
89102
<script type="module" src="/js/lazyiframe.js"></script>

‎src/site/_includes/survey/adoption.njk‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<summary class="text-sm mb-2">Show Chart Data</summary>
1717
<table id="adoption-purpose-table" class="table-auto border-collapse">
1818
<thead>
19-
<tr class="bg-gray-700 border-b-2">
19+
<tr class="chart-data-table-head">
2020
<th class="text-left pr-2">Years of Experience</th>
2121
<th class="text-left pr-2">Remote</th>
2222
</tr>
@@ -65,7 +65,7 @@
6565
<summary class="text-sm mb-2">Show Chart Data</summary>
6666
<table id="adoption-audience-table" class="table-auto border-collapse">
6767
<thead>
68-
<tr class="bg-gray-700 border-b-2">
68+
<tr class="chart-data-table-head">
6969
<th class="text-left pr-2">Number of users</th>
7070
<th class="text-left pr-2">Most sites</th>
7171
<th class="text-left pr-2">Some sites</th>
@@ -101,7 +101,7 @@
101101
<summary class="text-sm mb-2">Show Chart Data</summary>
102102
<table id="adoption-titles-table" class="table-auto border-collapse">
103103
<thead>
104-
<tr class="bg-gray-700 border-b-2">
104+
<tr class="chart-data-table-head">
105105
<th class="text-left pr-2">Frequency of large sites</th>
106106
<th class="text-left pr-2">Content producer</th>
107107
<th class="text-left pr-2">Back-end</th>
@@ -134,7 +134,7 @@
134134
<summary class="text-sm mb-2">Show Chart Data</summary>
135135
<table id="adoption-frequency-table" class="table-auto border-collapse">
136136
<thead>
137-
<tr class="bg-gray-700 border-b-2">
137+
<tr class="chart-data-table-head">
138138
<th class="text-left pr-2">How frequently do you build sites for audiences of millions</th>
139139
<th class="text-left pr-2">Somewhat</th>
140140
<th class="text-left pr-2">Very</th>
@@ -171,7 +171,7 @@
171171
<summary class="text-sm mb-2">Show Chart Data</summary>
172172
<table id="adoption-industries-table" class="table-auto border-collapse">
173173
<thead>
174-
<tr class="bg-gray-700 border-b-2">
174+
<tr class="chart-data-table-head">
175175
<th class="text-left pr-2">Industry</th>
176176
<th class="text-left pr-2">Percentage</th>
177177
</tr>
@@ -228,7 +228,7 @@
228228
<summary class="text-sm mb-2">Show Chart Data</summary>
229229
<table id="adoption-serverside-table" class="table-auto border-collapse">
230230
<thead>
231-
<tr class="bg-gray-700 border-b-2">
231+
<tr class="chart-data-table-head">
232232
<th class="text-left pr-2">Technique</th>
233233
<th class="text-left pr-2">Percentage of respondents who use this</th>
234234
<th class="text-left pr-2">Satisfaction score</th>

‎src/site/_includes/survey/choices.njk‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<summary class="text-sm mb-2">Show Chart Data</summary>
1919
<table id="choices-cms-table" class="table-auto border-collapse">
2020
<thead>
21-
<tr class="bg-gray-700 border-b-2">
21+
<tr class="chart-data-table-head">
2222
<th class="text-left pr-2">CMS</th>
2323
<th class="text-left pr-2">Usage</th>
2424
<th class="text-left pr-2">Satisfaction</th>
@@ -156,7 +156,7 @@
156156
<summary class="text-sm mb-2">Show Chart Data</summary>
157157
<table id="choices-cmsdelta-table" class="table-auto border-collapse">
158158
<thead>
159-
<tr class="bg-gray-700 border-b-2">
159+
<tr class="chart-data-table-head">
160160
<th class="text-left pr-2">CMS</th>
161161
<th class="text-left pr-2">Usage change (%)</th>
162162
<th class="text-left pr-2">Satisfaction change</th>
@@ -281,7 +281,7 @@
281281
<summary class="text-sm mb-2">Show Chart Data</summary>
282282
<table id="choices-langs-table" class="table-auto border-collapse">
283283
<thead>
284-
<tr class="bg-gray-700 border-b-2">
284+
<tr class="chart-data-table-head">
285285
<th class="text-left pr-2">Language</th>
286286
<th class="text-left pr-2">Usage</th>
287287
<th class="text-left pr-2">Satisfaction</th>
@@ -419,7 +419,7 @@
419419
<summary class="text-sm mb-2">Show Chart Data</summary>
420420
<table id="choices-langsdelta-table" class="table-auto border-collapse">
421421
<thead>
422-
<tr class="bg-gray-700 border-b-2">
422+
<tr class="chart-data-table-head">
423423
<th class="text-left pr-2">CMS</th>
424424
<th class="text-left pr-2">Usage change (%)</th>
425425
<th class="text-left pr-2">Satisfaction change</th>
@@ -560,7 +560,7 @@
560560
<summary class="text-sm mb-2">Show Chart Data</summary>
561561
<table id="choices-frameworks-table" class="table-auto border-collapse">
562562
<thead>
563-
<tr class="bg-gray-700 border-b-2">
563+
<tr class="chart-data-table-head">
564564
<th class="text-left pr-2">Framework</th>
565565
<th class="text-left pr-2">Percentage of respondents who use this</th>
566566
<th class="text-left pr-2">Satisfaction score</th>
@@ -682,7 +682,7 @@
682682
<summary class="text-sm mb-2">Show Chart Data</summary>
683683
<table id="choices-frameworksminor-table" class="table-auto border-collapse">
684684
<thead>
685-
<tr class="bg-gray-700 border-b-2">
685+
<tr class="chart-data-table-head">
686686
<th class="text-left pr-2">Framework</th>
687687
<th class="text-left pr-2">Percentage of respondents who use this</th>
688688
<th class="text-left pr-2">Satisfaction score</th>
@@ -814,7 +814,7 @@
814814
<summary class="text-sm mb-2">Show Chart Data</summary>
815815
<table id="choices-frameworksdelta-table" class="table-auto border-collapse">
816816
<thead>
817-
<tr class="bg-gray-700 border-b-2">
817+
<tr class="chart-data-table-head">
818818
<th class="text-left pr-2">CMS</th>
819819
<th class="text-left pr-2">Usage change (%)</th>
820820
<th class="text-left pr-2">Satisfaction change</th>
@@ -952,7 +952,7 @@
952952
<summary class="text-sm mb-2">Show Chart Data</summary>
953953
<table id="choices-thirdparty-table" class="table-auto border-collapse">
954954
<thead>
955-
<tr class="bg-gray-700 border-b-2">
955+
<tr class="chart-data-table-head">
956956
<th class="text-left pr-2">API</th>
957957
<th class="text-left pr-2">Most used</th>
958958
</tr>

‎src/site/_includes/survey/demographics.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<summary class="text-sm mb-2">Show Chart Data</summary>
1818
<table id="demographics-jobs-table" class="table-auto border-collapse">
1919
<thead>
20-
<tr class="bg-gray-700 border-b-2">
20+
<tr class="chart-data-table-head">
2121
<th class="text-left pr-2">People</th>
2222
<th class="text-left pr-2">2020</th>
2323
<th class="text-left pr-2">2021</th>
@@ -53,7 +53,7 @@
5353
<summary class="text-sm mb-2">Show Chart Data</summary>
5454
<table id="demographics-jobtitle-table" class="table-auto border-collapse">
5555
<thead>
56-
<tr class="bg-gray-700 border-b-2">
56+
<tr class="chart-data-table-head">
5757
<th class="text-left pr-2">Job Title</th>
5858
<th class="text-left pr-2">Percentage of Survey Participants</th>
5959
</tr>
@@ -110,7 +110,7 @@
110110
<summary class="text-sm mb-2">Show Chart Data</summary>
111111
<table id="demographics-employmentstatus-table" class="table-auto border-collapse">
112112
<thead>
113-
<tr class="bg-gray-700 border-b-2">
113+
<tr class="chart-data-table-head">
114114
<th class="text-left pr-2">Employment Status</th>
115115
<th class="text-left pr-2">2020</th>
116116
<th class="text-left pr-2">2021</th>

0 commit comments

Comments
 (0)