fix: retro in app

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
@@ -123,6 +123,11 @@ const messages = defineMessages({
 
 const os = ref(await getOS())
 const settings = ref(await get())
+const themeOptions = computed(() =>
+	themeStore
+		.getThemeOptions()
+		.filter((theme) => theme !== 'retro' || themeStore.devMode || settings.value.theme === 'retro'),
+)
 
 watch(
 	settings,
@@ -146,7 +151,7 @@ watch(
 			}
 		"
 		:current-theme="settings.theme"
-		:theme-options="themeStore.getThemeOptions()"
+		:theme-options="themeOptions"
 		system-theme-color="system"
 	/>
 

apps/app-frontend/src/helpers/types.d.ts

@@ -189,7 +189,7 @@ type AppSettings = {
 	max_concurrent_downloads: number
 	max_concurrent_writes: number
 
-	theme: 'dark' | 'light' | 'oled'
+	theme: 'dark' | 'light' | 'oled' | 'retro' | 'system'
 	default_page: 'Home' | 'Library'
 	collapsed_navigation: boolean
 	advanced_rendering: boolean

apps/app-frontend/src/store/theme.ts

@@ -20,7 +20,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	always_show_copy_details: false,
 }
 
-export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const
+export const THEME_OPTIONS = ['dark', 'light', 'oled', 'retro', 'system'] as const
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
 export type FeatureFlags = Record<FeatureFlag, boolean>

packages/app-lib/src/state/settings.rs

@@ -329,6 +329,7 @@ pub enum Theme {
     Dark,
     Light,
     Oled,
+    Retro,
     System,
 }
 
@@ -338,6 +339,7 @@ impl Theme {
             Theme::Dark => "dark",
             Theme::Light => "light",
             Theme::Oled => "oled",
+            Theme::Retro => "retro",
             Theme::System => "system",
         }
     }
@@ -347,6 +349,7 @@ impl Theme {
             "dark" => Theme::Dark,
             "light" => Theme::Light,
             "oled" => Theme::Oled,
+            "retro" => Theme::Retro,
             "system" => Theme::System,
             _ => Theme::Dark,
         }

packages/assets/styles/variables.scss

@@ -423,6 +423,38 @@ html {
 
 .retro-mode {
 	@extend .dark-mode;
+	--surface-1: #191917;
+	--surface-2: rgb(22, 22, 21);
 	--surface-2-5: #3a3c3e;
+	--surface-3: #232421;
+	--surface-4: #3a3b38;
+	--surface-5: #5a5c58;
+	--color-button-bg: #3a3b38;
+	--color-base: #c3c4b3;
+	--color-secondary: #9b9e98;
+	--color-contrast: #e6e2d1;
+
+	--color-brand: #4d9227;
+	--color-brand-highlight: #25421e;
+	--color-accent-contrast: #ffffff;
+	--color-ad: var(--color-brand-highlight);
+	--color-ad-raised: var(--color-brand);
+	--color-ad-contrast: black;
+	--color-ad-highlight: var(--color-brand);
+
+	--color-red: rgb(232, 32, 13);
+	--color-orange: rgb(232, 141, 13);
+	--color-green: rgb(60, 219, 54);
+	--color-blue: rgb(9, 159, 239);
+	--color-purple: rgb(139, 129, 230);
+	--color-gray: #718096;
+
+	--color-red-highlight: rgba(232, 32, 13, 0.25);
+	--color-orange-highlight: rgba(232, 141, 13, 0.25);
+	--color-green-highlight: rgba(60, 219, 54, 0.25);
+	--color-blue-highlight: rgba(9, 159, 239, 0.25);
+	--color-purple-highlight: rgba(139, 129, 230, 0.25);
+	--color-gray-highlight: rgba(113, 128, 150, 0.25);
+
 	--brand-gradient-strong-bg: #3a3b38;
 }