Skip to content

Commit 1da42fa

Browse files
ranjan-purbeyranjan-purbey
committed
feat: allow manually selecting dark color mode
1 parent 10d0add commit 1da42fa

File tree

7 files changed

+613
-571
lines changed

7 files changed

+613
-571
lines changed

‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/themes/prism.css"> <!--node_modules/prismjs/themes/prism.css-->
2222

2323
<link rel="stylesheet" href="style/app.css">
24+
<link rel="stylesheet" href="style/app-dark.css" data-dark-stylesheet>
2425
<link rel="stylesheet" href="style/prism.css">
26+
<link rel="stylesheet" href="style/prism-dark.css" data-dark-stylesheet>
2527
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
2628
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
2729
<link rel="apple-touch-icon" sizes="180x180" href="image/favicon/apple-touch-icon.png">
@@ -33,7 +35,7 @@
3335
<title>
3436
TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
3537
</title>
36-
38+
<script src="script/darkmode.js"></script>
3739
</head>
3840
<body>
3941

‎script/component/MainPage.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ const MainPage = {
4444
</svg>
4545
</a>
4646
</li>
47+
<li class="nav-item">
48+
<button class="btn btn-link nav-link" title="Toggle dark mode" @click="setDarkMode(!darkMode)">
49+
<svg class="svgIcon" aria-labelledby="toggle-dark-mode" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
50+
<path d="M12 18c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0-4a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1zm0 20a1 1 0 0 1-1-1v-2a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1zM5.64 6.64a.997.997 0 0 1-.707-.293l-1.42-1.42a.999.999 0 1 1 1.414-1.414l1.42 1.42A.999.999 0 0 1 5.64 6.64zm14.139 14.139a.997.997 0 0 1-.707-.293l-1.42-1.42a.999.999 0 1 1 1.414-1.414l1.42 1.42a.999.999 0 0 1-.707 1.707zM3 13H1a1 1 0 1 1 0-2h2a1 1 0 0 1 0 2zm20 0h-2a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2zM4.22 20.779a.999.999 0 0 1-.707-1.707l1.42-1.42a.999.999 0 1 1 1.414 1.414l-1.42 1.42a.993.993 0 0 1-.707.293zM18.359 6.64a.999.999 0 0 1-.707-1.707l1.42-1.42a.999.999 0 1 1 1.414 1.414l-1.42 1.42a.997.997 0 0 1-.707.293z" v-show="!darkMode"></path>
51+
<path d="M12.048 21.963c-.308 0-.618-.015-.93-.043-2.66-.246-5.064-1.513-6.771-3.567s-2.512-4.651-2.266-7.311a10.004 10.004 0 0 1 9.038-9.038 1 1 0 0 1 .896 1.589 6.008 6.008 0 0 0 1.258 8.392c2.078 1.536 5.055 1.536 7.133 0a1 1 0 0 1 1.591.896 9.951 9.951 0 0 1-9.949 9.082zM9.315 4.438a8.006 8.006 0 0 0-5.244 6.787 7.954 7.954 0 0 0 1.813 5.849 7.95 7.95 0 0 0 5.417 2.854 7.95 7.95 0 0 0 8.266-5.243 8.01 8.01 0 0 1-2.729.476 7.946 7.946 0 0 1-4.755-1.565C9.174 11.443 8.145 7.68 9.315 4.438z" v-show="darkMode"></path>
52+
</svg>
53+
</button>
54+
</li>
4755
<li class="nav-item dropdown language">
4856
<a class="nav-link" href="#" title="Language" id="lang-choose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4957
<svg class="svgIcon" aria-labelledby="simpleicons-language-icon" role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
@@ -94,8 +102,9 @@ const MainPage = {
94102
data: function () {
95103
return {
96104
links: this.$t("links"),
97-
langs: { en: "English"/*, "zh_CN": "简体中文"*/ }
105+
langs: { en: "English"/*, "zh_CN": "简体中文"*/ },
98106
// to enable chinese back we need to update the documentation
107+
darkMode: window._darkMode
99108
};
100109
},
101110
mounted() {
@@ -128,6 +137,9 @@ const MainPage = {
128137
$cookies.set("locale", locale);
129138
this.$i18n.locale = locale;
130139
window.location.reload(true);
131-
}
140+
},
141+
setDarkMode: function (enabled) {
142+
window._darkMode = this.darkMode = enabled;
143+
},
132144
}
133145
};

