forked from
devins.page/devins.page
my website, hosted on wisp.place
chore: remove theme switcher and use catppuccin
it's annoying and hacky and broken so whatever
+210
-543
public/apple-touch-icon.png
public/apple-touch-icon.png
This is a binary file and will not be displayed.
+185
public/dp-giscus.css
+185
public/dp-giscus.css
···
1
+
main {
2
+
--font-family-sans: system-ui, sans-serif;
3
+
--font-family-monospace:
4
+
ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
5
+
"DejaVu Sans Mono", monospace;
6
+
}
7
+
8
+
a {
9
+
text-decoration: none;
10
+
}
11
+
12
+
a:hover {
13
+
text-decoration: underline;
14
+
}
15
+
16
+
/* a modified version of catppuccin's giscus theme for devins.page */
17
+
main {
18
+
--color-prettylights-syntax-comment: #8c8fa1;
19
+
--color-prettylights-syntax-constant: #1e66f5;
20
+
--color-prettylights-syntax-entity: #1e66f5;
21
+
--color-prettylights-syntax-storage-modifier-import: #fe640b;
22
+
--color-prettylights-syntax-entity-tag: #179299;
23
+
--color-prettylights-syntax-keyword: #ea76cb;
24
+
--color-prettylights-syntax-string: #40a02b;
25
+
--color-prettylights-syntax-variable: #fe640b;
26
+
--color-prettylights-syntax-invalid-illegal-text: #d20f39;
27
+
--color-prettylights-syntax-invalid-illegal-bg: rgb(210 15 57 / 15%);
28
+
--color-prettylights-syntax-markup-heading: #179299;
29
+
--color-prettylights-syntax-markup-italic: #df8e1d;
30
+
--color-prettylights-syntax-markup-bold: #df8e1d;
31
+
--color-prettylights-syntax-markup-deleted-text: #4c4f69;
32
+
--color-prettylights-syntax-markup-deleted-bg: rgb(210 15 57 / 40%);
33
+
--color-prettylights-syntax-markup-inserted-text: #4c4f69;
34
+
--color-prettylights-syntax-markup-inserted-bg: rgb(64 160 43 / 40%);
35
+
--color-prettylights-syntax-markup-changed-text: #4c4f69;
36
+
--color-prettylights-syntax-markup-changed-bg: rgb(223 142 29 / 40%);
37
+
--color-prettylights-syntax-markup-ignored-text: #4c4f69;
38
+
--color-btn-text: #4c4f69;
39
+
--color-btn-bg: #ccd0da;
40
+
--color-btn-border: #bcc0cc;
41
+
--color-btn-hover-bg: #bcc0cc;
42
+
--color-btn-hover-border: #acb0be;
43
+
--color-btn-active-bg: #acb0be;
44
+
--color-btn-selected-bg: #acb0be;
45
+
--color-btn-counter-bg: #acb0be;
46
+
--color-btn-outline-text: #8839ef;
47
+
--color-btn-shadow: 0 0 transparent;
48
+
--color-btn-inset-shadow: 0 0 transparent;
49
+
--color-btn-primary-text: #eff1f5;
50
+
--color-btn-primary-bg: #40a02b;
51
+
--color-btn-primary-border: transparent;
52
+
--color-btn-primary-shadow: 0 0 transparent;
53
+
--color-btn-primary-inset-shadow: 0 0 transparent;
54
+
--color-btn-primary-hover-bg: #50c836;
55
+
--color-btn-primary-hover-border: #50c836;
56
+
--color-btn-primary-selected-bg: #50c836;
57
+
--color-btn-primary-selected-shadow: 0 0 transparent;
58
+
--color-btn-primary-disabled-text: #dce0e8;
59
+
--color-btn-primary-disabled-bg: rgb(64 160 43 / 40%);
60
+
--color-btn-primary-disabled-border: transparent;
61
+
--color-action-list-item-default-hover-bg: #bcc0cc;
62
+
--color-segmented-control-bg: #acb0be;
63
+
--color-segmented-control-button-bg: #eff1f5;
64
+
--color-segmented-control-button-selected-border: #9ca0b0;
65
+
--color-fg-default: #4c4f69;
66
+
--color-fg-muted: #5c5f77;
67
+
--color-fg-subtle: #5c5f77;
68
+
--color-canvas-default: #eff1f5;
69
+
--color-canvas-overlay: #ccd0da;
70
+
--color-canvas-inset: #dce0e8;
71
+
--color-canvas-subtle: #e6e9ef;
72
+
--color-border-default: #bcc0cc;
73
+
--color-border-muted: #ccd0da;
74
+
--color-neutral-muted: rgb(156 160 176 / 20%);
75
+
--color-accent-fg: hsl(266deg 85% 55%);
76
+
--color-accent-emphasis: #8839ef;
77
+
--color-accent-muted: rgb(136 57 239 / 40%);
78
+
--color-accent-subtle: rgb(136 57 239 / 15%);
79
+
--color-success-fg: #40a02b;
80
+
--color-attention-fg: #fe640b;
81
+
--color-attention-muted: #8839ef;
82
+
--color-attention-subtle: rgb(136 57 239 / 15%);
83
+
--color-danger-fg: #d20f39;
84
+
--color-danger-muted: rgb(210 15 57 / 40%);
85
+
--color-danger-subtle: rgb(210 15 57 / 20%);
86
+
--color-primer-shadow-inset: 0 0 transparent;
87
+
--color-scale-gray-7: #bcc0cc;
88
+
--color-scale-blue-8: #0a4ed6;
89
+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
90
+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
91
+
}
92
+
93
+
main .gsc-comment-box-textarea::placeholder {
94
+
color: #6c6f85;
95
+
}
96
+
97
+
main .gsc-loading-image {
98
+
background-image: none;
99
+
}
100
+
101
+
@media (prefers-color-scheme: dark) {
102
+
main {
103
+
--color-prettylights-syntax-comment: #7f849c;
104
+
--color-prettylights-syntax-constant: #89b4fa;
105
+
--color-prettylights-syntax-entity: #89b4fa;
106
+
--color-prettylights-syntax-storage-modifier-import: #fab387;
107
+
--color-prettylights-syntax-entity-tag: #94e2d5;
108
+
--color-prettylights-syntax-keyword: #f5c2e7;
109
+
--color-prettylights-syntax-string: #a6e3a1;
110
+
--color-prettylights-syntax-variable: #fab387;
111
+
--color-prettylights-syntax-invalid-illegal-text: #f38ba8;
112
+
--color-prettylights-syntax-invalid-illegal-bg: rgb(243 139 168 / 15%);
113
+
--color-prettylights-syntax-markup-heading: #94e2d5;
114
+
--color-prettylights-syntax-markup-italic: #f9e2af;
115
+
--color-prettylights-syntax-markup-bold: #f9e2af;
116
+
--color-prettylights-syntax-markup-deleted-text: #cdd6f4;
117
+
--color-prettylights-syntax-markup-deleted-bg: rgb(243 139 168 / 40%);
118
+
--color-prettylights-syntax-markup-inserted-text: #cdd6f4;
119
+
--color-prettylights-syntax-markup-inserted-bg: rgb(166 227 161 / 40%);
120
+
--color-prettylights-syntax-markup-changed-text: #cdd6f4;
121
+
--color-prettylights-syntax-markup-changed-bg: rgb(249 226 175 / 40%);
122
+
--color-prettylights-syntax-markup-ignored-text: #cdd6f4;
123
+
--color-btn-text: #cdd6f4;
124
+
--color-btn-bg: #313244;
125
+
--color-btn-border: #45475a;
126
+
--color-btn-hover-bg: #45475a;
127
+
--color-btn-hover-border: #585b70;
128
+
--color-btn-active-bg: #585b70;
129
+
--color-btn-selected-bg: #585b70;
130
+
--color-btn-counter-bg: #585b70;
131
+
--color-btn-outline-text: #cba6f7;
132
+
--color-btn-shadow: 0 0 transparent;
133
+
--color-btn-inset-shadow: 0 0 transparent;
134
+
--color-btn-primary-text: #1e1e2e;
135
+
--color-btn-primary-bg: #a6e3a1;
136
+
--color-btn-primary-border: transparent;
137
+
--color-btn-primary-shadow: 0 0 transparent;
138
+
--color-btn-primary-inset-shadow: 0 0 transparent;
139
+
--color-btn-primary-hover-bg: #cbefc8;
140
+
--color-btn-primary-hover-border: #cbefc8;
141
+
--color-btn-primary-selected-bg: #cbefc8;
142
+
--color-btn-primary-selected-shadow: 0 0 transparent;
143
+
--color-btn-primary-disabled-text: #11111b;
144
+
--color-btn-primary-disabled-bg: rgb(166 227 161 / 40%);
145
+
--color-btn-primary-disabled-border: transparent;
146
+
--color-action-list-item-default-hover-bg: #45475a;
147
+
--color-segmented-control-bg: #585b70;
148
+
--color-segmented-control-button-bg: #1e1e2e;
149
+
--color-segmented-control-button-selected-border: #6c7086;
150
+
--color-fg-default: #cdd6f4;
151
+
--color-fg-muted: #bac2de;
152
+
--color-fg-subtle: #bac2de;
153
+
--color-canvas-default: #1e1e2e;
154
+
--color-canvas-overlay: #313244;
155
+
--color-canvas-inset: #11111b;
156
+
--color-canvas-subtle: #181825;
157
+
--color-border-default: #45475a;
158
+
--color-border-muted: #313244;
159
+
--color-neutral-muted: rgb(108 112 134 / 40%);
160
+
--color-accent-fg: #cba6f7;
161
+
--color-accent-emphasis: #cba6f7;
162
+
--color-accent-muted: rgb(203 166 247 / 40%);
163
+
--color-accent-subtle: rgb(203 166 247 / 15%);
164
+
--color-success-fg: #a6e3a1;
165
+
--color-attention-fg: #fab387;
166
+
--color-attention-muted: #cba6f7;
167
+
--color-attention-subtle: rgb(203 166 247 / 15%);
168
+
--color-danger-fg: #f38ba8;
169
+
--color-danger-muted: rgb(243 139 168 / 40%);
170
+
--color-danger-subtle: rgb(243 139 168 / 20%);
171
+
--color-primer-shadow-inset: 0 0 transparent;
172
+
--color-scale-gray-7: #45475a;
173
+
--color-scale-blue-8: #5895f8;
174
+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
175
+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
176
+
}
177
+
178
+
main .gsc-comment-box-textarea::placeholder {
179
+
color: #a6adc8;
180
+
}
181
+
182
+
main .gsc-loading-image {
183
+
background-image: none;
184
+
}
185
+
}
public/favicon.png
public/favicon.png
This is a binary file and will not be displayed.
+1
public/favicon.svg
+1
public/favicon.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 211 211" width="32" height="32"><g clip-path="url(#a)"><path fill="#F58A0D" stroke="#000" stroke-width="6" d="M323.115 471.308c52.196-13.863 118.79-33.147 160.013-47.287-10.362-19.056-35.239-62.767-51.855-85.161-20.771-27.994-88.489-19.582-98.947-18.4s-22.978-3.471-44.502-10.52-31.878-82.489-33.611-102.773-14.572-95.064-19.729-109.652c-5.156-14.587-26.959-45.498-31.507-50.673-3.977-4.525-18.1-12.745-24.102-14.343-6.711-1.785 1.083-35.393-.464-39.77-1.547-4.376-1.918-36.191-.464-39.77 1.454-3.577 11.397-6.218 12.851-9.795 2.681-6.597-4.125-11.67-10.128-13.267-12.374-3.293-26.918.766-33.859 4.206-6.941 3.439-8.302 14.97.701 17.366s6.003 1.597 8.065 7.432c2.063 5.835-2.722 23.064-2.63 31.018s-4.084 34.595-3.053 37.512c1.032 2.918-29.403 1.427-49.803 5.25s-37.283 9.902-41.739 12.681-8.488-.937-5.672-16.046c2.253-12.088 1.819-43.568 1.32-57.797-.828.22-.703-.451 6.426-4.898 8.91-5.558 9.85-10.595 8.302-14.97-1.547-4.377-16.037-6.911-26.495-5.73-10.458 1.183-15.429 2.503-21.338 8.86S19.017-35.146 23.05-31.43c3.226 2.973 8.519 3.588 12.52 4.653-4.146 29.292-13.123 89.016-15.862 93.573-3.424 5.697-19.303 22.832-28.001 36.16-8.698 13.329-18.06 33.52-22.567 74.61-4.767 43.46 2.977 69.953 6.084 94.127-3.142 1.367-14.003 4.996-32.311 8.582-22.886 4.483-35.076-14.619-54.208-30.282s-37.045-12.501-42.016-11.18-22.37 5.941-15.574 32.859 42.388 42.996 77.887 51.12c28.399 6.5 64.637-1.743 79.207-6.676 2.499 14.761 9.578 51.71 17.903 81.413 10.406 37.13 67.191 74.706 113.241 89.602s151.566-1.959 203.762-15.823Z"/><path fill="#000" d="M169.69 94.297c-1.922.405-3.889.73-7.273 2.889-2.338 1.49-2.757 3.161-2.653 4.083-.012.643.083.377 2.385 1.025 2.352.822 7.989-.862 11.78-1.869s7.175-3.165 6.768-4.317c-.325-.92-3.477-2.015-5.012-2.447-1.399-.048-4.066.23-5.995.636"/><path stroke="#000" stroke-width="6" d="M159.847 101.646a1.7 1.7 0 0 1-.083-.377m0 0c-.104-.922.315-2.592 2.653-4.084 3.384-2.158 5.351-2.483 7.273-2.888 1.929-.407 4.596-.684 5.995-.636 1.535.432 4.687 1.526 5.012 2.447.407 1.152-2.977 3.31-6.768 4.317s-9.428 2.691-11.78 1.869c-2.302-.648-2.397-.382-2.385-1.025Z"/><path fill="#000" stroke="#000" stroke-width="6" d="M38.045 128.947c-4.441 1.18-6.468 2.316-7.815 5.378-.594.609.969 1.365 3.095 1.883 2.657.646 13.759-2.302 15.542-4.128s3.567-3.652.91-4.299c-2.658-.646-7.292-.013-11.732 1.166Z"/><path stroke="#000" stroke-width="6" d="M84.018 129.502c11.129-.062 8.58.615 16.693-.093 8.112-.708 10.661-1.385 17.838-4.738 5.742-2.682 11.651-6.47 13.887-8.028"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h211v211H0z"/></clipPath></defs></svg>
-105
public/sc-giscus.css
-105
public/sc-giscus.css
···
1
-
:root {
2
-
--sc-prose-bd: rgba(0, 0, 0, 0.2);
3
-
--sc-prose-bg: rgba(0, 0, 0, 0.1);
4
-
}
5
-
@supports (color: light-dark(white, black)) {
6
-
:root {
7
-
--sc-prose-bd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
8
-
--sc-prose-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
9
-
}
10
-
}
11
-
12
-
main {
13
-
--color-prettylights-syntax-comment: #6e7781;
14
-
--color-prettylights-syntax-constant: #0550ae;
15
-
--color-prettylights-syntax-entity: #8250df;
16
-
--color-prettylights-syntax-storage-modifier-import: #24292f;
17
-
--color-prettylights-syntax-entity-tag: #116329;
18
-
--color-prettylights-syntax-keyword: #cf222e;
19
-
--color-prettylights-syntax-string: #0a3069;
20
-
--color-prettylights-syntax-variable: #953800;
21
-
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
22
-
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
23
-
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
24
-
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
25
-
--color-prettylights-syntax-carriage-return-bg: #cf222e;
26
-
--color-prettylights-syntax-string-regexp: #116329;
27
-
--color-prettylights-syntax-markup-list: #3b2300;
28
-
--color-prettylights-syntax-markup-heading: #0550ae;
29
-
--color-prettylights-syntax-markup-italic: #24292f;
30
-
--color-prettylights-syntax-markup-bold: #24292f;
31
-
--color-prettylights-syntax-markup-deleted-text: #82071e;
32
-
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
33
-
--color-prettylights-syntax-markup-inserted-text: #116329;
34
-
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
35
-
--color-prettylights-syntax-markup-changed-text: #953800;
36
-
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
37
-
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
38
-
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
39
-
--color-prettylights-syntax-meta-diff-range: #8250df;
40
-
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
41
-
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
42
-
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
43
-
}
44
-
45
-
@media (prefers-color-scheme: dark) {
46
-
main {
47
-
--color-prettylights-syntax-comment: #8b949e;
48
-
--color-prettylights-syntax-constant: #79c0ff;
49
-
--color-prettylights-syntax-entity: #d2a8ff;
50
-
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
51
-
--color-prettylights-syntax-entity-tag: #7ee787;
52
-
--color-prettylights-syntax-keyword: #ff7b72;
53
-
--color-prettylights-syntax-string: #a5d6ff;
54
-
--color-prettylights-syntax-variable: #ffa657;
55
-
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
56
-
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
57
-
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
58
-
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
59
-
--color-prettylights-syntax-carriage-return-bg: #b62324;
60
-
--color-prettylights-syntax-string-regexp: #7ee787;
61
-
--color-prettylights-syntax-markup-list: #f2cc60;
62
-
--color-prettylights-syntax-markup-heading: #1f6feb;
63
-
--color-prettylights-syntax-markup-italic: #c9d1d9;
64
-
--color-prettylights-syntax-markup-bold: #c9d1d9;
65
-
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
66
-
--color-prettylights-syntax-markup-deleted-bg: #67060c;
67
-
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
68
-
--color-prettylights-syntax-markup-inserted-bg: #033a16;
69
-
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
70
-
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
71
-
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
72
-
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
73
-
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
74
-
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
75
-
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
76
-
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
77
-
}
78
-
}
79
-
80
-
.gsc-main,
81
-
.gsc-comments {
82
-
gap: 1rem !important;
83
-
}
84
-
85
-
* {
86
-
border-radius: 0 !important;
87
-
border-color: var(--sc-prose-bd) !important;
88
-
}
89
-
90
-
.gsc-comment,
91
-
.gsc-comment-box,
92
-
.gsc-reactions-button,
93
-
.gsc-reactions-popover,
94
-
.BtnGroup-item--selected {
95
-
background-color: var(--sc-prose-bg) !important;
96
-
}
97
-
98
-
.BtnGroup-item .btn {
99
-
background-color: transparent !important;
100
-
}
101
-
102
-
main .gsc-loading-image {
103
-
background: none !important;
104
-
display: none !important;
105
-
}
+1
-1
src/components/Comments.astro
+1
-1
src/components/Comments.astro
···
14
14
script.setAttribute("data-reactions-enabled", "0");
15
15
script.setAttribute("data-emit-metadata", "1");
16
16
script.setAttribute("data-input-position", "bottom");
17
-
script.setAttribute("data-theme", "https://devins.page/sc-giscus.css");
17
+
script.setAttribute("data-theme", "https://devins.page/dp-giscus.css");
18
18
script.setAttribute("data-lang", "en");
19
19
script.setAttribute("data-loading", "lazy");
20
20
script.crossOrigin = "anonymous";
+2
-2
src/components/Header.astro
+2
-2
src/components/Header.astro
···
2
2
<nav>
3
3
<strong>devins.page:</strong>
4
4
<a href="/">home</a>,
5
-
<a href="/blog">blog</a>,
6
-
<a href="/rss.xml">rss</a>
5
+
<a href="/blog">blog</a>
7
6
</nav>
8
7
<nav style="text-align: right">
9
8
<strong>external:</strong>
10
9
<a href="mailto:devin@devins.page">email</a>,
11
10
<a href="https://github.com/intergrav">github</a>,
11
+
<a href="https://git.devins.page">forgejo</a>,
12
12
<a href="https://www.last.fm/user/devin_real">last.fm</a>
13
13
</nav>
14
14
</header>
-30
src/layouts/Layout.astro
-30
src/layouts/Layout.astro
···
24
24
<meta property="og:type" content="website" />
25
25
<meta property="og:url" content={Astro.url.pathname} />
26
26
27
-
<link
28
-
rel="icon"
29
-
type="image/png"
30
-
href="https://github.com/intergrav.png?size=64"
31
-
/>
32
27
<link rel="sitemap" href="/sitemap-index.xml" />
33
28
<link
34
29
rel="alternate"
···
38
33
/>
39
34
40
35
<ClientRouter />
41
-
<script is:inline>
42
-
(function () {
43
-
function applyTheme() {
44
-
const theme = localStorage.getItem("theme") || "default";
45
-
document.documentElement[
46
-
theme === "default" ? "removeAttribute" : "setAttribute"
47
-
]("data-theme", theme);
48
-
}
49
-
50
-
function init() {
51
-
const selector = document.getElementById("theme-selector");
52
-
if (selector) {
53
-
selector.value = localStorage.getItem("theme") || "default";
54
-
selector.onchange = () => {
55
-
localStorage.setItem("theme", selector.value);
56
-
applyTheme();
57
-
};
58
-
}
59
-
applyTheme();
60
-
}
61
-
62
-
init();
63
-
document.addEventListener("astro:page-load", init);
64
-
})();
65
-
</script>
66
36
</head>
67
37
<body class="prose">
68
38
<Header />
+18
-392
src/styles/global.css
+18
-392
src/styles/global.css
···
1
+
/* catppuccin latte */
1
2
:root {
2
-
--shiki-foreground: #24292f;
3
-
--shiki-background: var(--sc-prose-bg);
4
-
--shiki-token-constant: #0550ae;
5
-
--shiki-token-string: #0a3069;
6
-
--shiki-token-comment: #6e7781;
7
-
--shiki-token-keyword: #cf222e;
8
-
--shiki-token-parameter: #24292f;
9
-
--shiki-token-function: #8250df;
10
-
--shiki-token-string-expression: #0a3069;
11
-
--shiki-token-punctuation: #24292f;
12
-
--shiki-token-link: #0550ae;
3
+
--bg: #eff1f5; /* base */
4
+
--text: #4c4f69; /* text */
5
+
--accent: #fe640b; /* peach */
6
+
--sc-prose-bg: #e6e9ef; /* mantle */
7
+
--sc-prose-bd: #dce0e8; /* surface 0 */
13
8
}
14
9
10
+
/* catppuccin mocha */
15
11
@media (prefers-color-scheme: dark) {
16
12
:root {
17
-
--shiki-foreground: #e6edf3;
18
-
--shiki-background: var(--sc-prose-bg);
19
-
--shiki-token-constant: #79c0ff;
20
-
--shiki-token-string: #a5d6ff;
21
-
--shiki-token-comment: #8b949e;
22
-
--shiki-token-keyword: #ff7b72;
23
-
--shiki-token-parameter: #e6edf3;
24
-
--shiki-token-function: #d2a8ff;
25
-
--shiki-token-string-expression: #a5d6ff;
26
-
--shiki-token-punctuation: #e6edf3;
27
-
--shiki-token-link: #79c0ff;
28
-
}
29
-
}
30
-
31
-
[data-theme="catppuccin-mocha"] {
32
-
--bg: #1e1e2e; /* base */
33
-
--text: #cdd6f4; /* text */
34
-
--link: #89b4fa; /* blue */
35
-
--sc-prose-bg: #181825; /* mantle */
36
-
--sc-prose-bd: #313244; /* surface 0 */
37
-
/* shiki variables */
38
-
--shiki-foreground: #cdd6f4; /* text */
39
-
--shiki-background: #181825; /* mantle */
40
-
--shiki-token-constant: #cba6f7; /* mauve */
41
-
--shiki-token-string: #a6e3a1; /* green */
42
-
--shiki-token-comment: #6c7086; /* overlay0 */
43
-
--shiki-token-keyword: #f38ba8; /* pink */
44
-
--shiki-token-parameter: #cdd6f4; /* text */
45
-
--shiki-token-function: #89b4fa; /* blue */
46
-
--shiki-token-string-expression: #a6e3a1; /* green */
47
-
--shiki-token-punctuation: #cdd6f4; /* text */
48
-
--shiki-token-link: #89b4fa; /* blue */
49
-
}
50
-
51
-
[data-theme="catppuccin-macchiato"] {
52
-
--bg: #24273a; /* base */
53
-
--text: #cad3f5; /* text */
54
-
--link: #8aadf4; /* blue */
55
-
--sc-prose-bg: #1e2030; /* mantle */
56
-
--sc-prose-bd: #363a4f; /* surface 0 */
57
-
/* shiki variables */
58
-
--shiki-foreground: #cad3f5; /* text */
59
-
--shiki-background: #1e2030; /* mantle */
60
-
--shiki-token-constant: #c6a0f6; /* mauve */
61
-
--shiki-token-string: #a6da95; /* green */
62
-
--shiki-token-comment: #6e738d; /* overlay0 */
63
-
--shiki-token-keyword: #f5bde6; /* pink */
64
-
--shiki-token-parameter: #cad3f5; /* text */
65
-
--shiki-token-function: #8aadf4; /* blue */
66
-
--shiki-token-string-expression: #a6da95; /* green */
67
-
--shiki-token-punctuation: #cad3f5; /* text */
68
-
--shiki-token-link: #8aadf4; /* blue */
69
-
}
70
-
71
-
[data-theme="catppuccin-frappe"] {
72
-
--bg: #303446; /* base */
73
-
--text: #c6d0f5; /* text */
74
-
--link: #8caaee; /* blue */
75
-
--sc-prose-bg: #292c3c; /* mantle */
76
-
--sc-prose-bd: #414559; /* surface 0 */
77
-
/* shiki variables */
78
-
--shiki-foreground: #c6d0f5; /* text */
79
-
--shiki-background: #292c3c; /* mantle */
80
-
--shiki-token-constant: #ca9ee6; /* mauve */
81
-
--shiki-token-string: #a6d189; /* green */
82
-
--shiki-token-comment: #737994; /* overlay0 */
83
-
--shiki-token-keyword: #f4b8e4; /* pink */
84
-
--shiki-token-parameter: #c6d0f5; /* text */
85
-
--shiki-token-function: #8caaee; /* blue */
86
-
--shiki-token-string-expression: #a6d189; /* green */
87
-
--shiki-token-punctuation: #c6d0f5; /* text */
88
-
--shiki-token-link: #8caaee; /* blue */
89
-
}
90
-
91
-
[data-theme="gruvbox-hard"] {
92
-
--bg: #1d2021; /* bg0_h */
93
-
--text: #ebdbb2; /* fg */
94
-
--link: #fe8019; /* orange */
95
-
--sc-prose-bg: #32302f; /* bg1 */
96
-
--sc-prose-bd: #504945; /* bg2 */
97
-
/* shiki variables */
98
-
--shiki-foreground: #ebdbb2; /* fg */
99
-
--shiki-background: #32302f; /* bg1 */
100
-
--shiki-token-constant: #d3869b; /* purple */
101
-
--shiki-token-string: #b8bb26; /* green */
102
-
--shiki-token-comment: #928374; /* gray */
103
-
--shiki-token-keyword: #fb4934; /* red */
104
-
--shiki-token-parameter: #ebdbb2; /* fg */
105
-
--shiki-token-function: #83a598; /* blue */
106
-
--shiki-token-string-expression: #b8bb26; /* green */
107
-
--shiki-token-punctuation: #ebdbb2; /* fg */
108
-
--shiki-token-link: #fe8019; /* orange */
109
-
}
110
-
111
-
[data-theme="gruvbox-medium"] {
112
-
--bg: #282828; /* bg0 */
113
-
--text: #ebdbb2; /* fg */
114
-
--link: #fe8019; /* orange */
115
-
--sc-prose-bg: #3c3836; /* bg1 */
116
-
--sc-prose-bd: #504945; /* bg2 */
117
-
/* shiki variables */
118
-
--shiki-foreground: #ebdbb2; /* fg */
119
-
--shiki-background: #3c3836; /* bg1 */
120
-
--shiki-token-constant: #d3869b; /* purple */
121
-
--shiki-token-string: #b8bb26; /* green */
122
-
--shiki-token-comment: #928374; /* gray */
123
-
--shiki-token-keyword: #fb4934; /* red */
124
-
--shiki-token-parameter: #ebdbb2; /* fg */
125
-
--shiki-token-function: #83a598; /* blue */
126
-
--shiki-token-string-expression: #b8bb26; /* green */
127
-
--shiki-token-punctuation: #ebdbb2; /* fg */
128
-
--shiki-token-link: #fe8019; /* orange */
129
-
}
130
-
131
-
[data-theme="gruvbox-soft"] {
132
-
--bg: #32302f; /* bg0_s */
133
-
--text: #ebdbb2; /* fg */
134
-
--link: #fe8019; /* orange */
135
-
--sc-prose-bg: #3c3836; /* bg1 */
136
-
--sc-prose-bd: #504945; /* bg2 */
137
-
/* shiki variables */
138
-
--shiki-foreground: #ebdbb2; /* fg */
139
-
--shiki-background: #3c3836; /* bg1 */
140
-
--shiki-token-constant: #d3869b; /* purple */
141
-
--shiki-token-string: #b8bb26; /* green */
142
-
--shiki-token-comment: #928374; /* gray */
143
-
--shiki-token-keyword: #fb4934; /* red */
144
-
--shiki-token-parameter: #ebdbb2; /* fg */
145
-
--shiki-token-function: #83a598; /* blue */
146
-
--shiki-token-string-expression: #b8bb26; /* green */
147
-
--shiki-token-punctuation: #ebdbb2; /* fg */
148
-
--shiki-token-link: #fe8019; /* orange */
149
-
}
150
-
151
-
[data-theme="gruvbox-material-hard"] {
152
-
--bg: #1d2021; /* bg0_h */
153
-
--text: #d4be98; /* fg1 */
154
-
--link: #d8a657; /* yellow */
155
-
--sc-prose-bg: #32302f; /* bg1 */
156
-
--sc-prose-bd: #504945; /* bg2 */
157
-
/* shiki variables */
158
-
--shiki-foreground: #d4be98; /* fg1 */
159
-
--shiki-background: #32302f; /* bg1 */
160
-
--shiki-token-constant: #d3869b; /* purple */
161
-
--shiki-token-string: #a9b665; /* green */
162
-
--shiki-token-comment: #928374; /* gray */
163
-
--shiki-token-keyword: #ea6962; /* red */
164
-
--shiki-token-parameter: #d4be98; /* fg1 */
165
-
--shiki-token-function: #7daea3; /* aqua */
166
-
--shiki-token-string-expression: #a9b665; /* green */
167
-
--shiki-token-punctuation: #d4be98; /* fg1 */
168
-
--shiki-token-link: #d8a657; /* yellow */
169
-
}
170
-
171
-
[data-theme="gruvbox-material-medium"] {
172
-
--bg: #282828; /* bg0 */
173
-
--text: #d4be98; /* fg1 */
174
-
--link: #d8a657; /* yellow */
175
-
--sc-prose-bg: #3c3836; /* bg1 */
176
-
--sc-prose-bd: #504945; /* bg2 */
177
-
/* shiki variables */
178
-
--shiki-foreground: #d4be98; /* fg1 */
179
-
--shiki-background: #3c3836; /* bg1 */
180
-
--shiki-token-constant: #d3869b; /* purple */
181
-
--shiki-token-string: #a9b665; /* green */
182
-
--shiki-token-comment: #928374; /* gray */
183
-
--shiki-token-keyword: #ea6962; /* red */
184
-
--shiki-token-parameter: #d4be98; /* fg1 */
185
-
--shiki-token-function: #7daea3; /* aqua */
186
-
--shiki-token-string-expression: #a9b665; /* green */
187
-
--shiki-token-punctuation: #d4be98; /* fg1 */
188
-
--shiki-token-link: #d8a657; /* yellow */
189
-
}
190
-
191
-
[data-theme="gruvbox-material-soft"] {
192
-
--bg: #32302f; /* bg0_s */
193
-
--text: #d4be98; /* fg1 */
194
-
--link: #d8a657; /* yellow */
195
-
--sc-prose-bg: #3c3836; /* bg1 */
196
-
--sc-prose-bd: #504945; /* bg2 */
197
-
/* shiki variables */
198
-
--shiki-foreground: #d4be98; /* fg1 */
199
-
--shiki-background: #3c3836; /* bg1 */
200
-
--shiki-token-constant: #d3869b; /* purple */
201
-
--shiki-token-string: #a9b665; /* green */
202
-
--shiki-token-comment: #928374; /* gray */
203
-
--shiki-token-keyword: #ea6962; /* red */
204
-
--shiki-token-parameter: #d4be98; /* fg1 */
205
-
--shiki-token-function: #7daea3; /* aqua */
206
-
--shiki-token-string-expression: #a9b665; /* green */
207
-
--shiki-token-punctuation: #d4be98; /* fg1 */
208
-
--shiki-token-link: #d8a657; /* yellow */
209
-
}
210
-
211
-
[data-theme="solarized"] {
212
-
--bg: #002b36; /* base03 */
213
-
--text: #93a1a1; /* base1 */
214
-
--link: #268bd2; /* blue */
215
-
--sc-prose-bg: #073642; /* base02 */
216
-
--sc-prose-bd: #586e75; /* base01 */
217
-
/* shiki variables */
218
-
--shiki-foreground: #93a1a1; /* base1 */
219
-
--shiki-background: #073642; /* base02 */
220
-
--shiki-token-constant: #6c71c4; /* violet */
221
-
--shiki-token-string: #859900; /* green */
222
-
--shiki-token-comment: #586e75; /* base01 */
223
-
--shiki-token-keyword: #dc322f; /* red */
224
-
--shiki-token-parameter: #93a1a1; /* base1 */
225
-
--shiki-token-function: #268bd2; /* blue */
226
-
--shiki-token-string-expression: #859900; /* green */
227
-
--shiki-token-punctuation: #93a1a1; /* base1 */
228
-
--shiki-token-link: #268bd2; /* blue */
229
-
}
230
-
231
-
@media (prefers-color-scheme: light) {
232
-
[data-theme="catppuccin-mocha"],
233
-
[data-theme="catppuccin-macchiato"],
234
-
[data-theme="catppuccin-frappe"] {
235
-
--bg: #eff1f5; /* base */
236
-
--text: #4c4f69; /* text */
237
-
--link: #1e66f5; /* blue */
238
-
--sc-prose-bg: #e6e9ef; /* mantle */
239
-
--sc-prose-bd: #dce0e8; /* surface 0 */
240
-
/* shiki variables */
241
-
--shiki-foreground: #4c4f69; /* text */
242
-
--shiki-background: #e6e9ef; /* mantle */
243
-
--shiki-token-constant: #8839ef; /* mauve */
244
-
--shiki-token-string: #40a02b; /* green */
245
-
--shiki-token-comment: #acb0be; /* subtext0 */
246
-
--shiki-token-keyword: #d20f39; /* red */
247
-
--shiki-token-parameter: #4c4f69; /* text */
248
-
--shiki-token-function: #1e66f5; /* blue */
249
-
--shiki-token-string-expression: #40a02b; /* green */
250
-
--shiki-token-punctuation: #4c4f69; /* text */
251
-
--shiki-token-link: #1e66f5; /* blue */
252
-
}
253
-
254
-
[data-theme="gruvbox-hard"] {
255
-
--bg: #f9f5d7; /* bg0_h */
256
-
--text: #3c3836; /* fg */
257
-
--link: #af3a03; /* orange */
258
-
--sc-prose-bg: #ebdbb2; /* bg1 */
259
-
--sc-prose-bd: #d5c4a1; /* bg2 */
260
-
/* shiki variables */
261
-
--shiki-foreground: #3c3836; /* fg */
262
-
--shiki-background: #ebdbb2; /* bg1 */
263
-
--shiki-token-constant: #8f3f71; /* purple */
264
-
--shiki-token-string: #79740e; /* green */
265
-
--shiki-token-comment: #928374; /* gray */
266
-
--shiki-token-keyword: #9d0006; /* red */
267
-
--shiki-token-parameter: #3c3836; /* fg */
268
-
--shiki-token-function: #076678; /* blue */
269
-
--shiki-token-string-expression: #79740e; /* green */
270
-
--shiki-token-punctuation: #3c3836; /* fg */
271
-
--shiki-token-link: #af3a03; /* orange */
272
-
}
273
-
274
-
[data-theme="gruvbox-medium"] {
275
-
--bg: #fbf1c7; /* bg0 */
276
-
--text: #3c3836; /* fg */
277
-
--link: #af3a03; /* orange */
278
-
--sc-prose-bg: #f2e5bc; /* bg1 */
279
-
--sc-prose-bd: #ebdbb2; /* bg2 */
280
-
/* shiki variables */
281
-
--shiki-foreground: #3c3836; /* fg */
282
-
--shiki-background: #f2e5bc; /* bg1 */
283
-
--shiki-token-constant: #8f3f71; /* purple */
284
-
--shiki-token-string: #79740e; /* green */
285
-
--shiki-token-comment: #928374; /* gray */
286
-
--shiki-token-keyword: #9d0006; /* red */
287
-
--shiki-token-parameter: #3c3836; /* fg */
288
-
--shiki-token-function: #076678; /* blue */
289
-
--shiki-token-string-expression: #79740e; /* green */
290
-
--shiki-token-punctuation: #3c3836; /* fg */
291
-
--shiki-token-link: #af3a03; /* orange */
292
-
}
293
-
294
-
[data-theme="gruvbox-soft"] {
295
-
--bg: #f2e5bc; /* bg0_s */
296
-
--text: #3c3836; /* fg */
297
-
--link: #af3a03; /* orange */
298
-
--sc-prose-bg: #ebdbb2; /* bg1 */
299
-
--sc-prose-bd: #d5c4a1; /* bg2 */
300
-
/* shiki variables */
301
-
--shiki-foreground: #3c3836; /* fg */
302
-
--shiki-background: #ebdbb2; /* bg1 */
303
-
--shiki-token-constant: #8f3f71; /* purple */
304
-
--shiki-token-string: #79740e; /* green */
305
-
--shiki-token-comment: #928374; /* gray */
306
-
--shiki-token-keyword: #9d0006; /* red */
307
-
--shiki-token-parameter: #3c3836; /* fg */
308
-
--shiki-token-function: #076678; /* blue */
309
-
--shiki-token-string-expression: #79740e; /* green */
310
-
--shiki-token-punctuation: #3c3836; /* fg */
311
-
--shiki-token-link: #af3a03; /* orange */
312
-
}
313
-
314
-
[data-theme="gruvbox-material-hard"] {
315
-
--bg: #f9f5d7; /* bg0_h */
316
-
--text: #654735; /* fg1 */
317
-
--link: #b57614; /* yellow */
318
-
--sc-prose-bg: #ebdbb2; /* bg1 */
319
-
--sc-prose-bd: #d5c4a1; /* bg2 */
320
-
/* shiki variables */
321
-
--shiki-foreground: #654735; /* fg1 */
322
-
--shiki-background: #ebdbb2; /* bg1 */
323
-
--shiki-token-constant: #8f3f71; /* purple */
324
-
--shiki-token-string: #6f8352; /* green */
325
-
--shiki-token-comment: #928374; /* gray */
326
-
--shiki-token-keyword: #c14a4a; /* red */
327
-
--shiki-token-parameter: #654735; /* fg1 */
328
-
--shiki-token-function: #45707a; /* aqua */
329
-
--shiki-token-string-expression: #6f8352; /* green */
330
-
--shiki-token-punctuation: #654735; /* fg1 */
331
-
--shiki-token-link: #b57614; /* yellow */
332
-
}
333
-
334
-
[data-theme="gruvbox-material-medium"] {
335
-
--bg: #fbf1c7; /* bg0 */
336
-
--text: #654735; /* fg1 */
337
-
--link: #b57614; /* yellow */
338
-
--sc-prose-bg: #f2e5bc; /* bg1 */
339
-
--sc-prose-bd: #ebdbb2; /* bg2 */
340
-
/* shiki variables */
341
-
--shiki-foreground: #654735; /* fg1 */
342
-
--shiki-background: #f2e5bc; /* bg1 */
343
-
--shiki-token-constant: #8f3f71; /* purple */
344
-
--shiki-token-string: #6f8352; /* green */
345
-
--shiki-token-comment: #928374; /* gray */
346
-
--shiki-token-keyword: #c14a4a; /* red */
347
-
--shiki-token-parameter: #654735; /* fg1 */
348
-
--shiki-token-function: #45707a; /* aqua */
349
-
--shiki-token-string-expression: #6f8352; /* green */
350
-
--shiki-token-punctuation: #654735; /* fg1 */
351
-
--shiki-token-link: #b57614; /* yellow */
352
-
}
353
-
354
-
[data-theme="gruvbox-material-soft"] {
355
-
--bg: #f2e5bc; /* bg0_s */
356
-
--text: #654735; /* fg1 */
357
-
--link: #b57614; /* yellow */
358
-
--sc-prose-bg: #ebdbb2; /* bg1 */
359
-
--sc-prose-bd: #d5c4a1; /* bg2 */
360
-
/* shiki variables */
361
-
--shiki-foreground: #654735; /* fg1 */
362
-
--shiki-background: #ebdbb2; /* bg1 */
363
-
--shiki-token-constant: #8f3f71; /* purple */
364
-
--shiki-token-string: #6f8352; /* green */
365
-
--shiki-token-comment: #928374; /* gray */
366
-
--shiki-token-keyword: #c14a4a; /* red */
367
-
--shiki-token-parameter: #654735; /* fg1 */
368
-
--shiki-token-function: #45707a; /* aqua */
369
-
--shiki-token-string-expression: #6f8352; /* green */
370
-
--shiki-token-punctuation: #654735; /* fg1 */
371
-
--shiki-token-link: #b57614; /* yellow */
372
-
}
373
-
374
-
[data-theme="solarized"] {
375
-
--bg: #fdf6e3; /* base3 */
376
-
--text: #586e75; /* base01 */
377
-
--link: #268bd2; /* blue */
378
-
--sc-prose-bg: #eee8d5; /* base2 */
379
-
--sc-prose-bd: #93a1a1; /* base1 */
380
-
/* shiki variables */
381
-
--shiki-foreground: #586e75; /* base01 */
382
-
--shiki-background: #eee8d5; /* base2 */
383
-
--shiki-token-constant: #6c71c4; /* violet */
384
-
--shiki-token-string: #859900; /* green */
385
-
--shiki-token-comment: #93a1a1; /* base1 */
386
-
--shiki-token-keyword: #dc322f; /* red */
387
-
--shiki-token-parameter: #586e75; /* base01 */
388
-
--shiki-token-function: #268bd2; /* blue */
389
-
--shiki-token-string-expression: #859900; /* green */
390
-
--shiki-token-punctuation: #586e75; /* base01 */
391
-
--shiki-token-link: #268bd2; /* blue */
13
+
--bg: #1e1e2e; /* base */
14
+
--text: #cdd6f4; /* text */
15
+
--accent: #fab387; /* peach */
16
+
--sc-prose-bg: #181825; /* mantle */
17
+
--sc-prose-bd: #313244; /* surface 0 */
392
18
}
393
19
}
394
20
395
-
html[data-theme] {
21
+
body {
396
22
background-color: var(--bg);
397
23
color: var(--text);
398
24
}
399
25
400
-
html[data-theme] a {
401
-
color: var(--link);
26
+
a {
27
+
color: var(--accent);
402
28
text-decoration: none;
403
29
}
404
30
405
-
html[data-theme] a:hover {
406
-
color: var(--link);
31
+
a:hover {
32
+
color: var(--accent);
407
33
text-decoration: underline;
408
34
}
409
35
410
-
html[data-theme] hr {
36
+
hr {
411
37
border-color: var(--sc-prose-bd);
412
38
border-style: solid;
413
39
}