Add Light Mode + Follow System Theme #346
Comments
|
Hey @amadeusp, sorry for the late response! A light theme is definitely something I want to add. I’ll add it to the roadmap on GitHub 😊 |
wmnnd
added
enhancement
|
Here is a quick prototype based on tailwindcss "selector" mode. Basically, we'll have to
A small example in .bg-onboarding {
- @apply bg-gradient-to-r from-red-900 via-indigo-900 to-emerald-900;
+ @apply bg-gradient-to-r from-red-200 via-indigo-200 to-emerald-200 dark:from-red-900 dark:via-indigo-900 dark:to-emerald-900;
}In templates - <body class="bg-black grid grid-cols-1 sm:grid-cols-[16em,1fr]">
+ <body class="bg-white dark:bg-black grid grid-cols-1 sm:grid-cols-[16em,1fr]">Theme switcher function could look like this : <script type="text/javascript">
// this function must stay inline in head to avoid FOUC
function apply_theme(){
document.documentElement.classList.toggle(
'dark',
localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
)
}
apply_theme()
/**
* Switches theme.
* @see https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
* @param {"dark"|"light"|"system"} mode
*/
function switch_theme (mode){
if(mode==='dark') {
localStorage.theme = 'dark'
}
if(mode==='light') {
localStorage.theme = 'light'
}
if(mode==='system') {
localStorage.removeItem('theme')
}
// relies on function apply_theme() defined inline in head in HTML root (explained there)
window.apply_theme()
}
</script>A very basic select list to showcase the switch. <select name="theme" onchange="window.switch_theme(event.target.value)">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="system">System</option>
</select>Screen.Recording.2025-01-18.at.02.07.38.mov |
|
I've not yet looked at how to manage with the form pages. |
|
Tailwind "inline" styles has a lot of duplication. It might be hell to maintain. We could factorize color-related styles to css classes to make maintainance easier ? |
|
It would even make sense to factor out some bits that are used regularly into components. I've been thinking about refreshing some parts of the UI anyways … starting next week I'll have more time to work on Keila again. Then I want to create a roadmap for the next couple of months. Is the styling something you're interested in helping with, @marc-bouvier? |
I share the same feeling after digging a bit into it.
Indeed, I'd like helping with styling @wmnnd . |
|
Based on what I've seen so far, 
|
I'd like both the Keila app and the actual user-facing newsletter front-end to support light and dark modes (in the case of the front-end, with customizable themes for both modes), and for the app and front-end to follow the system theme of the host computer when viewing/using either.
The text was updated successfully, but these errors were encountered: