Skip to content

Commit c3a38d0

Browse files
giladgdgiladgd
committed
feat: add dark theme
1 parent 9e18837 commit c3a38d0

File tree

3 files changed

+586
-7
lines changed

3 files changed

+586
-7
lines changed

‎script/component/MainPage.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const MainPage = {
22
template: `<div>
33
<nav class="navbar navbar-expand navbar-light">
44
<!--<img src="image/logo-large.png" width="10%" height="10%">-->
5-
<a class="navbar-brand" href="/"><span style="color: #E83524">Type</span><span style="color: #000">ORM</span></a>
5+
<a class="navbar-brand" href="/"><span class="brand-type">Type</span><span class="brand-orm">ORM</span></a>
66
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
77
<span class="navbar-toggler-icon"></span>
88
</button>
@@ -38,17 +38,17 @@ const MainPage = {
3838
</li>
3939
<li class="nav-item">
4040
<a class="nav-link" href="https://github.com/typeorm/typeorm" title="GitHub">
41-
<svg aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#181717">
41+
<svg class="svgIcon" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
4242
<title id="simpleicons-github-icon">GitHub</title>
4343
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
4444
</svg>
4545
</a>
4646
</li>
4747
<li class="nav-item dropdown language">
4848
<a class="nav-link" href="#" title="Language" id="lang-choose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
49-
<svg 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">
49+
<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">
5050
<title id="simpleicons-language-icon">Language</title>
51-
<path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512c0 262.4 198.4 473.6 448 505.6 12.8 0 32 6.4 51.2 6.4h19.2c281.6-6.4 505.6-230.4 505.6-512z m-70.4 6.4c0-25.6-6.4-51.2-12.8-76.8v-25.6c6.4 32 12.8 57.6 12.8 89.6v12.8zM70.4 512c0-32 6.4-64 6.4-89.6 19.2 19.2 64 19.2 76.8-12.8 19.2 12.8 44.8 12.8 44.8 38.4 0 76.8 0 160 70.4 160 0 0 38.4 12.8 57.6 57.6 6.4 12.8 32 0 57.6 0 12.8 0 0 19.2 0 70.4 0 44.8 102.4 121.6 102.4 121.6 0 32 0 57.6 6.4 76.8-25.6 0-44.8 0-57.6 6.4-204.8-32-364.8-211.2-364.8-428.8z m550.4 422.4c0-12.8-12.8-19.2-32-12.8 12.8-64 19.2-96 51.2-121.6 44.8-38.4 6.4-83.2-25.6-76.8-25.6 6.4-12.8-32-32-32-25.6 0-51.2-51.2-89.6-64-19.2-6.4-38.4-32-64-32s-57.6 19.2-57.6 6.4c0-51.2-6.4-89.6-6.4-108.8 0-12.8-6.4-6.4 25.6-6.4 19.2 0 6.4-38.4 25.6-38.4 19.2 0 57.6 19.2 70.4 6.4 12.8-6.4 70.4 166.4 70.4 25.6 0-19.2-6.4-44.8 0-57.6 32-57.6 64-108.8 64-115.2 0-6.4-32-6.4-57.6 0-6.4 0 0 19.2-12.8 19.2-44.8 12.8-89.6-12.8-76.8-32 12.8-25.6 70.4-12.8 70.4-57.6 0-25.6 6.4-57.6 6.4-76.8 64 12.8 57.6-83.2-38.4-89.6 192 0 352 121.6 409.6 294.4 0 0-6.4-6.4-12.8-6.4-25.6-70.4-96-19.2-76.8 44.8-128 96-96 166.4-51.2 204.8 19.2 19.2 44.8 51.2 57.6 70.4-12.8 44.8 51.2 25.6 89.6-44.8-38.4 147.2-160 262.4-307.2 300.8z" fill="#2c2c2c" p-id="1930"></path>
51+
<path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512c0 262.4 198.4 473.6 448 505.6 12.8 0 32 6.4 51.2 6.4h19.2c281.6-6.4 505.6-230.4 505.6-512z m-70.4 6.4c0-25.6-6.4-51.2-12.8-76.8v-25.6c6.4 32 12.8 57.6 12.8 89.6v12.8zM70.4 512c0-32 6.4-64 6.4-89.6 19.2 19.2 64 19.2 76.8-12.8 19.2 12.8 44.8 12.8 44.8 38.4 0 76.8 0 160 70.4 160 0 0 38.4 12.8 57.6 57.6 6.4 12.8 32 0 57.6 0 12.8 0 0 19.2 0 70.4 0 44.8 102.4 121.6 102.4 121.6 0 32 0 57.6 6.4 76.8-25.6 0-44.8 0-57.6 6.4-204.8-32-364.8-211.2-364.8-428.8z m550.4 422.4c0-12.8-12.8-19.2-32-12.8 12.8-64 19.2-96 51.2-121.6 44.8-38.4 6.4-83.2-25.6-76.8-25.6 6.4-12.8-32-32-32-25.6 0-51.2-51.2-89.6-64-19.2-6.4-38.4-32-64-32s-57.6 19.2-57.6 6.4c0-51.2-6.4-89.6-6.4-108.8 0-12.8-6.4-6.4 25.6-6.4 19.2 0 6.4-38.4 25.6-38.4 19.2 0 57.6 19.2 70.4 6.4 12.8-6.4 70.4 166.4 70.4 25.6 0-19.2-6.4-44.8 0-57.6 32-57.6 64-108.8 64-115.2 0-6.4-32-6.4-57.6 0-6.4 0 0 19.2-12.8 19.2-44.8 12.8-89.6-12.8-76.8-32 12.8-25.6 70.4-12.8 70.4-57.6 0-25.6 6.4-57.6 6.4-76.8 64 12.8 57.6-83.2-38.4-89.6 192 0 352 121.6 409.6 294.4 0 0-6.4-6.4-12.8-6.4-25.6-70.4-96-19.2-76.8 44.8-128 96-96 166.4-51.2 204.8 19.2 19.2 44.8 51.2 57.6 70.4-12.8 44.8 51.2 25.6 89.6-44.8-38.4 147.2-160 262.4-307.2 300.8z" p-id="1930"></path>
5252
</svg>
5353
</a>
5454
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="lang-choose">

‎style/app.css

+157-3
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,28 @@ h2, h3 {
4343
border-bottom: 1px solid #EEE;
4444
height: 60px;
4545
}
46+
.brand-type {
47+
color: #E83524;
48+
}
49+
.brand-orm {
50+
color: #000;
51+
}
52+
.svgIcon {
53+
fill: #2c2c2c;
54+
}
4655
@supports (-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px)) {
4756
.navbar {
4857
background-color: rgba(255, 255, 255, 0.6);
4958
-webkit-backdrop-filter: blur(6px);
5059
backdrop-filter: blur(6px);
5160
}
61+
62+
@media (prefers-color-scheme: dark) {
63+
.navbar {
64+
background-color: rgba(36, 37, 38, 0.6);
65+
border-bottom: 1px solid #1b1b1b;
66+
}
67+
}
5268
}
5369
.document h1+ul, .document h1+ul ul {
5470
list-style: none;
@@ -153,14 +169,14 @@ ol {
153169
cursor: pointer;
154170
}
155171

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

0 commit comments

Comments
 (0)