:art:

7 files changed, 34 insertions, 4 deletions

diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 000f6302a0..4c5d617d76 100644
--- a/src/client/components/ui/button.vue
+++ b/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 {
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index eb96450774..8a1871e256 100644
--- a/src/client/components/ui/menu.vue
+++ b/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);
 		}
 
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index 09441c8a76..3fb5666a72 100644
--- a/src/client/scripts/theme.ts
+++ b/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[];
 
diff --git a/src/client/style.scss b/src/client/style.scss
index 9127b6f238..25a30a36ff 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -319,7 +319,7 @@ hr {
 }
 
 ._popup {
-	background: var(--panel);
+	background: var(--popup);
 	border-radius: var(--radius);
 	contain: content;
 }
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index fef8df4c7c..ca9994d5e9 100644
--- a/src/client/themes/_dark.json5
+++ b/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',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 97f56c75f5..973a6251f0 100644
--- a/src/client/themes/_light.json5
+++ b/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',
diff --git a/src/client/themes/d-future.json5 b/src/client/themes/d-future.json5
new file mode 100644
index 0000000000..05ffe87bf0
--- /dev/null
+++ b/src/client/themes/d-future.json5
@@ -0,0 +1,25 @@
+{
+	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',
+	},
+}