Skip to content

Commit 56f6c2a

Browse files
XecadesXecades
committed
feat: add dark mode
1 parent c3f2522 commit 56f6c2a

File tree

18 files changed

+134
-113
lines changed

18 files changed

+134
-113
lines changed

‎src/assets/css/global.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $monospace = "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", mono
2424
// Colors
2525
$theme-color = #60a5fa;
2626
$text-color = #181818;
27-
$background-color = #fefefe;
27+
$text-color-d = #d1d5db;
2828

2929
// SVG
3030
$checkbox-svg = 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>';

‎src/assets/css/main.styl‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@import "https://fonts.cdnfonts.com/css/libertinus-serif";
33
@import "./global.styl";
44

5+
schemer(--body-background-color, #fefefe, #1a1b1c);
6+
schemer(--body-text-color, $text-color, $text-color-d);
7+
58
// Overlay Scrollbar Theme
69
.os-theme-dark .os-scrollbar-handle
710
scheme(--os-handle-bg, alpha(black, 0.44), alpha(white, 0.44));
@@ -11,7 +14,7 @@
1114
// Global Fonts
1215
body
1316
font-family: $font-family;
14-
color: $text-color;
17+
color: var(--body-text-color);
1518

1619
// Tap / Selection / Outline Effects
1720
*
@@ -25,7 +28,7 @@ body
2528

2629
// Background Color
2730
body
28-
background-color: $background-color;
31+
background-color: var(--body-background-color);
2932

3033
// Scrollbar Flickering Prevention
3134
html

‎src/assets/css/markdown.styl‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,28 @@
44

55
dualr(--block-extend, -0.5rem, -1rem);
66

7-
schemer(--hr-color, lighten(black, 82%), cyan);
8-
schemer(--heading-color, lighten($text-color, 10%), cyan);
9-
schemer(--bold-color, #8f6ce4, cyan);
7+
schemer(--hr-color, lighten(black, 82%), lighten(black, 50%));
8+
schemer(--heading-color, lighten($text-color, 10%), darken($text-color-d, 7%));
9+
schemer(--bold-color, #8f6ce4, lighten(#8f6ce4, 10%));
1010

11-
schemer(--checkbox-background, none, cyan);
12-
schemer(--checkbox-background-checked, #56a0ef, cyan);
11+
schemer(--checkbox-background, none, #cecece);
12+
schemer(--checkbox-background-checked, #56a0ef, #2f77c4);
1313

14-
schemer(--blockquote-border, #d7d9da, cyan);
15-
schemer(--blockquote-background, #f2f2f2b5, cyan);
16-
schemer(--blockquote-text, lighten($text-color, 28%), cyan);
14+
schemer(--blockquote-border, #d7d9da, #676869);
15+
schemer(--blockquote-background, #f2f2f2b5, #242424b5);
16+
schemer(--blockquote-text, lighten($text-color, 28%), darken($text-color-d, 10%));
1717

18-
schemer(--inline-code-background, #edeeeedb, cyan);
18+
schemer(--inline-code-background, #edeeeedb, #272828db);
1919

20-
schemer(--block-code-background, #fafafa, cyan);
21-
schemer(--block-code-border, #ededed, cyan);
22-
schemer(--block-code-text, #383a42, cyan);
20+
schemer(--block-code-background, #fafafa, #1b1c1d);
21+
schemer(--block-code-border, #ededed, #343434);
22+
schemer(--block-code-text, #383a42, #c1c4d1);
2323

24-
schemer(--table-border, lighten(black, 89%), cyan);
25-
schemer(--table-hover-background, alpha(black, 0.04), cyan);
24+
schemer(--table-border, lighten(black, 89%), lighten(black, 25%));
25+
schemer(--table-hover-background, alpha(black, 0.04), alpha(white, 0.04));
2626

27-
schemer(--quote-color, lighten($text-color, 24%), cyan);
28-
schemer(--quote-background-opacity, 0.35, 1);
27+
schemer(--quote-color, lighten($text-color, 24%), darken($text-color-d, 5%));
28+
schemer(--quote-background-opacity, 0.35, 0.5);
2929
schemer(--quote-background-invert, 0, 1);
3030

3131
.markdown
@@ -311,7 +311,7 @@ schemer(--quote-background-invert, 0, 1);
311311
$types = "default" "info" "success" "warning" "danger"
312312
$themes = #777777 #0070f3 #0fdb9d #f5a623 #ee0000
313313
$alphas = 0.07 0.57 0.11 0.20
314-
$dkAlphas = 0.11 0.9 0.22 0.22
314+
$dkAlphas = 0.14 0.9 0.14 0.22
315315

316316
for $c, $i in $themes
317317
.colors.{$types[$i]}

‎src/assets/ts/rightbar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export type HeaderRef = MarkdownHeaderJsx & {
1313

1414
const width_preset: string[] = ["50px", "40px", "30px", "20px", "13px"];
1515
const indent_preset: string[] = ["0rem", "1rem", "1.7rem", "2.3rem", "2.8rem"];
16-
const opacity_preset: string[] = ["1", "0.6", "0.6", "0.6", "0.6"];
16+
const opacity_preset: string[] = ["1", "0.7", "0.7", "0.7", "0.7"];
1717

1818
/**
1919
* Determine rightbar status (i.e. whether to display or not).

‎src/components/Comment.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ onMounted(async () => {
2626
@import "../assets/css/global.styl";
2727
2828
#comment
29-
scheme(--border-color, #eaeaea, #2c2c2c);
30-
scheme(--input-color, #666, #b0b1b5);
29+
scheme(--border-color, #eaeaea, #363636);
30+
scheme(--input-color, #666666, #b0b1b5);
3131
scheme(--owo-background-color, #fff, #1f1f1f);
32+
scheme(--owo-color, #4a4a4a, #d3d3d3);
3233
3334
margin: 0 var(--margin-lr) 7rem;
3435
3536
.OwO .OwO-body
37+
color: var(--owo-color);
3638
background-color: var(--owo-background-color);
3739
3840
.tk-extras
@@ -133,4 +135,8 @@ onMounted(async () => {
133135
134136
a
135137
text-decoration: none;
138+
139+
@media (prefers-color-scheme: dark)
140+
#comment .tk-input textarea
141+
background: none !important;
136142
</style>

‎src/components/Content.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,16 @@ onUpdated(registerAnchor);
9999
<style scoped lang="stylus">
100100
@import "../assets/css/global.styl";
101101
102-
$header-color = lighten($text-color, 23%);
102+
#content
103+
dual(--width, 740px, 100%);
104+
dual(--margin-lr, 3rem, 2.5rem);
105+
dual(--margin-top, 4rem, 3rem);
106+
dual(--margin-bottom, 4rem, 3rem);
107+
dual(--header-size, 2.2rem, 2rem);
108+
dual(--header-line-height, 3.5rem, 3rem);
103109
104-
dualr(--width, 740px, 100%)
105-
dualr(--margin-lr, 3rem, 2.5rem)
106-
dualr(--margin-top, 4rem, 3rem)
107-
dualr(--margin-bottom, 4rem, 3rem)
108-
dualr(--header-size, 2.2rem, 2rem)
109-
dualr(--header-line-height, 3.5rem, 3rem)
110+
scheme(--header-color, lighten($text-color, 23%), darken($text-color-d, 3%));
110111
111-
#content
112112
width: var(--width);
113113
margin: 0 auto;
114114
z-index: 10;
@@ -121,7 +121,7 @@ header
121121
122122
h1
123123
font-size: var(--header-size);
124-
color: $header-color;
124+
color: var(--header-color);
125125
letter-spacing: 0.05rem;
126126
line-height: var(--header-line-height);
127127
font-weight: 600;

‎src/components/LeftBar.vue‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -202,13 +202,11 @@ $nav-width = 42px;
202202
$nav-height = 40px;
203203
$nav-gap = 2px;
204204
205-
$nav-color = lighten($text-color, 45%);
206205
$nav-hover-color = $theme-color;
207206
$nav-hover-background-color = alpha($theme-color, 12%);
208207
209-
$item-color = lighten($text-color, 10%);
210208
$item-active-color = $theme-color;
211-
$item-underline-color = lighten($theme-color, 50%);
209+
$item-underline-color = alpha($theme-color, 65%);
212210
$item-hover-background-color = alpha($theme-color, 12%);
213211
214212
// TOC
@@ -219,8 +217,6 @@ $toc-width = 240px;
219217
$toc-title-height = 1.45rem;
220218
$toc-title-indent = 0.5rem;
221219
222-
$toc-color = lighten($text-color, 30%);
223-
224220
// Search
225221
$search-scale = 0.99;
226222
@@ -232,6 +228,13 @@ $width = $toc-offset-left + $toc-width;
232228
$height = 100vh - $offset-top * 2;
233229
234230
#left
231+
// Nav
232+
scheme(--nav-color, lighten($text-color, 45%), darken($text-color-d, 15%));
233+
scheme(--item-color, lighten($text-color, 10%), darken($text-color-d, 8%));
234+
235+
// TOC
236+
scheme(--toc-color, lighten($text-color, 30%), darken($text-color-d, 5%));
237+
235238
position: fixed;
236239
left: $offset-left;
237240
top: $offset-top;
@@ -251,7 +254,7 @@ $height = 100vh - $offset-top * 2;
251254
font-size: 1.2rem;
252255
border-radius: 3px;
253256
transition: background-color 0.07s, color 0.08s;
254-
color: $nav-color;
257+
color: var(--nav-color);
255258
cursor: pointer;
256259
display: block;
257260
@@ -276,7 +279,7 @@ $height = 100vh - $offset-top * 2;
276279
line-height: $nav-height;
277280
font-size: 0.94rem;
278281
padding: 0 12px;
279-
color: $item-color;
282+
color: var(--item-color);
280283
text-decoration-color: transparent;
281284
border-radius: 3px;
282285
transition: background-color 0.07s, opacity 0.08s, text-decoration-color 0.08s;
@@ -302,7 +305,7 @@ $height = 100vh - $offset-top * 2;
302305
padding: 15px 0;
303306
304307
.content .title
305-
color: $toc-color;
308+
color: var(--toc-color);
306309
font-size: 0.95rem;
307310
line-height: $toc-title-height;
308311
margin-bottom: 5px;

‎src/components/Metadata.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ defineProps<{
88
</script>
99

1010
<template>
11-
<div class="metadata">
11+
<div id="metadata">
1212
<span class="breadcrumb">
1313
<template v-for="(item, index) in breadcrumb" :key="index">
1414
<router-link :to="item.link" class="text">
@@ -28,10 +28,11 @@ defineProps<{
2828
$header-main-spacing = 2.3rem;
2929
$height = 1.5rem;
3030
31-
$breadcrumb-color = lighten($text-color, 30%);
3231
$breadcrumb-hover-color = $theme-color;
3332
34-
.metadata
33+
#metadata
34+
scheme(--breadcrumb-color, lighten($text-color, 30%), darken($text-color-d, 25%));
35+
3536
margin: 0rem var(--margin-lr) $header-main-spacing;
3637
user-select: none;
3738
@@ -43,7 +44,7 @@ $breadcrumb-hover-color = $theme-color;
4344
4445
.icon, .text
4546
display: inline-block;
46-
color: $breadcrumb-color;
47+
color: var(--breadcrumb-color);
4748
4849
.icon
4950
width: 20px;

‎src/components/RightBar.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,16 @@ $toc-offset-top = 11rem - $offset-top;
102102
$toc-translate-offset = 7px;
103103
104104
$detail-title-indent = 0.5rem;
105-
$detail-color = lighten($text-color, 10%);
106-
$detail-color-passed = lighten($text-color, 55%);
107105
108106
$bar-height = 4px;
109107
$bar-padding = 4px;
110-
$bar-background-color = lighten(black, 88%);
111-
$bar-active-background-color = lighten(black, 68%);
112108
113109
#right
110+
scheme(--detail-color, lighten($text-color, 10%), $text-color-d);
111+
scheme(--detail-color-passed, lighten($text-color, 55%), darken($text-color-d, 50%));
112+
scheme(--bar-background-color, lighten(black, 88%), lighten(black, 28%));
113+
scheme(--bar-active-background-color, lighten(black, 68%), lighten(black, 65%));
114+
114115
position: fixed;
115116
width: $width;
116117
height: $height;
@@ -146,28 +147,28 @@ $bar-active-background-color = lighten(black, 68%);
146147
.bar
147148
margin-top: $bar-padding;
148149
margin-left: auto;
149-
background-color: $bar-background-color;
150+
background-color: var(--bar-background-color);
150151
border-radius: 4px;
151152
height: $bar-height;
152153
transition: background-color 0.1s;
153154
154155
&.active
155-
background-color: $bar-active-background-color;
156+
background-color: var(--bar-active-background-color);
156157
157158
.detail
158159
line-height: 1.6rem;
159160
transition: color 0.1s;
160161
margin-left: auto;
161162
display: inline-block;
162-
color: $detail-color;
163+
color: var(--detail-color);
163164
font-size: 0.95rem;
164165
position: relative;
165166
166167
&.active
167168
color: $theme-color;
168169
169170
&.passed
170-
color: $detail-color-passed;
171+
color: var(--detail-color-passed);
171172
172173
.sign
173174
color: $theme-color;

0 commit comments

Comments
 (0)