Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 11:11:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enable theming via new HTML element attributes (#37477)

Browse Source
This commit is contained in:
diondiondion
2026-01-15 17:04:27 +01:00
committed by GitHub
parent c09fbeb32f
commit bc2f8a358f
13 changed files with 53 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/javascript/styles/mastodon/theme/index.scss
View File

@@ -5,49 +5,29 @@
html {
@include base.palette;
&:where([data-user-theme='system']) {
color-scheme: dark light;
@media (prefers-color-scheme: dark) {
@include dark.tokens;
@include utils.invert-on-dark;
@media (prefers-contrast: more) {
@include dark.contrast-overrides;
}
}
@media (prefers-color-scheme: light) {
@include light.tokens;
@include utils.invert-on-light;
@media (prefers-contrast: more) {
@include light.contrast-overrides;
}
}
}
}
.theme-dark,
html:where(
:not([data-user-theme='mastodon-light'], [data-user-theme='system'])
) {
[data-color-scheme='dark'],
html:not([data-color-scheme]) {
color-scheme: dark;
@include dark.tokens;
@include utils.invert-on-dark;
&[data-contrast='high'],
[data-contrast='high'] & {
@include dark.contrast-overrides;
}
}
html[data-user-theme='contrast'],
html[data-user-theme='contrast'] .theme-dark {
@include dark.contrast-overrides;
}
.theme-light,
html:where([data-user-theme='mastodon-light']) {
[data-color-scheme='light'] {
color-scheme: light;
@include light.tokens;
@include utils.invert-on-light;
&[data-contrast='high'],
[data-contrast='high'] & {
@include light.contrast-overrides;
}
}