Skip to content

Commit ca3fd30

Browse files
eyssetteeyssette
committed
fix(css): meilleure gestion du darkmode (avec une classe) et possibilité d'utiliser "darkmode: false" dans le yaml pour forcer le lightmode
1 parent e6b1b73 commit ca3fd30

6 files changed

Lines changed: 83 additions & 51 deletions

File tree

‎app/css/styles.css‎

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
/*
2-
BASE ET LAYOUT
2+
BASE
33
*/
44

5+
/* VARIABLES CSS */
6+
57
:root {
68
--font: Inter, Avenir, Helvetica, Arial, sans-serif;
79
--body-bg: #fff;
@@ -26,43 +28,66 @@
2628
--color-link: darkblue;
2729
}
2830

29-
@media (prefers-color-scheme: dark) {
30-
:root {
31-
--body-bg: #171919;
32-
--h1-bg: #171919;
33-
--main-bg: linear-gradient(
34-
90deg,
35-
#1e2021,
36-
#202223,
37-
#222425,
38-
#242627,
39-
#272929
40-
);
41-
--main-border-color: transparent;
42-
--controls-bg: #171919;
43-
--color-text: #e0ddd7;
44-
--color-bg: #171919;
45-
--color-light: #888;
46-
--color-lighter: rgb(255 255 255 / 20%);
47-
--color-ultra-light: rgb(0 0 0 / 10%);
48-
--color-link: #6eb4ff;
49-
}
50-
.messageOptions a {
51-
--color-light: #444 !important;
52-
}
53-
.admonition {
54-
--info-color-title: white !important;
55-
--success-color-title: white !important;
56-
--warning-color-title: white !important;
57-
}
58-
input,
59-
button {
60-
background-color: #3b3b3b;
61-
color: white;
62-
border: 1px solid rgba(255, 255, 255, 0.3);
63-
}
31+
/* DARKMODE */
32+
33+
:root.darkmode {
34+
--body-bg: #171919;
35+
--h1-bg: #171919;
36+
--main-bg: linear-gradient(
37+
90deg,
38+
#1e2021,
39+
#202223,
40+
#222425,
41+
#242627,
42+
#272929
43+
);
44+
--main-border-color: transparent;
45+
--controls-bg: #171919;
46+
--color-text: #e0ddd7;
47+
--color-bg: #171919;
48+
--color-light: #888;
49+
--color-lighter: rgb(255 255 255 / 20%);
50+
--color-ultra-light: rgb(0 0 0 / 10%);
51+
--color-link: #6eb4ff;
52+
}
53+
.darkmode .messageOptions a {
54+
--color-light: #444 !important;
55+
}
56+
.darkmode .admonition {
57+
--info-color-title: white !important;
58+
--success-color-title: white !important;
59+
--warning-color-title: white !important;
60+
}
61+
.darkmode input,
62+
.darkmode button,
63+
.darkmode select {
64+
color: white;
65+
border: 1px solid rgba(255, 255, 255, 0.3);
6466
}
6567

68+
.darkmode input,
69+
.darkmode button {
70+
background-color: #3b3b3b;
71+
}
72+
73+
.darkmode select {
74+
background-color: rgba(0, 0, 0, 0.1);
75+
}
76+
77+
.darkmode select:focus-visible {
78+
border-color: rgba(47, 50, 51, 0.3);
79+
}
80+
81+
.darkmode option {
82+
background: rgb(23, 25, 25);
83+
}
84+
85+
/*
86+
LAYOUT
87+
*/
88+
89+
/* LAYOUT PRICIPAL */
90+
6691
body {
6792
margin: 0;
6893
display: flex;
@@ -240,7 +265,7 @@ footer a:hover {
240265
}
241266
}
242267

243-
/* Éléments de base HTML */
268+
/* ÉLÉMENTS DE BASE HTML */
244269

245270
a,
246271
a:visited {

‎app/css/styles.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/css/themes/bubbles.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
:root {
1+
:root,
2+
.darkmode:root {
23
--main-bg: transparent;
34
}
45
.message {
56
--color-light: #e5e5ea;
67
}
78

8-
@media (prefers-color-scheme: dark) {
9-
.message {
10-
--color-light: #222;
11-
}
9+
.darkmode .message {
10+
--color-light: #222;
1211
}
1312

1413
h1 {

‎app/js/markdown/custom/yaml.mjs‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,6 @@ export function processYAML(markdownContent) {
9191
yaml.responsesTitles = Object.values(yaml.responsesTitles);
9292
}
9393
}
94-
if (yaml.style) {
95-
const styleElement = document.createElement("style");
96-
styleElement.innerHTML = yaml.style;
97-
document.body.appendChild(styleElement);
98-
}
9994
if (
10095
yaml.userInput === false ||
10196
yaml.clavier === false ||
@@ -150,6 +145,14 @@ export function processYAML(markdownContent) {
150145
} else if (typeof yaml.footer == "string") {
151146
setContentOfFooter(footerElement, yaml.footer);
152147
}
148+
if (yaml.darkmode !== false) {
149+
if (
150+
window.matchMedia &&
151+
window.matchMedia("(prefers-color-scheme: dark)").matches
152+
) {
153+
document.documentElement.classList.add("darkmode");
154+
}
155+
}
153156
if (yaml.theme) {
154157
const cssFile = yaml.theme.endsWith(".css")
155158
? "css/themes/" + yaml.theme
@@ -168,6 +171,11 @@ export function processYAML(markdownContent) {
168171
avatarStyleElement.textContent = avatarCSS;
169172
document.head.appendChild(avatarStyleElement);
170173
}
174+
if (yaml.style) {
175+
const styleElement = document.createElement("style");
176+
styleElement.innerHTML = yaml.style;
177+
document.body.appendChild(styleElement);
178+
}
171179
if (
172180
yaml.dynamicContent ||
173181
yaml.contenuDynamique ||

0 commit comments

Comments
 (0)