Light theme for the UI of the extension itself

Is there a light theme already implemented under some menu I don't see? I am referring to the overall interface of the extension. I have trouble reading dark theme (which is why I need an extension like this in the first place, to write my own styles that are readable for my eyes) but it defeats the point without a light theme option.

I'm a developer and I'm willing to write it or help write it but I noticed you preferred to not receive spontaneous PRs which is why I am submitting an issue instead. Please let me know!

@quoid

Thanks for your feedback.

Yes, I think currently we don't have a light theme. I used to mentioned this requirement to @quoid but we didn't talk too much because we had more priority refactoring work to do.

I understand and value this need, it should be given more consideration. I'll invite @quoid for more thoughts and information on this as well.

Since we're currently doing a major environment refactoring, we need more communication about direct contributions in case you're working on an old branch.

Thanks again for your thoughtfulness and help.

@quoid

If you have a Matrix ID, we can invite you into our development group where we can have more direct communication. If you don't want it posted here, you can drop @quoid an email. If you don't have this account, don't worry, we can show you how to get one later if needed, it's very easy and open. In any case, you can continue to communicate by commenting here.

@ACTCD

Light theme would be a valuable contribution! As @ACTCD has said, feel free to send your matrix id or shoot me an email and we can collaborate through there.

This issue doesn't seem very popular. But let me please offer my vote.

Dark mode isn't readable by all users. A light theme would raise the usability of this already great extension.

Thanks for listening.

@Foxtaur

@Foxtaur No, it's valued by us, it's just that we have some current priorities that need to be realized.
And in our recent refactoring, we're already looking at improving the a11y experience in some ways.

Just an update, we are trying to make a light theme.
And we want to meet basic requirements like minimum contrast.

Most rich colors seem to have better contrast in dark mode.
So we want to know what colors will help you read if you prefer a light theme.

We will release a beta version of the new light theme in the near future.
So stay tuned and let us know how your eyes feel, and thanks for waiting.

Hi I'm definitely still interested in helping with this.

I would honestly need to see color options visually to know what is a good reading/viewing experience and what isn't. I've found that some bolder colors can work well on light themes (a deep forest green, or a darker goldenrod or honey color), for lighter foreground colors, in the same way that a pastel or sky blue would work better than a dark navy blue on a dark theme.

You can reach me at @cupcake:chat.blahaj.zone on Matrix as well, I've recently made an account there.

@yaycupcake

@yaycupcake That's great. I've invited you into our development room.

feat: implement light theme foundation

I was on the App Store version for years and just installed the testflight latest version.
My macos system is set to light mode but I really prefer dark mode for writing code.
Seems like the Userscripts extension page is now stuck in the light theme, which I find really hard to read.

Is there a toggle available to force the dark color scheme
If not, can I inject css into the extension page to override the @media (prefers-color-scheme: light) block. I am able to inspect the page and remove the css manually from the settings.css source file but it doesn't persist. If so, would that be done with a userscript css matching...which url? Perhaps with a global Safari stylesheet?

Well I managed to override the light theme styles using Safari's global stylesheet under Safari>Settings>Advanced>Style sheet. In case anyone is also wanting a dark color scheme, here is the code to use. Safari global stylesheets apply to every site so maybe someone can suggest a better selector

html:has(link[href*="entry-ext-extension-page"]):has(div.script__tag) {
    color-scheme: dark !important;
--color-bg-primary: #323639 !important;
--color-bg-secondary: #2f3337 !important;
    --color-bg-theme: #1d2023 !important;
    --color-script-highlighted: #364049 !important;
    --color-black: #1d2023 !important;
    --color-white: #fff !important;
    --color-blue: #74b1eb !important;
    --color-green: #60f36c !important;
    --color-grey: rgb(255 255 255 / .15) !important;
    --color-red: #ff453a !important;
    --color-yellow: #e4f360 !important;
    --text-color-primary: rgb(255 255 255) !important;
    --text-color-secondary: rgb(255 255 255 / .65) !important;
    --text-color-disabled: rgb(255 255 255 / .4) !important;
    --box-shadow: 0 .5rem 1rem 0 rgb(0 0 0 / .25) !important;
    --button-color: #1d2023 !important;
    --border-color: #1d2023 !important;
    --editor-invisible: rgb(255 255 255 / .15) !important;
    --editor-number: #77e26a !important;
    --editor-comment: rgb(255 255 255 / .35) !important;
    --editor-def: #efc371 !important;
    --editor-default: #cdcfd1 !important;
    --editor-keyword: #96c3ed !important;
    --editor-atom: #59ebf5 !important;
    --editor-operator: #8c99a7 !important;
    --editor-property: #e86c8a !important;
    --editor-string: #f5eea2 !important;
    --editor-string-2: #cdabff !important;
    --editor-cursor: #e3e7eb !important;
    --editor-matching-bracket-color: #fff !important;
    --editor-matching-bracket-border: #77e26a !important;
    --editor-blurred-background: rgb(50 54 57 / .65) !important;
}

@robert-corlett

@robert-corlett

Is there a toggle available to force the dark color scheme

Yes, we plan to do that and allow users to customize the style:

Custom extension color scheme #777

@robert-corlett

@robert-corlett So I've added that setting. This should become easy once the new beta version becomes available.

https://github.com/quoid/userscripts/releases/tag/v5.0.0-beta.23

Navigation Menu

Repository navigation

Light theme for the UI of the extension itself #392

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Light theme for the UI of the extension itself #392

Description

Activity

ACTCD commented on Dec 1, 2022

ACTCD commented on Dec 1, 2022

quoid commented on Dec 1, 2022

Foxtaur commented on Aug 14, 2024

ACTCD commented on Aug 19, 2024

ACTCD commented on Oct 30, 2024

yaycupcake commented on Oct 30, 2024

ACTCD commented on Oct 30, 2024

robert-corlett commented on May 7, 2026

robert-corlett commented on May 7, 2026

ACTCD commented on May 7, 2026

ACTCD commented on May 10, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions