this repo has no description
Add custom colour scheme
+119
-20
+46
src/config.ts
+46
src/config.ts
···
66
66
clouds: "#E5D4ED",
67
67
stars: "#ffffff",
68
68
},
69
+
70
+
catppuccin: {
71
+
latte: {
72
+
background: {
73
+
main: "#eff1f5", // base
74
+
secondary: "#dce0e8", // crust
75
+
},
76
+
typography: {
77
+
body: "#4c4f69", // text
78
+
heading: "#4c4f69", // text
79
+
subheading: "#5c5f77", // subtext 1
80
+
url: "#1e66f5", // blue
81
+
selection: "#7c7f9333", // overlay 2 (.2/.3 opacity)
82
+
},
83
+
rainbow: [
84
+
"#d20f39", // red
85
+
"#fe640b", // peach
86
+
"#df8e1d", // yellow
87
+
"#40a02b", // green
88
+
"#209fb5", // saphire
89
+
"#7287fd", // lavender
90
+
],
91
+
},
92
+
93
+
frappe: {
94
+
background: {
95
+
main: "#303446", // base
96
+
secondary: "#232634", // crust
97
+
},
98
+
typography: {
99
+
body: "#c6d0f5", // text
100
+
heading: "#c6d0f5", // text
101
+
subheading: "#b5bfe2", // subtext 1
102
+
url: "#8caaee", // blue
103
+
selection: "#949cbb33", // overlay 2 (.2/.3 opacity)
104
+
},
105
+
rainbow: [
106
+
"#e78284", // red
107
+
"#ef9f76", // peach
108
+
"#e5c890", // yellow
109
+
"#a6d189", // green
110
+
"#85c1dc", // saphire
111
+
"#babbf1", // lavender
112
+
],
113
+
},
114
+
},
69
115
},
70
116
} as const;
71
117
+73
-20
src/pages/blog/[id].astro
+73
-20
src/pages/blog/[id].astro
···
5
5
import Sun from "@/assets/sun.svg";
6
6
import Moon from "@/assets/moon.svg";
7
7
8
+
import { blog } from "@/config";
9
+
const {
10
+
catppuccin: { latte, frappe },
11
+
} = blog.palette;
12
+
8
13
import { render } from "astro:content";
9
14
import { getEntry } from "astro:content";
10
15
import { parse } from "node:path";
···
290
295
<!-- page styles -->
291
296
<style>
292
297
:root {
293
-
--dark-bg: #27232c;
294
-
--light-bg: #ffffff;
298
+
color-scheme: light dark;
295
299
296
-
--dark-text: #ffffff;
297
-
--light-text: #000000;
298
-
}
300
+
--bg-main: light-dark(var(--_latte-bg-main), var(--_frappe-bg-main));
299
301
300
-
/* set colours based on system colour scheme */
301
-
:root:has([data-colour-scheme-nojs]) {
302
-
--bg: light-dark(var(--light-bg), var(--dark-bg));
303
-
--text: light-dark(var(--light-text), var(--dark-text));
304
-
}
302
+
--bg-secondary: light-dark(
303
+
var(--_latte-bg-secondary),
304
+
var(--_frappe-bg-secondary)
305
+
);
305
306
306
-
:root:not(:has([data-nojs])) {
307
-
--bg: gray;
307
+
--typo-body: light-dark(var(--_latte-typo-body), var(--_frappe-typo-body));
308
308
309
-
&:has([data-mode="light"]) {
310
-
--bg: var(--light-bg);
311
-
--text: var(--light-text);
312
-
}
309
+
--typo-body-inv: light-dark(
310
+
var(--_frappe-typo-body),
311
+
var(--_latte-typo-body)
312
+
);
313
313
314
-
&:has([data-mode="dark"]) {
315
-
--bg: var(--dark-bg);
316
-
--text: var(--dark-text);
317
-
}
314
+
--typo-heading: light-dark(
315
+
var(--_latte-typo-heading),
316
+
var(--_frappe-typo-heading)
317
+
);
318
+
319
+
--typo-subheading: light-dark(
320
+
var(--_latte-typo-subheading),
321
+
var(--_frappe-typo-subheading)
322
+
);
323
+
324
+
--typo-url: light-dark(var(--_latte-typo-url), var(--_frappe-typo-url));
325
+
326
+
--typo-selection: light-dark(
327
+
var(--_latte-typo-selection),
328
+
var(--_frappe-typo-selection)
329
+
);
330
+
331
+
--rainbow-0: light-dark(var(--_latte-rainbow-0), var(--_frappe-rainbow-0));
332
+
--rainbow-1: light-dark(var(--_latte-rainbow-1), var(--_frappe-rainbow-1));
333
+
--rainbow-2: light-dark(var(--_latte-rainbow-2), var(--_frappe-rainbow-2));
334
+
--rainbow-3: light-dark(var(--_latte-rainbow-3), var(--_frappe-rainbow-3));
335
+
--rainbow-4: light-dark(var(--_latte-rainbow-4), var(--_frappe-rainbow-4));
336
+
--rainbow-5: light-dark(var(--_latte-rainbow-5), var(--_frappe-rainbow-5));
318
337
}
319
338
320
339
heading {
···
396
415
}
397
416
}
398
417
</style>
418
+
419
+
<style
420
+
set:html={`
421
+
:root {
422
+
--_latte-bg-main: ${latte.background.main};
423
+
--_latte-bg-secondary: ${latte.background.secondary};
424
+
--_latte-typo-body: ${latte.typography.body};
425
+
--_latte-typo-heading: ${latte.typography.heading};
426
+
--_latte-typo-subheading: ${latte.typography.subheading};
427
+
--_latte-typo-url: ${latte.typography.url};
428
+
--_latte-typo-selection: ${latte.typography.selection};
429
+
--_latte-rainbow-0: ${latte.rainbow[0]};
430
+
--_latte-rainbow-1: ${latte.rainbow[1]};
431
+
--_latte-rainbow-2: ${latte.rainbow[2]};
432
+
--_latte-rainbow-3: ${latte.rainbow[3]};
433
+
--_latte-rainbow-4: ${latte.rainbow[4]};
434
+
--_latte-rainbow-5: ${latte.rainbow[5]};
435
+
436
+
--_frappe-bg-main: ${frappe.background.main};
437
+
--_frappe-bg-secondary: ${frappe.background.secondary};
438
+
--_frappe-typo-body: ${frappe.typography.body};
439
+
--_frappe-typo-heading: ${frappe.typography.heading};
440
+
--_frappe-typo-subheading: ${frappe.typography.subheading};
441
+
--_frappe-typo-url: ${frappe.typography.url};
442
+
--_frappe-typo-selection: ${frappe.typography.selection};
443
+
--_frappe-rainbow-0: ${frappe.rainbow[0]};
444
+
--_frappe-rainbow-1: ${frappe.rainbow[1]};
445
+
--_frappe-rainbow-2: ${frappe.rainbow[2]};
446
+
--_frappe-rainbow-3: ${frappe.rainbow[3]};
447
+
--_frappe-rainbow-4: ${frappe.rainbow[4]};
448
+
--_frappe-rainbow-5: ${frappe.rainbow[5]};
449
+
}
450
+
`}
451
+
></style>