search

blenderskool / untab

🔍 A productivity tool to boost your browser workflow!
https://getuntab.now.sh
MIT License
347 stars 27 forks source link

Dark theme and light theme #9

Closed asharonbaltazar closed 3 years ago

asharonbaltazar commented 4 years ago

Hello again,

Sorry for taking such an interest in your project, but I do want to make it better. Right now, I've managed to get a window.matchMedia working to listen for the current browser theme. Would you prefer to append a class to the elements (something like dark or light) or do you have anything else in mind?

blenderskool commented 4 years ago

Hi @asharonbaltazar Feel free to take interest in this project. This project would only get better if more people come together and share their ideas and contributions!

Coming to the issue, I haven't thought about dark theme as of now. I think we should first extract the colors as css variables so that changing them to dark colors would be simple.

Also I'm assuming that by matchMedia you are referring to prefers-color-scheme query to get the system level color preference. This could be used to add dark class to root element (that would change the css variables value to dark colors)

We can use the JavaScript way or use it as a regular media query in CSS itself to change the CSS variables value without having to add classes to elements

Other option is we can add a setting somewhere in the extension for controlling the theme instead of relying on system level theme always.