Skip to content

Commit 03ab645

Browse files
StanFromIrelandStanFromIreland
authored
Add a dark mode (#174)
1 parent fc76317 commit 03ab645

3 files changed

Lines changed: 114 additions & 21 deletions

File tree

‎src/style.css‎

Lines changed: 89 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,65 @@
11
/* ---------------------------- Global Styles ------------------------------- */
22

33
:root {
4-
--bg-color: rgb(245, 245, 245);
4+
/* general */
5+
--bg-color: 245, 245, 245;
56
--text-color: #15141A;
7+
8+
/* navbar */
9+
--navbar-hover-bg: #eacb4d;
10+
--navbar-link-color: #0d0d0d;
11+
--navbar-border: #999;
12+
--navbar-title-color: #4a4a4a;
13+
14+
/* cards */
15+
--card-link-color: #1178cc;
16+
--card-title-hover-bg: #f5e9a8;
17+
--card-hash-color: #7ec3ff;
18+
19+
/* build details table */
20+
--table-border: #ddd;
21+
--table-header-bg: #d6d6d6;
22+
--table-mobile-row-border: #ccc;
23+
--table-mobile-cell-border: #eee;
624
}
725

26+
html.dark {
27+
/* general */
28+
--bg-color: 26, 26, 26;
29+
--text-color: #e0e0e0;
30+
31+
/* navbar */
32+
--navbar-hover-bg: #5c4d0a;
33+
--navbar-link-color: #e0e0e0;
34+
--navbar-border: #444;
35+
--navbar-title-color: #d0d0d0;
36+
37+
/* cards */
38+
--card-link-color: #6cb4ee;
39+
--card-title-hover-bg: #3a3520;
40+
--card-hash-color: #6cb4ee;
41+
42+
/* build details table */
43+
--table-border: #444;
44+
--table-header-bg: #2a2a2a;
45+
--table-mobile-row-border: #444;
46+
--table-mobile-cell-border: #333;
47+
}
48+
49+
/* --------------------------------- body ----------------------------------- */
50+
851
body {
952
padding: 4.5rem 1rem 3rem;
1053
color: var(--text-color);
11-
background-color: var(--bg-color);
54+
background-color: rgb(var(--bg-color));
1255
}
1356

1457
/* -------------------------------- navbar ---------------------------------- */
1558

1659
.navbar {
17-
background-color: rgb(var(--bg-color), 0.6);
60+
background-color: rgba(var(--bg-color), 0.6);
1861
backdrop-filter: blur(10px);
19-
border-bottom: 0.25px solid #999;
62+
border-bottom: 0.25px solid var(--navbar-border);
2063
-webkit-backdrop-filter: blur(10px);
2164
}
2265

@@ -30,23 +73,52 @@ body {
3073
}
3174

3275
.navbar li:hover {
33-
background-color: #eacb4d;
76+
background-color: var(--navbar-hover-bg);
3477
}
3578

3679
.navbar li .nav-link {
37-
color: #0d0d0d;
80+
color: var(--navbar-link-color);
3881
}
3982

4083
.navbar-brand a {
4184
text-decoration: none;
4285
outline-offset: 8px;
4386
}
4487

88+
.navbar-title-text {
89+
font-size: 1.25rem;
90+
font-weight: 700;
91+
color: var(--navbar-title-color);
92+
}
93+
4594
.nav-link svg {
4695
vertical-align: middle;
4796
margin-top: -4.5px;
4897
}
4998

99+
.theme-toggle-btn {
100+
border: none;
101+
color: var(--navbar-link-color);
102+
padding: 0.25rem 0.5rem;
103+
line-height: 1;
104+
}
105+
106+
.theme-toggle-btn:hover {
107+
background-color: var(--navbar-hover-bg);
108+
}
109+
110+
.theme-icon-dark {
111+
display: none;
112+
}
113+
114+
html.dark .theme-icon-light {
115+
display: none;
116+
}
117+
118+
html.dark .theme-icon-dark {
119+
display: inline-block;
120+
}
121+
50122

51123
/* ----------------------- Cards and card columns --------------------------- */
52124

@@ -83,18 +155,22 @@ body {
83155
.card-title a::after {
84156
content: " #";
85157
font-size: 0.8em;
86-
color: #7ec3ff;
158+
color: var(--card-hash-color);
87159
}
88160

89161
.card-title a:focus, .card-title a:hover {
90-
background-color: #f5e9a8;
162+
background-color: var(--card-title-hover-bg);
91163
}
92164

93165
ul.links-row {
94166
display: flex;
95167
padding-left: 0;
96168
list-style: none;
97169
}
170+
171+
ul.links-row a {
172+
color: var(--card-link-color);
173+
}
98174
ul.links-row li:not(:first-child) {
99175
padding-left: 1ch;
100176
}
@@ -126,22 +202,19 @@ ul.links-row li:not(:first-child)::before {
126202
display: flex;
127203
}
128204

129-
/* ------------------------------ Metadata ---------------------------------- */
205+
/* ----------------------------- Build Details ------------------------------ */
130206

131207
table {
132208
border-collapse: collapse;
133209
}
134210
th, td {
135-
border: 1px solid #ddd;
211+
border: 1px solid var(--table-border);
136212
padding: 8px 12px;
137213
text-align: left;
138214
white-space: nowrap;
139215
}
140216
th {
141-
background-color: #d6d6d6;
142-
}
143-
hr {
144-
color: #f4f4f4;
217+
background-color: var(--table-header-bg);
145218
}
146219
td[data-label="warnings"], td[data-label="lint"] {
147220
text-align: right;
@@ -157,13 +230,13 @@ td[data-label="warnings"], td[data-label="lint"] {
157230
left: -9999px;
158231
}
159232
tr {
160-
border: 1px solid #ccc;
233+
border: 1px solid var(--table-mobile-row-border);
161234
margin-bottom: 5px;
162235
overflow-x: auto;
163236
}
164237
td {
165238
border: none;
166-
border-bottom: 1px solid #eee;
239+
border-bottom: 1px solid var(--table-mobile-cell-border);
167240
padding-left: 50%;
168241
position: relative;
169242
}

‎templates/base.html.jinja‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,24 @@
1515
</head>
1616

1717
<body>
18+
<script>
19+
function applyTheme(t) {
20+
document.documentElement.setAttribute('data-bs-theme', t);
21+
document.documentElement.classList.toggle('dark', t === 'dark');
22+
}
23+
applyTheme(localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
24+
</script>
1825
<header>
1926
<nav class="navbar navbar-expand-md fixed-top">
2027
<div class="container-fluid">
2128
<div class="navbar-brand">
2229
<a href="./">
2330
<img src="logo.png" style="height: 2rem;" alt="Python logo">
24-
<span style="font-size: 1.25rem; font-weight: 700; color: #4a4a4a">Translation Dashboard</span>
31+
<span class="navbar-title-text">Translation Dashboard</span>
2532
</a>
2633
</div>
2734

28-
<div class="navbar-light bg-light">
35+
<div>
2936
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
3037
<span class="navbar-toggler-icon"></span>
3138
</button>
@@ -52,6 +59,14 @@
5259
</a>
5360
</li>
5461
</ul>
62+
<button id="theme-toggle" class="btn btn-sm theme-toggle-btn ms-auto" type="button" aria-label="Toggle dark mode">
63+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high theme-icon-light" viewBox="0 0 16 16">
64+
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
65+
</svg>
66+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill theme-icon-dark" viewBox="0 0 16 16">
67+
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
68+
</svg>
69+
</button>
5570
</div>
5671
</div>
5772
</nav>
@@ -73,6 +88,12 @@
7388
}
7489
window.addEventListener('load', padnavbar);
7590
window.addEventListener('resize', padnavbar);
91+
92+
document.getElementById('theme-toggle').addEventListener('click', function() {
93+
var next = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
94+
localStorage.setItem('theme', next);
95+
applyTheme(next);
96+
});
7697
</script>
7798

7899
<script src="https://code.jquery.com/jquery-4.0.0.slim.min.js"

‎templates/index.html.jinja‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@
1313
<ul class="links-row">
1414
{% if project.built %}
1515
<li>
16-
<a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation"
17-
style="color: #1178cc;">View</a>
16+
<a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation">View</a>
1817
</li>
1918
{% endif %}
2019
<li>
21-
<a href="{{ project.contribution_link }}" style="color: #1178cc;" aria-label="Contribute to {{ project.language.name }} translation">
20+
<a href="{{ project.contribution_link }}" aria-label="Contribute to {{ project.language.name }} translation">
2221
Contribute
2322
</a>
2423
</li>

0 commit comments

Comments
 (0)