‎script/darkmode.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
const LS_KEY = "use-dark-mode",
3+
setLsValue = (enabled) =>
4+
window.localStorage.setItem(LS_KEY, enabled ? "1" : "0");
5+
6+
let useDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
7+
const storedPreference = window.localStorage.getItem(LS_KEY);
8+
if (storedPreference === null) {
9+
setLsValue(useDarkMode);
10+
} else {
11+
useDarkMode = storedPreference === "1";
12+
}
13+
14+
const darkStylesheets = Array.from(
15+
document.head.querySelectorAll("link[data-dark-stylesheet]")
16+
);
17+
const setDarkMode = (enabled) => {
18+
useDarkMode = enabled;
19+
setLsValue(enabled);
20+
for (const stylesheet of darkStylesheets) {
21+
enabled
22+
? stylesheet.setAttribute("rel", "stylesheet")
23+
: stylesheet.removeAttribute("rel");
24+
}
25+
};
26+
Object.defineProperty(window, "_darkMode", {
27+
get() {
28+
return useDarkMode;
29+
},
30+
set: setDarkMode,
31+
});
32+
33+
setDarkMode(useDarkMode);
34+
}

‎style/app-dark.css

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
body {
2+
background-color: #18191a;
3+
color: #eeeeee;
4+
}
5+
6+
.carbon-container {
7+
border-top: 1px solid #3b3b3b;
8+
}
9+
h2, h3 {
10+
border-bottom: 1px solid #3b3b3b;
11+
}
12+
13+
.brand-type {
14+
color: #E83524;
15+
}
16+
.brand-orm {
17+
color: #ffffff;
18+
}
19+
.svgIcon {
20+
fill: #eeeeee;
21+
}
22+
23+
a.anchor {
24+
color: #E83524;
25+
}
26+
27+
a {
28+
color: #8ad4ff;
29+
}
30+
31+
a:not(.anchor):hover {
32+
color: #dbefff;
33+
}
34+
35+
.document h1+ul li::before {
36+
color: #E83524;
37+
}
38+
code {
39+
color: #8ad4ff;
40+
}
41+
h1 code, h2 code, h3 code {
42+
color: #333;
43+
}
44+
45+
.left-panel ul a {
46+
color: #cccccc;
47+
}
48+
.left-panel ul a.router-link-active {
49+
color: #E83524;
50+
}
51+
.left-panel ul a b {
52+
color: #999999;
53+
}
54+
.left-panel ul a:hover {
55+
color: #E83524;
56+
}
57+
.left-panel ul a b:hover {
58+
color: #E83524;
59+
}
60+
61+
.navbar {
62+
background-color: rgba(36, 37, 38, 0.6);
63+
border-bottom: 1px solid #1b1b1b;
64+
}
65+
66+
.navbar-brand {
67+
font-size: 1.4rem;
68+
}
69+
70+
.contribute {
71+
color: #999;
72+
}
73+
74+
.contribute a {
75+
color: #cecece;
76+
}
77+
78+
.language .dropdown-menu a {
79+
color: #616161;
80+
}
81+
82+
.language .dropdown-item:hover,
83+
.language .dropdown-item:focus {
84+
color: #E83524 !important;
85+
background-color: #f8f9fa;
86+
}
87+
88+
.language .dropdown-item.active,
89+
.language .dropdown-item:active {
90+
color: #ffffff;
91+
background-color: transparent;
92+
}
93+
94+
img[src$="/logo_big.png"] {
95+
background-color: rgb(255 255 255);
96+
border-radius: 12px;
97+
}
98+
99+
100+
#carbonads {
101+
background-color: hsl(0, 0%, 2%);
102+
}
103+
104+
#carbonads a {
105+
color: inherit;
106+
}
107+
108+
#carbonads a:hover {
109+
color: inherit;
110+
}
111+
112+
.DocSearch {
113+
--docsearch-text-color: #f5f6f7;
114+
--docsearch-muted-color: #7f8497;
115+
--docsearch-logo-color: #fff;
116+
--docsearch-container-background: rgba(47, 55, 69, 0.7);
117+
118+
/* Modal */
119+
--docsearch-modal-background: #18191a;
120+
121+
/* Search box */
122+
--docsearch-searchbox-background: #18191a;
123+
--docsearch-searchbox-focus-background: #000;
124+
125+
/* Hit */
126+
--docsearch-hit-color: #f5f6f7;
127+
--docsearch-hit-active-color: #fff;
128+
--docsearch-hit-background: #1c1e21;
129+
130+
/* Footer */
131+
--docsearch-footer-background: #242526;
132+
--docsearch-key-gradient: linear-gradient(-26.5deg, #515151, #404040);
133+
134+
/* Shadows */
135+
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40,0,0 3px 8px 0 #000309;
136+
--docsearch-hit-shadow: none;
137+
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);
138+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);
139+
}

