Include a Dark Mode for extension UI #50
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I use Stylish heavily, primarily to develop dark themes for websites I use that do not have them. Unfortunately, it is often blinding to switch back and forth between the dark theme I am working on and Stylish's bright white interface. To that end, I've developed a Dark Mode feature for the extension.
This commit should be fairly comprehensive, though naturally there may be bugs! This introduces a new Safari extension setting for enabling dark mode (off by default), which can be toggled with a checkbox in Settings. I added a special ping to global.js for checking for Dark Mode, as well as an easily-added JavaScript file to inject the dark mode CSS if the setting is enabled. It was tricky to implement this all in such a way that was performant (as in, you don't get too many flashes of the white theme or no CSS at all before the JavaScript injects the dark theme), but I believe the solution I landed on is solid enough.
Naturally this also includes a full "Dark Mode" CSS for the entire interface of the extension, as well as dark background images and throbbers for when those are needed. Minor adjustments have also been made to buttons (which have their own separate dark-button CSS) to tone down their brightness a bit in Dark Mode.
Any feedback or suggestions would be welcome.