Add light/dark mode toggle #2

Merged

tamagorails merged 5 commits from light-dark-mode into main

2026-09-01 17:28:41 +02:00

tamagorails commented

2026-09-01 17:26:48 +02:00

Owner

Implementation approach adapted from Kevin Powell's YT video

Also made decision on how to do icons from now on, namely to use icons from Iconify (specifically the Tabler icon pack), and serve them from React components by copying the JSX (in my case TSX).

Implementation approach adapted from [Kevin Powell's YT video](https://www.youtube.com/watch?v=zFFuV_vXNhY) Also made decision on how to do icons from now on, namely to use icons from Iconify (specifically the Tabler icon pack), and serve them from React components by copying the JSX (in my case TSX).

tamagorails added 4 commits

2026-09-01 17:26:48 +02:00

First attempt at doing light mode 77ee93c9b3

Finish setting up light/dark colour theme 47a08b8da5

Attempt at using Astro Icons d148b9109d

Too fussy with TypeScript; I don't think it's worth it.

Finish implementation of colour theme toggle a88fb7b848

- Switch to providing icons locally using JSX components, made possible by JSX generator on Iconify (selecting size: none)
- Revise convention of Props interfaces to have a separate definition to be cleaner
- Switch approach to using `&&` short-circuiting instead of `switch` statement
- Implement theme changing using data attributes and CSS

tamagorails added 1 commit

2026-09-01 17:28:12 +02:00

Remove unsued astro-icons and @iconify-json/tabler packages b0cc468c0a