Add built-in white and black themes

web/src/app/AppearanceSettings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { api, ApiError, type Theme } from './api'
-import { appearancePaused, type CssSnippet } from '../themes/appearance'
+import { appearancePaused, fixedThemeMode, type CssSnippet } from '../themes/appearance'
 import { loadSettings, reloadTheme, settings, updateSettings, type Settings } from './settings'
 import { toast } from './workspace'
 
@@ -11,6 +11,7 @@ const busy = ref(false)
 const editing = ref<string | null>(null)
 const draft = ref({ name: '', css: '' })
 const missingTheme = computed(() => !themes.value.some((theme) => theme.id === settings.theme))
+const fixedMode = computed(() => fixedThemeMode(settings.theme))
 
 async function refreshThemes() {
   error.value = ''
@@ -74,7 +75,7 @@ async function reset() {
   <p v-if="appearancePaused" class="rm-appearance-note">已临时停用主题和 CSS。可恢复默认外观后重新打开页面。</p>
   <div class="rm-setting">
     <label for="rm-color-mode" class="rm-setting-label">明暗模式</label>
-    <select id="rm-color-mode" :value="settings.colorMode" :disabled="busy" @change="change({ colorMode: ($event.target as HTMLSelectElement).value as Settings['colorMode'] })">
+    <select id="rm-color-mode" :value="fixedMode ?? settings.colorMode" :disabled="busy || !!fixedMode" @change="change({ colorMode: ($event.target as HTMLSelectElement).value as Settings['colorMode'] })">
       <option value="system">跟随系统</option><option value="light">浅色</option><option value="dark">深色</option>
     </select>
   </div>
@@ -87,7 +88,8 @@ async function reset() {
     <button class="rm-btn" :disabled="busy" @click="refreshThemes">刷新列表</button>
   </div>
   <p v-if="error" class="rm-appearance-note rm-auth-error">{{ error }}</p>
-  <p class="rm-appearance-note">主题从服务器数据目录的 themes 文件夹读取；主题和已启用的 CSS 也会应用到分享页。</p>
+  <p v-if="fixedMode" class="rm-appearance-note">白色、黑色主题固定使用对应明暗模式；切换回默认或自定义主题后使用原来的明暗设置。</p>
+  <p class="rm-appearance-note">可选择内置主题，或从服务器数据目录的 themes 文件夹添加主题；主题和已启用的 CSS 也会应用到分享页。</p>
   <div class="rm-setting"><span class="rm-setting-label">CSS 片段</span><button class="rm-btn" :disabled="busy" @click="edit()">新建片段</button></div>
   <div v-for="snippet in settings.cssSnippets" :key="snippet.id" class="rm-snippet-row">
     <label><input type="checkbox" :checked="snippet.enabled" :disabled="busy" @change="toggle(snippet)" />{{ snippet.name }}</label>

web/src/themes/appearance.ts

@@ -13,6 +13,11 @@ export interface Appearance {
 
 export const appearancePaused = new URLSearchParams(location.search).has('reset-appearance')
 
+export function fixedThemeMode(theme: string): 'light' | 'dark' | undefined {
+  if (theme === 'white') return 'light'
+  if (theme === 'black') return 'dark'
+}
+
 export function sanitizeAppearance(raw: Record<string, unknown>): Appearance {
   return {
     colorMode: raw.colorMode === 'light' || raw.colorMode === 'dark' ? raw.colorMode : 'system',
@@ -40,7 +45,7 @@ function style(id: string, css: string) {
 }
 
 function render() {
-  const mode = appearancePaused ? 'system' : current.colorMode
+  const mode = appearancePaused ? 'system' : fixedThemeMode(current.theme) ?? current.colorMode
   const dark = mode === 'system' ? darkMode.matches : mode === 'dark'
   const signature = JSON.stringify([dark, appearancePaused ? '' : [current.theme, themeCSS, current.cssSnippets]])
   if (signature === rendered) return