add light theme + theme switch #13
Description
Describe the problem
I want to be able to toggle between light and dark theme.
Describe the proposed solution
1. Add white theme
design a nice light theme then edit https://github.com/Roma-JS/roma-js-on-astro/blob/main/src/styles/main.scss#L144
2. Create theme switcher
add to the navbar a toggle button that on click switches between light and dark theme:
document.documentElement.classList.toggle(...)- Persist user preference
You need to check in a render blocking script that the default theme matches what the user has selected.
How to create a romajs theme
- Create a cool theme in
src/styles/main.scss
/* src/styles/main.scss */
:root.rmjs-my-cool-new-theme,
.rmjs-yellow-white-theme {
color-scheme: light; /* or dark */
--bg-primary: var(--brand-secondary);
--bg-secondary: var(--color-light-100);
--bg-tertiary: var(--color-dark-200);
--text-primary: var(--color-dark-100);
--text-secondary: var(--color-dark-100);
--accent-primary: var(--brand-secondary);
}- Apply theme
<html lang="it" class="rmjs-my-cool-new-theme">
<!-- awesome website here -->
</html>Alternatives considered
We could use a drop-down menu of we want to support more than 2 themes... but it does not seem that useful atm.
Importance
nice to have