🎨

src/client/theme.ts

@@ -52,7 +52,7 @@ export function applyTheme(theme: Theme, persist = true) {
 
 	for (const tag of document.head.children) {
 		if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
-			tag.setAttribute('content', props['accent']);
+			tag.setAttribute('content', props['html']);
 			break;
 		}
 	}

src/client/themes/_dark.json5

@@ -15,6 +15,7 @@
 		bg: '#000',
 		fg: '#c7d1d8',
 		fgHighlighted: ':lighten<3<@fg',
+		html: '@bg',
 		panel: '#111213',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',

src/client/themes/_light.json5

@@ -15,6 +15,7 @@
 		bg: '#fafafa',
 		fg: '#5c6a73',
 		fgHighlighted: ':darken<3<@fg',
+		html: '@bg',
 		panel: '#fff',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',

src/client/themes/halloween.json5

@@ -12,6 +12,7 @@
 		panel: '#1f1d30',
 		bg: '#0f0e17',
 		fg: '#b1bee3',
+		html: '@accent',
 		renote: '@accent',
 	},
 }

src/server/web/views/base.pug

@@ -40,7 +40,7 @@ html
 			if (theme) {
 				for (const [k, v] of Object.entries(JSON.parse(theme))) {
 					document.documentElement.style.setProperty(`--${k}`, v.toString());
-					if (k === 'accent') {
+					if (k === 'html') {
 						for (const tag of document.head.children) {
 							if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
 								tag.setAttribute('content', v);