Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-12 23:38:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Handle dark/light/contrast theme modes in common CSS

Browse Source 
Port 65b216353e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-12-04 16:56:35 +01:00
committed by Claire
parent 3b4c4c5b09
commit 4dc196b595
13 changed files with 124 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/styles/application.scss
View File

@@ -1,7 +1,2 @@
@use 'mastodon/css_variables';
@use 'mastodon/variables';
@use 'common';
html {
color-scheme: dark;
}

1
app/javascript/flavours/glitch/styles/common.scss
View File

@@ -3,6 +3,7 @@
@use '@/styles/fonts/roboto-mono';
@use 'mastodon/reset';
@use 'mastodon/theme';
@use 'mastodon/basics';
@use 'mastodon/branding';
@use 'mastodon/containers';

7
app/javascript/flavours/glitch/styles/contrast.scss
View File

@@ -1,8 +1,3 @@
@use 'mastodon/css_variables';
@use 'mastodon/variables';
@use 'common';
@use 'contrast/diff';
html {
color-scheme: dark;
}
@use 'mastodon/high-contrast';

5
app/javascript/flavours/glitch/styles/mastodon-light.scss
View File

@@ -1,9 +1,4 @@
@use 'mastodon-light/css_variables';
@use 'mastodon/variables' with (
$emojis-requiring-inversion: 'chains'
);
@use 'common';
html {
color-scheme: light;
}

16
app/javascript/flavours/glitch/styles/mastodon/basics.scss
View File

