feat(themes): add a "None" theme that leaves YouTube's styling alone - #4330
Open
Mihailchik wants to merge 1 commit into
Open
feat(themes): add a "None" theme that leaves YouTube's styling alone#4330Mihailchik wants to merge 1 commit into
Mihailchik wants to merge 1 commit into
Conversation
There was no way to tell the extension to stay out of theming. The first
radio, "YouTube's Light", stores `light`, and because every setting is
mirrored to an `it-*` attribute, `html[it-theme=light]` matches the rules
written as `html[it-theme]:not([it-theme=default])`, which force page
backgrounds and link colours with !important. setTheme('light') also clears
YouTube's PREF f6 cookie and removes the `dark` attribute. Users who theme
YouTube with Stylus ended up fighting the extension.
- Menu: a "None" radio after YouTube's Dark, reusing the existing `none`
string, which is already translated in 43 of 65 locales.
- setTheme: 'none' shares the 'default' branch. It drops the custom palette
and restores the cinematics glow, and never touches `dark`, the masthead
or the PREF cookie.
- styles.css: the ten "any theme but default" selectors also exclude
`none`, since `it-theme="none"` would otherwise match them.
The light-mode tonal-button rule is left as it is. It compensates for an
unconditional rule above it, and excluding `none` there would leave those
buttons nearly invisible in light mode.
Closes code-charity#4329
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Closes #4329.
Adds a None theme that leaves YouTube's own styling alone, for people who theme it with Stylus or similar.
Why the extension fights user styles today
Picking "YouTube's Light" does not actually mean "don't restyle".
light, and every setting is mirrored to anit-*attribute on<html>, so the page getsit-theme="light".styles.cssare written ashtml[it-theme]:not([it-theme=default]), so they matchlightand force the page background (ytd-app,#page,#content, …) and the link colours with!important.setTheme('light')also clears YouTube'sPREF f6dark-mode cookie and removes thedarkattribute.So there was no setting under which the extension stays out of theming, and that is what the report runs into.
Changes
off,disable,stylus,userstyle). It reuses the existingnonestring, which is already translated in 43 of 65 locales, so no new strings were needed.setTheme:'none'shares the'default'branch. It drops the custom palette and restores the cinematics glow. It never touches thedarkattribute, the masthead or thePREFcookie.styles.css: the ten "any theme but default" selectors now also excludenone. Without that,it-theme="none"would still match them and restyle the page..satus-label--none-themegets the same row height as the other themes and a dashed outline instead of a colour.The dark/light switch in the header already handles this. It treats
noneas a light theme and restores it when you toggle back. The load-time heuristic that storesdarkonly fires when no theme is stored at all, so it leavesnonealone.Deliberately left alone
The light-mode tonal-button rule (
html:not([dark]):not([it-theme=black])…, aroundstyles.css:2166) still applies withnone. It compensates for an unconditional rule just above it, which makes those buttons translucent white. Excludingnonethere would leave them nearly invisible in light mode.More generally, the extension's feature styles that are not tied to a theme still apply. This option switches off the theme layer, not every stylesheet the extension ships.
Tests
New
tests/unit/theme-none.test.js, following the style of the existingthemes-menuandtheme-cookietests:noneradio in thethemegroup;setThemewithnoneleaves thedarkattribute, the masthead, thePREFcookie and storage untouched;styles.css: everyhtml[it-theme]:not([it-theme=default])selector must also excludenone, so a rule added later cannot quietly restyle the page again. I checked that the guard fails when one exclusion is removed; the failure names the offending selector.npx jest: 117 passed (113 before, plus these 4).Not verified
I did not load the unpacked extension in a browser. The behaviour is covered by the unit tests above, but a quick manual check with Stylus active would be worth doing before merge.
Unrelated, for what it's worth
The CI step
npx eslint --config=tests/eslint_rules.config.mjscurrently fails before linting anything. ESLint 8 reads the flat.mjsconfig as a legacy config and throws aYAMLException, andcontinue-on-errorhides it. Running it withESLINT_USE_FLAT_CONFIG=trueworks. With that flag, this change adds no new findings.