vielle.dev
[Archived] Archived WIP of vielle.dev
Make words for light/dark themes more understandable and less based on catppuccin
TODO: stop using catppuccin bc it DOES NOT work for this
+3
-3
src/config.ts
+3
-3
src/config.ts
···
67
67
stars: "#ffffff",
68
68
},
69
69
70
-
catppuccin: {
71
-
latte: {
70
+
post: {
71
+
light: {
72
72
background: {
73
73
main: "#eff1f5", // base
74
74
secondary: "#dce0e8", // crust
···
91
91
],
92
92
},
93
93
94
-
frappe: {
94
+
dark: {
95
95
background: {
96
96
main: "#303446", // base
97
97
secondary: "#232634", // crust
+50
-50
src/pages/blog/[id].astro
+50
-50
src/pages/blog/[id].astro
···
7
7
8
8
import { blog } from "@/config";
9
9
const {
10
-
catppuccin: { latte, frappe },
10
+
post: { light, dark },
11
11
} = blog.palette;
12
12
13
13
import { render } from "astro:content";
···
349
349
:root {
350
350
color-scheme: light dark;
351
351
352
-
--bg-main: light-dark(var(--_latte-bg-main), var(--_frappe-bg-main));
352
+
--bg-main: light-dark(var(--_light-bg-main), var(--_dark-bg-main));
353
353
354
354
--bg-secondary: light-dark(
355
-
var(--_latte-bg-secondary),
356
-
var(--_frappe-bg-secondary)
355
+
var(--_light-bg-secondary),
356
+
var(--_dark-bg-secondary)
357
357
);
358
358
359
-
--typo-body: light-dark(var(--_latte-typo-body), var(--_frappe-typo-body));
359
+
--typo-body: light-dark(var(--_light-typo-body), var(--_dark-typo-body));
360
360
361
361
--typo-body-inv: light-dark(
362
-
var(--_frappe-typo-body),
363
-
var(--_latte-typo-body)
362
+
var(--_dark-typo-body),
363
+
var(--_light-typo-body)
364
364
);
365
365
366
366
--typo-heading: light-dark(
367
-
var(--_latte-typo-heading),
368
-
var(--_frappe-typo-heading)
367
+
var(--_light-typo-heading),
368
+
var(--_dark-typo-heading)
369
369
);
370
370
371
371
--typo-subheading: light-dark(
372
-
var(--_latte-typo-subheading),
373
-
var(--_frappe-typo-subheading)
372
+
var(--_light-typo-subheading),
373
+
var(--_dark-typo-subheading)
374
374
);
375
375
376
-
--typo-url: light-dark(var(--_latte-typo-url), var(--_frappe-typo-url));
376
+
--typo-url: light-dark(var(--_light-typo-url), var(--_dark-typo-url));
377
377
--typo-visited: light-dark(
378
-
var(--_latte-typo-visited),
379
-
var(--_frappe-typo-visited)
378
+
var(--_light-typo-visited),
379
+
var(--_dark-typo-visited)
380
380
);
381
381
382
382
--typo-selection: light-dark(
383
-
var(--_latte-typo-selection),
384
-
var(--_frappe-typo-selection)
383
+
var(--_light-typo-selection),
384
+
var(--_dark-typo-selection)
385
385
);
386
386
387
-
--rainbow-0: light-dark(var(--_latte-rainbow-0), var(--_frappe-rainbow-0));
388
-
--rainbow-1: light-dark(var(--_latte-rainbow-1), var(--_frappe-rainbow-1));
389
-
--rainbow-2: light-dark(var(--_latte-rainbow-2), var(--_frappe-rainbow-2));
390
-
--rainbow-3: light-dark(var(--_latte-rainbow-3), var(--_frappe-rainbow-3));
391
-
--rainbow-4: light-dark(var(--_latte-rainbow-4), var(--_frappe-rainbow-4));
392
-
--rainbow-5: light-dark(var(--_latte-rainbow-5), var(--_frappe-rainbow-5));
387
+
--rainbow-0: light-dark(var(--_light-rainbow-0), var(--_dark-rainbow-0));
388
+
--rainbow-1: light-dark(var(--_light-rainbow-1), var(--_dark-rainbow-1));
389
+
--rainbow-2: light-dark(var(--_light-rainbow-2), var(--_dark-rainbow-2));
390
+
--rainbow-3: light-dark(var(--_light-rainbow-3), var(--_dark-rainbow-3));
391
+
--rainbow-4: light-dark(var(--_light-rainbow-4), var(--_dark-rainbow-4));
392
+
--rainbow-5: light-dark(var(--_light-rainbow-5), var(--_dark-rainbow-5));
393
393
}
394
394
395
395
header {
···
479
479
<style
480
480
set:html={`
481
481
:root {
482
-
--_latte-bg-main: ${latte.background.main};
483
-
--_latte-bg-secondary: ${latte.background.secondary};
484
-
--_latte-typo-body: ${latte.typography.body};
485
-
--_latte-typo-heading: ${latte.typography.heading};
486
-
--_latte-typo-subheading: ${latte.typography.subheading};
487
-
--_latte-typo-url: ${latte.typography.url};
488
-
--_latte-typo-visited: ${latte.typography.visited};
489
-
--_latte-typo-selection: ${latte.typography.selection};
490
-
--_latte-rainbow-0: ${latte.rainbow[0]};
491
-
--_latte-rainbow-1: ${latte.rainbow[1]};
492
-
--_latte-rainbow-2: ${latte.rainbow[2]};
493
-
--_latte-rainbow-3: ${latte.rainbow[3]};
494
-
--_latte-rainbow-4: ${latte.rainbow[4]};
495
-
--_latte-rainbow-5: ${latte.rainbow[5]};
482
+
--_light-bg-main: ${light.background.main};
483
+
--_light-bg-secondary: ${light.background.secondary};
484
+
--_light-typo-body: ${light.typography.body};
485
+
--_light-typo-heading: ${light.typography.heading};
486
+
--_light-typo-subheading: ${light.typography.subheading};
487
+
--_light-typo-url: ${light.typography.url};
488
+
--_light-typo-visited: ${light.typography.visited};
489
+
--_light-typo-selection: ${light.typography.selection};
490
+
--_light-rainbow-0: ${light.rainbow[0]};
491
+
--_light-rainbow-1: ${light.rainbow[1]};
492
+
--_light-rainbow-2: ${light.rainbow[2]};
493
+
--_light-rainbow-3: ${light.rainbow[3]};
494
+
--_light-rainbow-4: ${light.rainbow[4]};
495
+
--_light-rainbow-5: ${light.rainbow[5]};
496
496
497
-
--_frappe-bg-main: ${frappe.background.main};
498
-
--_frappe-bg-secondary: ${frappe.background.secondary};
499
-
--_frappe-typo-body: ${frappe.typography.body};
500
-
--_frappe-typo-heading: ${frappe.typography.heading};
501
-
--_frappe-typo-subheading: ${frappe.typography.subheading};
502
-
--_frappe-typo-url: ${frappe.typography.url};
503
-
--_frappe-typo-visited: ${frappe.typography.visited};
504
-
--_frappe-typo-selection: ${frappe.typography.selection};
505
-
--_frappe-rainbow-0: ${frappe.rainbow[0]};
506
-
--_frappe-rainbow-1: ${frappe.rainbow[1]};
507
-
--_frappe-rainbow-2: ${frappe.rainbow[2]};
508
-
--_frappe-rainbow-3: ${frappe.rainbow[3]};
509
-
--_frappe-rainbow-4: ${frappe.rainbow[4]};
510
-
--_frappe-rainbow-5: ${frappe.rainbow[5]};
497
+
--_dark-bg-main: ${dark.background.main};
498
+
--_dark-bg-secondary: ${dark.background.secondary};
499
+
--_dark-typo-body: ${dark.typography.body};
500
+
--_dark-typo-heading: ${dark.typography.heading};
501
+
--_dark-typo-subheading: ${dark.typography.subheading};
502
+
--_dark-typo-url: ${dark.typography.url};
503
+
--_dark-typo-visited: ${dark.typography.visited};
504
+
--_dark-typo-selection: ${dark.typography.selection};
505
+
--_dark-rainbow-0: ${dark.rainbow[0]};
506
+
--_dark-rainbow-1: ${dark.rainbow[1]};
507
+
--_dark-rainbow-2: ${dark.rainbow[2]};
508
+
--_dark-rainbow-3: ${dark.rainbow[3]};
509
+
--_dark-rainbow-4: ${dark.rainbow[4]};
510
+
--_dark-rainbow-5: ${dark.rainbow[5]};
511
511
}
512
512
`}
513
513
></style>