@@ -3,6 +3,20 @@
html {
color: var(--color-text-primary);
background: var(--color-bg-ambient);
&.custom-scrollbars {
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
}
--outline-focus-default: 2px solid var(--color-text-brand);
--avatar-border-radius: 8px;
// Variable for easily inverting directional UI elements,
--text-x-direction: 1;
&.rtl {
--text-x-direction: -1;
}
}
html.has-modal {
@@ -37,7 +51,7 @@ body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
-webkit-tap-highlight-color: transparent;
&.system-font {
.system-font & {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
// -apple-system => Safari <11 specific
// BlinkMacSystemFont => Chrome <56 on macOS specific

14
app/javascript/flavours/glitch/styles/contrast/diff.scss → app/javascript/flavours/glitch/styles/mastodon/high-contrast.scss
View File

@@ -1,17 +1,3 @@
:root {
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-brand: var(--color-indigo-300);
--color-text-status-links: var(--color-text-brand);
/* BORDER TOKENS */
--border-strength-primary: 18%;
}
.status__content a,
.reply-indicator__content a,
.edit-indicator__content a,

4
app/javascript/flavours/glitch/styles/mastodon/reset.scss
View File

@@ -133,7 +133,3 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
html:has(body.custom-scrollbars) {
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
}

2
app/javascript/flavours/glitch/styles/mastodon/rtl.scss
View File

@@ -1,6 +1,6 @@
@use 'variables' as *;
body.rtl {
html.rtl {
direction: rtl;
.reactions-bar {

27
app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss Normal file
View File

@@ -0,0 +1,27 @@
@mixin palette {
--color-black: #000;
--color-grey-950: #181821;
--color-grey-800: #292938;
--color-grey-700: #444664;
--color-grey-600: #545778;
--color-grey-500: #696d91;
--color-grey-400: #8b8dac;
--color-grey-300: #b4b6cb;
--color-grey-200: #d8d9e3;
--color-grey-100: #f0f0f5;
--color-grey-50: #f0f1ff;
--color-white: #fff;
--color-indigo-600: #6147e6;
--color-indigo-400: #8886ff;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-indigo-50: #f0f1ff;
--color-red-500: #ff637e;
--color-red-600: #ec003f;
--color-yellow-400: #ffb900;
--color-yellow-600: #e17100;
--color-yellow-700: #bb4d00;
--color-green-400: #05df72;
--color-green-600: #00a63e;
}

53
app/javascript/flavours/glitch/styles/mastodon/css_variables.scss → app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss
View File

@@ -1,31 +1,6 @@
@use 'theme_utils' as utils;
:root {
--color-black: #000;
--color-grey-950: #181821;
--color-grey-800: #292938;
--color-grey-700: #444664;
--color-grey-600: #545778;
--color-grey-500: #696d91;
--color-grey-400: #8b8dac;
--color-grey-300: #b4b6cb;
--color-grey-200: #d8d9e3;
--color-grey-100: #f0f0f5;
--color-grey-50: #f0f1ff;
--color-white: #fff;
--color-indigo-600: #6147e6;
--color-indigo-400: #8886ff;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-indigo-50: #f0f1ff;
--color-red-500: #ff637e;
--color-red-600: #ec003f;
--color-yellow-400: #ffb900;
--color-yellow-600: #e17100;
--color-green-400: #05df72;
--color-green-600: #00a63e;
@use 'utils';
@mixin tokens {
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
@@ -127,7 +102,7 @@
// Warning
--overlay-strength-warning: 10%;
--color-bg-warning-base: var(--color-yellow-600);
--color-bg-warning-base: var(--color-yellow-700);
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
@@ -212,18 +187,18 @@
--rich-text-container-color: rgb(87 24 60 / 100%);
--rich-text-text-color: rgb(255 175 212 / 100%);
--rich-text-decorations-color: rgb(128 58 95 / 100%);
/* MISCELLANEOUS */
--outline-focus-default: 2px solid var(--color-text-brand);
--avatar-border-radius: 8px;
}
body {
// Variable for easily inverting directional UI elements,
--text-x-direction: 1;
@mixin contrast-overrides {
/* TEXT TOKENS */
&.rtl {
--text-x-direction: -1;
}
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-brand: var(--color-indigo-300);
--color-text-status-links: var(--color-text-brand);
/* BORDER TOKENS */
--border-strength-primary: 18%;
}

50
app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss → app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss
View File

@@ -1,31 +1,6 @@
@use '../mastodon/theme_utils' as utils;
:root {
--color-black: #000;
--color-grey-950: #181821;
--color-grey-800: #292938;
--color-grey-700: #444664;
--color-grey-600: #545778;
--color-grey-500: #696d91;
--color-grey-400: #8b8dac;
--color-grey-300: #b4b6cb;
--color-grey-200: #d8d9e3;
--color-grey-100: #f0f0f5;
--color-grey-50: #f0f1ff;
--color-white: #fff;
--color-indigo-600: #6147e6;
--color-indigo-400: #8886ff;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-indigo-50: #f0f1ff;
--color-red-500: #ff637e;
--color-red-600: #ec003f;
--color-yellow-400: #ffb900;
--color-yellow-600: #e17100;
--color-green-400: #05df72;
--color-green-600: #00a63e;
@use 'utils';
@mixin tokens {
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-950);
@@ -124,7 +99,7 @@
// Warning
--overlay-strength-warning: 10%;
--color-bg-warning-base: var(--color-yellow-600);
--color-bg-warning-base: var(--color-yellow-700);
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
@@ -207,9 +182,18 @@
--rich-text-container-color: rgb(255 216 231 / 100%);
--rich-text-text-color: rgb(114 47 83 / 100%);
--rich-text-decorations-color: rgb(255 175 212 / 100%);
/* MISCELLANEOUS */
--outline-focus-default: 2px solid var(--color-text-brand);
--avatar-border-radius: 8px;
}
@mixin contrast-overrides {
/* TEXT TOKENS */
--color-text-primary: var(--color-black);
--color-text-secondary: var(--color-grey-800);
--color-text-tertiary: var(--color-grey-700);
--color-text-brand: var(--color-indigo-600);
/* BORDER TOKENS */
--border-strength-primary: 30%;
--color-border-on-bg-secondary: var(--color-grey-300);
}

0
app/javascript/flavours/glitch/styles/mastodon/_theme_utils.scss → app/javascript/flavours/glitch/styles/mastodon/theme/_utils.scss
View File

48
app/javascript/flavours/glitch/styles/mastodon/theme/index.scss Normal file
View File

@@ -0,0 +1,48 @@
@use 'base';
@use 'dark';
@use 'light';
html {
@include base.palette;
&[data-user-theme='system'] {
color-scheme: dark light;
@media (prefers-color-scheme: dark) {
@include dark.tokens;
@media (prefers-contrast: more) {
@include dark.contrast-overrides;
}
}
@media (prefers-color-scheme: light) {
@include light.tokens;
@media (prefers-contrast: more) {
@include light.contrast-overrides;
}
}
}
}
.theme-dark,
html:where(
:not([data-user-theme='mastodon-light'], [data-user-theme='system'])
) {
color-scheme: dark;
@include dark.tokens;
}
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']) {
color-scheme: light;
@include light.tokens;
}