Add in a dark mode
Closed this issue · 2 comments
Some rambling thoughts around this:
- https://github.com/pacocoursey/next-themes
- Start everything INVERTED (in dark mode)
- See https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript - but basically you seem to just need
window.matchMedia('(prefers-color-scheme: dark)').matches. If not dark mode, remove the inverted classes.
Going to need to look into contexts to make it easier :
ALTERNATIVELY see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Can just do it all via CSS. This could be the 'better' option since semantic UI doesn't support inverted on most things. For example while the menu can be inverted, the dropdown menu can't.
Edit: Actually, will want a dark mode button. I was trying to do a little research about this, and there do exist people who have dark mode on their OS, but still prefer light mode for certain websites. Would likely want to just utilize localstorage to deal with persistence.
Semantic UI doesn't have great customization in terms of dynamic theming. I'll be trying to use MUI instead, which has built in dynamic theming support. This will probably be a bigger effort, and so I'll probably work on this after working on a few other tasks that do not require any theming.
Okay so I was thinking about this over the past few days... a big rewrite of the existing CSS framework would be a very heavy lift, and if I wanted to use MUI I should've just used it in the beginning. I'm going to go more towards using the semantic ui css files and then slowly introducing css custom vars with the next themes component.