idea: support a cross browser dark mode extension like dark-reader
Opened this issue · 6 comments
Right now, Stylix provides one of the best possible ways to make your system match and make you feel like it is all meant to be together. It is amazing.
The one exception is when you use a dark-mode browser extension such as Dark Reader. Since these extensions support custom colours via CSS, it would be great if Stylix could create this dynamically. Then, the pages where you use a dark theme would match the rest of the system.
Thank you!
dark-reader chrome store
dark-reader Firefox Addon
dark-reader homepage
for reference, I exported a settings backup for reference:
{
"schemeVersion": 2,
"enabled": true,
"fetchNews": true,
"theme": {
"mode": 1,
"brightness": 100,
"contrast": 100,
"grayscale": 0,
"sepia": 0,
"useFont": false,
"fontFamily": "Open Sans",
"textStroke": 0,
"engine": "dynamicTheme",
"stylesheet": "",
"darkSchemeBackgroundColor": "#181a1b",
"darkSchemeTextColor": "#e8e6e3",
"lightSchemeBackgroundColor": "#dcdad7",
"lightSchemeTextColor": "#181a1b",
"scrollbarColor": "auto",
"selectionColor": "auto",
"styleSystemControls": false,
"lightColorScheme": "Default",
"darkColorScheme": "Default",
"immediateModify": false
},
"presets": [],
"customThemes": [],
"enabledByDefault": true,
"enabledFor": [],
"disabledFor": [
"mail.google.com"
],
"changeBrowserTheme": false,
"syncSettings": true,
"syncSitesFixes": true,
"automation": {
"behavior": "OnOff",
"enabled": false,
"mode": ""
},
"time": {
"activation": "18:00",
"deactivation": "9:00"
},
"location": {
"latitude": null,
"longitude": null
},
"previewNewDesign": false,
"enableForPDF": true,
"enableForProtectedPages": true,
"enableContextMenus": false,
"detectDarkTheme": true
}
Just showing where the data is located, etc:
❯ tree /home/dustin/.config/chromium/Default/Extensions/eimadpbcbfnmbkopoojfekhnkhdbieeh/.
/home/dustin/.config/chromium/Default/Extensions/eimadpbcbfnmbkopoojfekhnkhdbieeh/.
└── 4.9.88_0
├── background
│ └── index.js
├── config
│ ├── color-schemes.drconf
│ ├── dark-sites.config
│ ├── detector-hints.config
│ ├── dynamic-theme-fixes.config
│ ├── inversion-fixes.config
│ └── static-themes.config
├── icons
│ ├── dr_128.png
│ ├── dr_16.png
│ ├── dr_48.png
│ ├── dr_active_19.png
│ ├── dr_active_38.png
│ ├── dr_inactive_19.png
│ └── dr_inactive_38.png
├── inject
│ ├── color-scheme-watcher.js
│ ├── fallback.js
│ ├── index.js
│ └── proxy.js
├── _locales
│ ├── ar
│ │ └── messages.json
│ ├── be
│ │ └── messages.json
│ ├── bg
│ │ └── messages.json
│ ├── bn
│ │ └── messages.json
│ ├── cs
│ │ └── messages.json
│ ├── da_DK
│ │ └── messages.json
│ ├── de
│ │ └── messages.json
│ ├── el
│ │ └── messages.json
│ ├── en
│ │ └── messages.json
│ ├── en_GB
│ │ └── messages.json
│ ├── en_US
│ │ └── messages.json
│ ├── es
│ │ └── messages.json
│ ├── es_419
│ │ └── messages.json
│ ├── fa
│ │ └── messages.json
│ ├── fa_IR
│ │ └── messages.json
│ ├── fil
│ │ └── messages.json
│ ├── fr
│ │ └── messages.json
│ ├── he
│ │ └── messages.json
│ ├── hi
│ │ └── messages.json
│ ├── id
│ │ └── messages.json
│ ├── it
│ │ └── messages.json
│ ├── ja
│ │ └── messages.json
│ ├── ko
│ │ └── messages.json
│ ├── ms
│ │ └── messages.json
│ ├── nl
│ │ └── messages.json
│ ├── no
│ │ └── messages.json
│ ├── pl
│ │ └── messages.json
│ ├── pt_BR
│ │ └── messages.json
│ ├── pt_PT
│ │ └── messages.json
│ ├── ro
│ │ └── messages.json
│ ├── ru
│ │ └── messages.json
│ ├── si
│ │ └── messages.json
│ ├── sk
│ │ └── messages.json
│ ├── sr
│ │ └── messages.json
│ ├── sv
│ │ └── messages.json
│ ├── te
│ │ └── messages.json
│ ├── th
│ │ └── messages.json
│ ├── tr
│ │ └── messages.json
│ ├── uk
│ │ └── messages.json
│ ├── vi
│ │ └── messages.json
│ ├── zh_CN
│ │ └── messages.json
│ └── zh_TW
│ └── messages.json
├── manifest.json
├── _metadata
│ └── verified_contents.json
└── ui
├── assets
│ ├── fonts
│ │ ├── LICENSE.txt
│ │ ├── OpenSans-Light.ttf
│ │ ├── OpenSans-Regular.ttf
│ │ └── OpenSans-SemiBold.ttf
│ └── images
│ ├── birthday-icon.svg
│ ├── darkreader-icon-256x256.png
│ ├── darkreader-type.svg
│ ├── mobile-icon-40x64.svg
│ ├── mode-dark-32.svg
│ └── mode-light-32.svg
├── devtools
│ ├── index.html
│ ├── index.js
│ └── style.css
├── options
│ ├── index.html
│ ├── index.js
│ └── style.css
├── popup
│ ├── index.html
│ ├── index.js
│ └── style.css
└── stylesheet-editor
├── index.html
├── index.js
└── style.css
58 directories, 84 files
This looks interesting,
bat -p color-schemes.drconf
Default
DARK
background: #181a1b
text: #e8e6e3
LIGHT
background: #181a1b
text: #e8e6e3
================================
Catppuccin
DARK
background: #1e1e2e
text: #cdd6f4
LIGHT
background: #eff1f5
text: #4c4f69
================================
Deep Ocean
DARK
background: #00222b
text: #a9b4b4
LIGHT
background: #cac5b6
text: #cdd4d6
================================
Dracula
DARK
background: #282b36
text: #e8e6e3
================================
Everforest
DARK
background: #2b3339
text: #d1c4a9
LIGHT
background: #fdf9ed
text: #5b6971
================================
Gruvbox
DARK
background: #282828
text: #ebdbb2
LIGHT
background: #fbf1c7
text: #3c3836
================================
Kanagawa
DARK
background: #1f1f28
text: #dcd7ba
LIGHT
background: #f4ecca
text: #1e4887
================================
Nord
DARK
background: #2e3440
text: #eceff4
LIGHT
background: #eceff4
text: #3b4252
================================
One Dark
DARK
background: #282c34
text: #abb2bf
LIGHT
background: #fafafa
text: #383a42
================================
Rosé Pine
DARK
background: #191724
text: #e0def4
LIGHT
background: #faf4ed
text: #575279
================================
Selenized
DARK
background: #103c48
text: #adbcbc
LIGHT
background: #fbf3db
text: #53676d
================================
Solarized
DARK
background: #002b36
text: #93a1a1
LIGHT
background: #fdf6e3
text: #586e75
================================
Tokyo Night
DARK
background: #1a1b26
text: #a9b1d6
LIGHT
background: #d5d6db
text: #343b58
I wonder if it would be as simple as adding some sort of "stylix" theme here that reads from the stylix code?
For reference, a conversation on their repo as well.
Currently, dark and light mode are only supported in some Stylix modules.
For reference, dark mode support for Firefox has already been proposed in #253.
In the short term, I have grabbed the nixcode on this other issue, and rendered out a config file. I then simply import that to the extension and it works great.
It would be nicer if enabling stylix did it all, but this works for me for now.
For reference, a conversation on their repo as well.
Currently, dark and light mode are only supported in some Stylix modules.
Really, stylix.polarity is just a setting to guide the palette generator and shouldn't be used in modules at all. It defaults to "either", and even if it's set there is no guarantee that the selected theme actually matches what it says. We should be selecting light/dark mode based on the value of base00 instead.