‎style/app.css

-143
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,6 @@ h2, h3 {
6161
.navbar {
6262
background-color: rgba(255, 255, 255, 0.6);
6363
}
64-
@media (prefers-color-scheme: dark) {
65-
.navbar {
66-
background-color: rgba(36, 37, 38, 0.6);
67-
border-bottom: 1px solid #1b1b1b;
68-
}
69-
}
7064
.document h1+ul, .document h1+ul ul {
7165
list-style: none;
7266
}
@@ -302,140 +296,3 @@ img {
302296
padding: initial;
303297
}
304298

305-
@media (prefers-color-scheme: dark) {
306-
body {
307-
background-color: #18191a;
308-
color: #eeeeee;
309-
}
310-
311-
.carbon-container {
312-
border-top: 1px solid #3b3b3b;
313-
}
314-
h2, h3 {
315-
border-bottom: 1px solid #3b3b3b;
316-
}
317-
318-
.brand-type {
319-
color: #E83524;
320-
}
321-
.brand-orm {
322-
color: #ffffff;
323-
}
324-
.svgIcon {
325-
fill: #eeeeee;
326-
}
327-
328-
a.anchor {
329-
color: #E83524;
330-
}
331-
332-
a {
333-
color: #8ad4ff;
334-
}
335-
336-
a:not(.anchor):hover {
337-
color: #dbefff;
338-
}
339-
340-
.document h1+ul li::before {
341-
color: #E83524;
342-
}
343-
code {
344-
color: #8ad4ff;
345-
}
346-
h1 code, h2 code, h3 code {
347-
color: #333;
348-
}
349-
350-
.left-panel ul a {
351-
color: #cccccc;
352-
}
353-
.left-panel ul a.router-link-active {
354-
color: #E83524;
355-
}
356-
.left-panel ul a b {
357-
color: #999999;
358-
}
359-
.left-panel ul a:hover {
360-
color: #E83524;
361-
}
362-
.left-panel ul a b:hover {
363-
color: #E83524;
364-
}
365-
366-
.navbar-brand {
367-
font-size: 1.4rem;
368-
}
369-
370-
.contribute {
371-
color: #999;
372-
}
373-
374-
.contribute a {
375-
color: #cecece;
376-
}
377-
378-
379-
.language .dropdown-menu a {
380-
color: #616161;
381-
}
382-
383-
.language .dropdown-item:hover,
384-
.language .dropdown-item:focus {
385-
color: #E83524 !important;
386-
background-color: #f8f9fa;
387-
}
388-
389-
.language .dropdown-item.active,
390-
.language .dropdown-item:active {
391-
color: #ffffff;
392-
background-color: transparent;
393-
}
394-
395-
img[src$="/logo_big.png"] {
396-
background-color: rgb(255 255 255);
397-
border-radius: 12px;
398-
}
399-
400-
401-
#carbonads {
402-
background-color: hsl(0, 0%, 2%);
403-
}
404-
405-
#carbonads a {
406-
color: inherit;
407-
}
408-
409-
#carbonads a:hover {
410-
color: inherit;
411-
}
412-
413-
.DocSearch {
414-
--docsearch-text-color: #f5f6f7;
415-
--docsearch-muted-color: #7f8497;
416-
--docsearch-logo-color: #fff;
417-
--docsearch-container-background: rgba(47, 55, 69, 0.7);
418-
419-
/* Modal */
420-
--docsearch-modal-background: #18191a;
421-
422-
/* Search box */
423-
--docsearch-searchbox-background: #18191a;
424-
--docsearch-searchbox-focus-background: #000;
425-
426-
/* Hit */
427-
--docsearch-hit-color: #f5f6f7;
428-
--docsearch-hit-active-color: #fff;
429-
--docsearch-hit-background: #1c1e21;
430-
431-
/* Footer */
432-
--docsearch-footer-background: #242526;
433-
--docsearch-key-gradient: linear-gradient(-26.5deg, #515151, #404040);
434-
435-
/* Shadows */
436-
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40,0,0 3px 8px 0 #000309;
437-
--docsearch-hit-shadow: none;
438-
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);
439-
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);
440-
}
441-
}

0 commit comments

Comments
 (0)