Add dark theme #1204

jonah · 2019-08-24T01:08:35Z

dawidpotocki commented

2019-08-24 01:08:35 +00:00

(Migrated from github.com)

Fixes #1151

Add a switch
Remove white background from images (https://github.com/privacytoolsIO/privacytools.io/pull/1210)

How to test?

Install Firefox Developer Edition (up-to-date Firefox and Safari (https://github.com/privacytoolsIO/privacytools.io/pull/1204#issuecomment-524510658) should also be fine):
https://www.mozilla.org/en-US/firefox/developer/
Firefox gets data from operating system to decide if user prefers dark themes, so set it to dark in system settings or execute it like this (Adwaita is included with GTK, so you should have it installed):

White theme:

$ GTK_THEME=Adwaita ./firefox-developer/firefox

Dark theme:

$ GTK_THEME=Adwaita-dark ./firefox-developer/firefox

Or you can go to about:config and add a property named ui.systemUsesDarkTheme, integer and set it to 1.
Note: privacy.resistFingerprinting must be false.

After you do that, there is an option to open devtools, go to Style Editor and disable dark.css to compare it with regular light version.

Screenshot

Fixes #1151 - [x] Add a switch - [x] Remove white background from images (https://github.com/privacytoolsIO/privacytools.io/pull/1210) ### How to test? * Install Firefox Developer Edition (up-to-date Firefox and Safari (https://github.com/privacytoolsIO/privacytools.io/pull/1204#issuecomment-524510658) should also be fine): https://www.mozilla.org/en-US/firefox/developer/ * Firefox gets data from operating system to decide if user prefers dark themes, so set it to dark in system settings or execute it like this (Adwaita is included with GTK, so you should have it installed): White theme: ``` $ GTK_THEME=Adwaita ./firefox-developer/firefox ``` Dark theme: ``` $ GTK_THEME=Adwaita-dark ./firefox-developer/firefox ``` Or you can go to `about:config` and add a property named `ui.systemUsesDarkTheme`, `integer` and set it to `1`. __Note:__ `privacy.resistFingerprinting` must be false. After you do that, there is an option to open devtools, go to Style Editor and disable `dark.css` to compare it with regular light version. ![image](https://user-images.githubusercontent.com/38681822/63638108-810a8600-c673-11e9-8005-5a77b5b72593.png) ### Screenshot ![screenshot](https://user-images.githubusercontent.com/38681822/63630228-035d6080-c608-11e9-89d0-903b70e10965.png)

netlify[bot] commented

2019-08-24 01:09:36 +00:00

(Migrated from github.com)

Deploy preview for privacytools-io ready!

Built with commit 12bb38c6db

https://deploy-preview-1204--privacytools-io.netlify.com

Deploy preview for *privacytools-io* ready! Built with commit 12bb38c6db288f22f965f7fb24a96e62a1e10182 https://deploy-preview-1204--privacytools-io.netlify.com

jonah commented

2019-08-24 02:50:58 +00:00

FYI for visitors who don't want to or can't change their OS theme, dark mode can be toggled in the Safari developer console ~~(on Catalina. Don't know about Mojave support, maybe only in Safari Tech Preview on Mojave?)~~:

...and in Firefox I don't know how to do it per-site, but you can update the style used in the browser by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.

FYI for visitors who don't want to or can't change their OS theme, dark mode can be toggled in the Safari developer console ~~(on Catalina. Don't know about Mojave support, maybe only in Safari Tech Preview on Mojave?)~~: ![image](https://user-images.githubusercontent.com/3637842/63631582-73abb800-c5ef-11e9-941f-9492383ca803.png) ...and in Firefox I don't know how to do it per-site, but you can update the style used in the browser by going to `about:config` and adding a new property `ui.systemUsesDarkTheme` of integer type with value `1`.

Mikaela (Migrated from github.com) reviewed 2019-08-29 12:35:36 +00:00

Mikaela (Migrated from github.com) left a comment

I don't understand the code though 😃

I don't understand the code though :smiley: