search

danth / stylix

System-wide colorscheming and typography for NixOS
https://stylix.danth.me/
MIT License
1.24k stars 160 forks source link

idea: support a cross browser dark mode extension like dark-reader #495

Open bashfulrobot opened 4 months ago

bashfulrobot commented 4 months ago

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

image

image

bashfulrobot commented 4 months ago

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
}
bashfulrobot commented 4 months ago

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?

bashfulrobot commented 4 months ago

For reference, a conversation on their repo as well.

trueNAHO commented 4 months ago

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.

bashfulrobot commented 4 months ago

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.

danth commented 3 months ago

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.