🎨

src/client/components/ui/button.vue

@@ -142,7 +142,7 @@ export default defineComponent({
 
 	&.primary {
 		font-weight: bold;
-		color: #fff !important;
+		color: var(--fgOnAccent) !important;
 		background: var(--accent);
 
 		&:not(:disabled):hover {

src/client/components/ui/menu.vue

@@ -171,13 +171,13 @@ export default defineComponent({
 		}
 
 		&:hover {
-			color: #fff;
+			color: var(--fgOnAccent);
 			background: var(--accent);
 			text-decoration: none;
 		}
 
 		&:active {
-			color: #fff;
+			color: var(--fgOnAccent);
 			background: var(--accentDarken);
 		}
 

src/client/scripts/theme.ts

@@ -23,6 +23,7 @@ export const builtinThemes = [
 	require('@client/themes/d-dark.json5'),
 	require('@client/themes/d-persimmon.json5'),
 	require('@client/themes/d-astro.json5'),
+	require('@client/themes/d-future.json5'),
 	require('@client/themes/d-black.json5'),
 ] as Theme[];
 

src/client/style.scss

@@ -319,7 +319,7 @@ hr {
 }
 
 ._popup {
-	background: var(--panel);
+	background: var(--popup);
 	border-radius: var(--radius);
 	contain: content;
 }

src/client/themes/_dark.json5

@@ -19,6 +19,7 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':lighten<3<@fg',
+		fgOnAccent: '#fff',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
@@ -28,6 +29,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',

src/client/themes/_light.json5

@@ -19,6 +19,7 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':darken<3<@fg',
+		fgOnAccent: '#fff',
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
@@ -28,6 +29,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',

src/client/themes/d-future.json5

+{
+	id: '32a637ef-b47a-4775-bb7b-bacbb823f865',
+
+	name: 'Mi Future',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#63e2b7',
+		bg: '#101014',
+		fg: '#D5D5D6',
+		fgHighlighted: '#fff',
+		fgOnAccent: '#000',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		panel: '#18181c',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		renote: '@accent',
+		mention: '#f2c97d',
+		mentionMe: '@accent',
+		hashtag: '#70c0e8',
+		link: '#e88080',
+	},
+}