Add workaround to avoid duplicating theme css #5323
+215
−291
Conversation
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
In order to support both a theme toggle and to automatically use the user's selected theme based on browser/system defaults the stylesheets has to be duplicated twice since the latter requires the css to be wrapped around a media query. This duplication is a painful experience to deal with when adding or changing existing styles. Even more so when it involves jumping around the behemoth default.css from and back to whatever sections you were just working on. I don't believe the we the Invidious team will be able to agree to a proper solution anytime soon (eg css post-processor, modern css light-dark feature, etc) so this commit is here as a stopgap measure. The workaround is to move the theming styles to two separate files which are read at runtime and used to generate a combined stylesheet with the necessary duplication for the media query. This combined stylesheet is then delivered on a new route added to Invidious, bypassing the static file handler.
|
Why not use CSS variables? IE11 is the only browser setting us back on that feature, it's probably time to leave it behind. |
|
I don't think using css variables by itself actually solves this problem since you'll still need to declare/use everything twice in order to support both user-agent and application-level theming. |
Yes, but at least it simplifies the CSS file, and makes everything easier to manage. Here is an example: Before.light-theme a:hover,
.light-theme a:active,
.light-theme summary:hover,
.light-theme a:focus,
.light-theme summary:focus {
color: #075A9E !important;
}
.light-theme .pure-button-primary:hover,
.light-theme .pure-button-primary:focus,
.light-theme .pure-button-secondary:hover,
.light-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.light-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
@media (prefers-color-scheme: light) {
.no-theme a:hover,
.no-theme a:active,
.no-theme summary:hover,
.no-theme a:focus,
.no-theme summary:focus {
color: #075A9E !important;
}
.no-theme .pure-button-primary:hover,
.no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.no-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
}
.dark-theme a:hover,
.dark-theme a:active,
.dark-theme summary:hover,
.dark-theme a:focus,
.dark-theme summary:focus {
color: rgb(0, 182, 240);
}
.dark-theme .pure-button-primary:hover,
.dark-theme .pure-button-primary:focus,
.dark-theme .pure-button-secondary:hover,
.dark-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.dark-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
@media (prefers-color-scheme: dark) {
.no-theme a:hover,
.no-theme a:active,
.no-theme a:focus {
color: rgb(0, 182, 240);
}
.no-theme .pure-button-primary:hover,
.no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.no-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
}After:root {
--color-button-front-hover: #fff;
}
.light-theme {
--color-link-hover: #075A9E;
--color-button-back-hover: rgba(0, 182, 240, 0.75);
}
@media (prefers-color-scheme: light) {
.no-theme {
--color-link-hover: #075A9E;
--color-button-back-hover: rgba(0, 182, 240, 0.75);
}
}
.dark-theme {
--color-link-hover: rgb(0, 182, 240);
--color-button-back-hover: rgb(0, 182, 240);
}
@media (prefers-color-scheme: dark) {
.no-theme {
--color-link-hover: rgb(0, 182, 240);
--color-button-back-hover: rgb(0, 182, 240);
}
}
a:hover,
a:active,
summary:hover,
a:focus,
summary:focus {
color: var(--color-link-hover) !important;
}
.pure-button-primary:hover,
.pure-button-primary:focus,
.pure-button-secondary:hover,
.pure-button-secondary:focus {
color: var(--color-button-front-hover) !important;
border-color: var(--color-button-back-hover) !important;
background-color: var(--color-button-back-hover) !important;
}
/* TODO */
.light-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
@media (prefers-color-scheme: light) {
.no-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
}
.dark-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
@media (prefers-color-scheme: dark) {
.no-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR is a stop-gap measure to prevent having to duplicate the theming styles two times for each theme, and to avoid the pains of having to jump around the behemoth default.css file whilst duplicating the theme color.
Until we can agree to a proper solution this at least makes adding and changing colors much less of a headache.
Of course there's still some duplication in that you still need to define the selectors twice (once for light and once for dark) but I don't think this can be fixed by anything short of an actual CSS pre-processor.
Closes #5056