#34

backend/app/models/setting.rb

@@ -1,5 +1,8 @@
 class Setting < ApplicationRecord
   THEMES = ['system', 'light', 'dark'].freeze
+
+  # These remain in the typed settings schema to preserve existing backend
+  # work. The common `/users/settings` page currently surfaces only `theme`.
   AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
   WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
 

frontend/src/App.tsx

@@ -10,9 +10,14 @@ import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
-import { UserSettingsProvider } from '@/components/users/UserSettingsProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import {
+    applyClientAppearance,
+    fetchUserSettings,
+    getClientThemeMode,
+    seedClientThemeMode,
+} from '@/lib/settings'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
 import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
@@ -105,6 +110,19 @@ const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
 
+  useEffect (() => {
+    applyClientAppearance ()
+
+    const mediaQuery = window.matchMedia ('(prefers-color-scheme: dark)')
+    const handleThemeChange = () => {
+      if (getClientThemeMode () === 'system')
+	applyClientAppearance ()
+    }
+
+    mediaQuery.addEventListener ('change', handleThemeChange)
+    return () => mediaQuery.removeEventListener ('change', handleThemeChange)
+  }, [])
+
   useEffect (() => {
     const createUser = async () => {
       const data = await apiPost<{ code: string; user: User }> ('/users')
@@ -138,6 +156,23 @@ const App: FC = () => {
       createUser ()
   }, [])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    void (async () => {
+      try
+      {
+	const settings = await fetchUserSettings ()
+	seedClientThemeMode (settings.theme)
+	applyClientAppearance ()
+      }
+      catch
+      {
+      }
+    }) ()
+  }, [user])
+
   switch (status)
   {
   case 503:
@@ -146,26 +181,24 @@ const App: FC = () => {
 
   return (
       <>
-	<UserSettingsProvider user={user}>
+	<RouteBlockerOverlay/>
-	  <RouteBlockerOverlay/>
+	{import.meta.env.DEV && <DevModeWatermark/>}
-	  {import.meta.env.DEV && <DevModeWatermark/>}
 
-	  <BrowserRouter>
+	<BrowserRouter>
-	    <DialogueProvider>
+	  <DialogueProvider>
-	      <LayoutGroup>
+	    <LayoutGroup>
-		<motion.div
+	      <motion.div
-		    layout="position"
+		  layout="position"
-		    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-		    className="relative flex flex-col h-dvh w-full overflow-y-hidden">
+		  className="relative flex flex-col h-dvh w-full overflow-y-hidden">
-		  <TopNav user={user}/>
+		<TopNav user={user}/>
-		  <RouteTransitionWrapper user={user} setUser={setUser}/>
+		<RouteTransitionWrapper user={user} setUser={setUser}/>
-		</motion.div>
+	      </motion.div>
-	      </LayoutGroup>
+	    </LayoutGroup>
 
-	      <Toaster/>
+	    <Toaster/>
-	    </DialogueProvider>
+	  </DialogueProvider>
-	  </BrowserRouter>
+	</BrowserRouter>
-	</UserSettingsProvider>
       </>)
 }
 

frontend/src/components/TagLink.tsx

@@ -1,9 +1,8 @@
 import PrefetchLink from '@/components/PrefetchLink'
 import ResponsiveMarqueeText from '@/components/ResponsiveMarqueeText'
-import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
 import { cn } from '@/lib/utils'
 
-import type { ComponentProps, FC, HTMLAttributes } from 'react'
+import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
 
 import type { Tag } from '@/types'
 
@@ -36,15 +35,16 @@ const TagLink: FC<Props> = ({ tag,
 			      withWiki  = true,
 			      withCount = true,
 			      className,
+			      style,
 			      title,
 			      ...props }) => {
-  const spanClass = cn (
+  const colourStyle = {
-      `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
+      '--tag-link-colour': `var(--tag-colour-${ tag.category })`,
-      `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
+      '--tag-link-hover-colour': `var(--tag-colour-${ tag.category }-hover)`,
-  const linkClass = cn (
+      ...style,
-      spanClass,
+  } as CSSProperties
-      `hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`,
+  const spanClass = 'tag-link-colour'
-      `dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`)
+  const linkClass = 'tag-link-colour tag-link-hover-colour'
   const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
   const rootClass =
       'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
@@ -63,7 +63,8 @@ const TagLink: FC<Props> = ({ tag,
 		  ? (
 		      <PrefetchLink
 			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
-			  className={linkClass}>
+			  className={linkClass}
+			  style={colourStyle}>
 			?
 		      </PrefetchLink>)
 		  : (
@@ -71,13 +72,15 @@ const TagLink: FC<Props> = ({ tag,
 		      ? (
 			  <PrefetchLink
 			      to={`/materials/${ tag.materialId }`}
-			      className={linkClass}>
+			      className={linkClass}
+			      style={colourStyle}>
 			    ?
 			  </PrefetchLink>)
 		      : (
 			  <PrefetchLink
 			      to={`/tags/${ tag.id }/deerjikists`}
-			      className={linkClass}>
+			      className={linkClass}
+			      style={colourStyle}>
 			    ?
 			  </PrefetchLink>)))
 	       : (
@@ -120,6 +123,7 @@ const TagLink: FC<Props> = ({ tag,
 	      <span
 		  title={textTitle}
 		  className={cn (spanClass, textClass, className)}
+		  style={colourStyle}
 		  {...props}>
 		<ResponsiveMarqueeText
 		    text={tag.matchedAlias}
@@ -134,6 +138,7 @@ const TagLink: FC<Props> = ({ tag,
 		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
 		title={textTitle}
 		className={cn (linkClass, textClass, className)}
+		style={colourStyle}
 		{...props}>
 	      <ResponsiveMarqueeText
 		  text={tag.name}
@@ -144,6 +149,7 @@ const TagLink: FC<Props> = ({ tag,
 	    <span
 		  title={textTitle}
 		  className={cn (spanClass, textClass, className)}
+		  style={colourStyle}
 		  {...props}>
 	      <ResponsiveMarqueeText
 		  text={tag.name}

frontend/src/components/common/TabGroup.tsx

@@ -7,12 +7,15 @@ type TabProps = { name:     string
 		  init?:    boolean
 		  children: React.ReactNode }
 
-type Props = { children: React.ReactNode }
+type Props = {
+    children:    React.ReactNode
+    rightAddon?: React.ReactNode
+}
 
 export const Tab = ({ children }: TabProps) => <>{children}</>
 
 
-const TabGroup: FC<Props> = ({ children }) => {
+const TabGroup: FC<Props> = ({ children, rightAddon }) => {
   const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
 
   const [current, setCurrent] = useState<number> (() => {
@@ -22,17 +25,23 @@ const TabGroup: FC<Props> = ({ children }) => {
 
   return (
       <div className="mt-4">
-	<div className="flex gap-4">
+	<div className="flex items-center justify-between gap-4">
-	  {tabs.map ((tab, i) => (
+	  <div className="flex min-w-0 gap-4">
-	      <a key={i}
+	    {tabs.map ((tab, i) => (
-		 href="#"
+		<a key={i}
-		 className={cn (i === current && 'font-bold')}
+		   href="#"
-		 onClick={ev => {
+		   className={cn (i === current && 'font-bold')}
-		   ev.preventDefault ()
+		   onClick={ev => {
-		   setCurrent (i)
+		     ev.preventDefault ()
-		 }}>
+		     setCurrent (i)
-		{tab.props.name}
+		   }}>
-	      </a>))}
+		  {tab.props.name}
+		</a>))}
+	  </div>
+	  {rightAddon && (
+	      <div className="shrink-0">
+		{rightAddon}
+	      </div>)}
 	</div>
 	<div className="mt-2">
 	  {tabs[current]}

frontend/src/components/users/UserSettingsProvider.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 
-import { DEFAULT_USER_SETTINGS, fetchUserSettings } from '@/lib/settings'
+import {
+    applyClientAppearance,
+    DEFAULT_USER_SETTINGS,
+    fetchUserSettings,
+} from '@/lib/settings'
 
 import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
 
@@ -16,29 +20,6 @@ type ContextValue = {
 const UserSettingsContext = createContext<ContextValue | null> (null)
 
 
-const applyTheme = (theme: UserSettings['theme']) => {
-  const root = document.documentElement
-  const media = window.matchMedia ('(prefers-color-scheme: dark)')
-
-  const sync = () => {
-    const dark = theme === 'dark' || (theme === 'system' && media.matches)
-    root.classList.toggle ('dark', dark)
-    root.style.colorScheme = dark ? 'dark' : 'light'
-  }
-
-  sync ()
-
-  if (theme !== 'system')
-    return () => { }
-
-  const onChange = () => sync ()
-  media.addEventListener ('change', onChange)
-  return () => {
-    media.removeEventListener ('change', onChange)
-  }
-}
-
-
 export const UserSettingsProvider: FC<{
     children:  ReactNode
     user:      User | null }> = ({ children, user }) => {
@@ -87,7 +68,10 @@ export const UserSettingsProvider: FC<{
     }
   }, [user])
 
-  useEffect (() => applyTheme (settings.theme), [settings.theme])
+  useEffect (() => {
+    void settings.theme
+    applyClientAppearance ()
+  }, [settings.theme])
 
   const value = useMemo<ContextValue> (() => ({
       error,

frontend/src/index.css

@@ -10,6 +10,10 @@
   {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
@@ -29,12 +33,32 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
+    --theme-link: 221.2 83.2% 53.3%;
+
+    --tag-colour-deerjikist: #9f1239;
+    --tag-colour-deerjikist-hover: #b62a51;
+    --tag-colour-meme: #6b21a8;
+    --tag-colour-meme-hover: #8238bf;
+    --tag-colour-character: #4d7c0f;
+    --tag-colour-character-hover: #649326;
+    --tag-colour-general: #155e75;
+    --tag-colour-general-hover: #2c758c;
+    --tag-colour-material: #c2410c;
+    --tag-colour-material-hover: #d95823;
+    --tag-colour-meta: #a16207;
+    --tag-colour-meta-hover: #b8791e;
+    --tag-colour-nico: #4b5563;
+    --tag-colour-nico-hover: #626c7a;
   }
 
   .dark
   {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
@@ -58,16 +82,16 @@
 
   body
   {
-    @apply overflow-x-clip;
+    @apply overflow-x-clip bg-background text-foreground;
   }
 
   a
   {
-    @apply text-blue-700 dark:text-blue-300;
+    color: hsl(var(--theme-link));
   }
   a:hover
   {
-    @apply text-blue-500 dark:text-blue-100;
+    opacity: .85;
   }
 }
 
@@ -78,8 +102,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  color: hsl(var(--foreground));
-  background-color: #242424;
+  background-color: hsl(var(--background));
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -120,28 +144,15 @@ body
 {
   margin: 0;
   min-width: 320px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 #root
 {
   min-height: 100dvh;
-}
+  background: hsl(var(--background));
-
+  color: hsl(var(--foreground));
-@media (prefers-color-scheme: light)
-{
-  :root
-  {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover
-  {
-    color: #747bff;
-  }
-  button
-  {
-    background-color: #f9f9f9;
-  }
 }
 
 @keyframes wiki-blink
@@ -161,6 +172,16 @@ body
   position: relative;
 }
 
+.tag-link-colour
+{
+  color: var(--tag-link-colour);
+}
+
+.tag-link-hover-colour:hover
+{
+  color: var(--tag-link-hover-colour) !important;
+}
+
 .tag-marquee__animated
 {
   position: absolute;

frontend/src/lib/settings.ts

@@ -1,14 +1,51 @@
+import { CATEGORIES } from '@/consts'
 import { apiGet, apiPatch } from '@/lib/api'
 
-import type { FetchPostsOrder, FetchTagsOrder } from '@/types'
+import type { Category, FetchPostsOrder, FetchTagsOrder } from '@/types'
 
-// DB-backed user settings. These are worth sharing across browsers for one user.
 export type UserSettings = {
     theme:               'system' | 'light' | 'dark'
     autoFetchTitle:      'auto' | 'manual' | 'off'
     autoFetchThumbnail:  'auto' | 'manual' | 'off'
     wikiEditorMode:      'split' | 'write' | 'preview' }
 
+export type ThemeTagColours = Record<Category, string>
+export type BuiltinThemeId = 'light' | 'dark'
+export type ThemeId = BuiltinThemeId | `custom:${ string }`
+export type ActiveThemeId = ThemeId | 'system'
+export type ResolvedTheme = 'light' | 'dark'
+export type ThemeTokens = {
+    background:             string
+    foreground:             string
+    card:                   string
+    cardForeground:         string
+    popover:                string
+    popoverForeground:      string
+    primary:                string
+    primaryForeground:      string
+    secondary:              string
+    secondaryForeground:    string
+    muted:                  string
+    mutedForeground:        string
+    accent:                 string
+    accentForeground:       string
+    destructive:            string
+    destructiveForeground:  string
+    border:                 string
+    input:                  string
+    ring:                   string
+    link:                   string
+    tagColours:             ThemeTagColours
+}
+export type ClientTheme = {
+    id:         ThemeId
+    name:       string
+    builtin:    boolean
+    baseTheme:  BuiltinThemeId
+    tokens:     ThemeTokens }
+export type CustomClientTheme =
+    ClientTheme & { builtin: false }
+
 export type TheatreLayoutMode = 'threeColumns' | 'tagsBottom' | 'commentsBottom'
 export type TheatreTagFlow = 'vertical' | 'horizontal'
 export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
@@ -24,15 +61,32 @@ type ClientListSettings = {
     limit?: ClientListLimit
     order?: string }
 
-// Browser-local settings. These depend on device or screen context.
+export type ClientAppearanceSettings = {
+    activeThemeId?: ActiveThemeId
+    customThemes?:  Record<string, CustomClientTheme>
+    // Legacy fields kept for migration from the earlier appearance model.
+    theme?:         UserSettings['theme']
+    tagColours?:    Partial<ThemeTagColours> }
+
+// DB-backed settings. At present only `theme` is surfaced in `/users/settings`.
+// The remaining fields are retained for existing backend work and are not wired
+// to the common settings UI yet.
+export const DEFAULT_USER_SETTINGS: UserSettings = {
+    theme:               'system',
+    autoFetchTitle:      'manual',
+    autoFetchThumbnail:  'manual',
+    wikiEditorMode:      'split' }
+
+// Browser-local settings only. These are device or screen specific.
 export type ClientSettings = {
-    panes?:          Record<string, ClientPaneSettings>
+    appearance?:    ClientAppearanceSettings
-    lists?:          Partial<Record<ClientListKey, ClientListSettings>>
+    panes?:         Record<string, ClientPaneSettings>
-    theatre?:        {
+    lists?:         Partial<Record<ClientListKey, ClientListSettings>>
+    theatre?:       {
 	layoutMode?: TheatreLayoutMode
 	tagFlow?:    TheatreTagFlow
     }
-    gekanator?:     {
+    gekanator?:    {
 	backgroundMotion?: GekanatorBackgroundMotionMode
     }
     reducedMotion?: string
@@ -40,15 +94,7 @@ export type ClientSettings = {
     thumbnailMode?: string }
 
 export const CLIENT_SETTINGS_STORAGE_KEY = 'btrc_hub.client_settings'
-export const DEFAULT_USER_SETTINGS: UserSettings = {
-    theme:               'system',
-    autoFetchTitle:      'manual',
-    autoFetchThumbnail:  'manual',
-    wikiEditorMode:      'split' }
-
 export const THEME_OPTIONS = ['system', 'light', 'dark'] as const
-export const AUTO_FETCH_OPTIONS = ['auto', 'manual', 'off'] as const
-export const WIKI_EDITOR_MODE_OPTIONS = ['split', 'write', 'preview'] as const
 export const LIST_LIMIT_OPTIONS = [20, 50, 100] as const
 export const POST_LIST_ORDER_OPTIONS = [
     'title:asc',
@@ -76,26 +122,130 @@ export const TAG_LIST_ORDER_OPTIONS = [
 ] as const satisfies readonly FetchTagsOrder[]
 export const DEFAULT_POST_LIST_LIMIT: ClientListLimit = 20
 export const DEFAULT_POST_LIST_ORDER: FetchPostsOrder = 'original_created_at:desc'
-export const DEFAULT_TAG_LIST_ORDER: FetchTagsOrder = 'name:asc'
+export const DEFAULT_TAG_LIST_ORDER: FetchTagsOrder = 'post_count:desc'
+export const DEFAULT_LIGHT_THEME_TAG_COLOURS: ThemeTagColours = {
+    deerjikist: '#9f1239',
+    meme:       '#6b21a8',
+    character:  '#4d7c0f',
+    general:    '#155e75',
+    material:   '#c2410c',
+    meta:       '#a16207',
+    nico:       '#4b5563',
+}
+export const DEFAULT_DARK_THEME_TAG_COLOURS: ThemeTagColours = {
+    deerjikist: '#fb7185',
+    meme:       '#d8b4fe',
+    character:  '#bef264',
+    general:    '#67e8f9',
+    material:   '#fdba74',
+    meta:       '#fde047',
+    nico:       '#e5e7eb',
+}
+export const DEFAULT_THEME_TAG_COLOURS = DEFAULT_LIGHT_THEME_TAG_COLOURS
+export const LIGHT_THEME_TOKENS: ThemeTokens = {
+    background:            '0 0% 100%',
+    foreground:            '222.2 84% 4.9%',
+    card:                  '0 0% 100%',
+    cardForeground:        '222.2 84% 4.9%',
+    popover:               '0 0% 100%',
+    popoverForeground:     '222.2 84% 4.9%',
+    primary:               '222.2 47.4% 11.2%',
+    primaryForeground:     '210 40% 98%',
+    secondary:             '210 40% 96.1%',
+    secondaryForeground:   '222.2 47.4% 11.2%',
+    muted:                 '210 40% 96.1%',
+    mutedForeground:       '215.4 16.3% 46.9%',
+    accent:                '210 40% 96.1%',
+    accentForeground:      '222.2 47.4% 11.2%',
+    destructive:           '0 72.2% 50.6%',
+    destructiveForeground: '210 40% 98%',
+    border:                '214.3 31.8% 91.4%',
+    input:                 '214.3 31.8% 91.4%',
+    ring:                  '222.2 84% 4.9%',
+    link:                  '221.2 83.2% 53.3%',
+    tagColours:            DEFAULT_LIGHT_THEME_TAG_COLOURS,
+}
+export const DARK_THEME_TOKENS: ThemeTokens = {
+    background:            '222.2 84% 4.9%',
+    foreground:            '210 40% 98%',
+    card:                  '222.2 84% 4.9%',
+    cardForeground:        '210 40% 98%',
+    popover:               '222.2 84% 4.9%',
+    popoverForeground:     '210 40% 98%',
+    primary:               '210 40% 98%',
+    primaryForeground:     '222.2 47.4% 11.2%',
+    secondary:             '217.2 32.6% 17.5%',
+    secondaryForeground:   '210 40% 98%',
+    muted:                 '217.2 32.6% 17.5%',
+    mutedForeground:       '215 20.2% 65.1%',
+    accent:                '217.2 32.6% 17.5%',
+    accentForeground:      '210 40% 98%',
+    destructive:           '0 62.8% 45%',
+    destructiveForeground: '210 40% 98%',
+    border:                '217.2 32.6% 17.5%',
+    input:                 '217.2 32.6% 17.5%',
+    ring:                  '212.7 26.8% 83.9%',
+    link:                  '213.1 93.9% 67.8%',
+    tagColours:            DEFAULT_DARK_THEME_TAG_COLOURS,
+}
+export const BUILTIN_THEMES: Record<BuiltinThemeId, ClientTheme> = {
+    light: {
+	id:         'light',
+	name:       'ライト・モード',
+	builtin:    true,
+	baseTheme:  'light',
+	tokens:     LIGHT_THEME_TOKENS,
+    },
+    dark: {
+	id:         'dark',
+	name:       'ダーク・モード',
+	builtin:    true,
+	baseTheme:  'dark',
+	tokens:     DARK_THEME_TOKENS,
+    },
+}
 
 const LEGACY_THEATRE_LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
 const LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
 const LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY =
     'gekanator:background-motion:v1'
+const LEGACY_MIGRATED_THEME_ID = 'custom:legacy-migrated'
 
 
-export const fetchUserSettings = async (): Promise<UserSettings> =>
+export const fetchUserSettings = async (): Promise<UserSettings> => {
-    await apiGet<UserSettings> ('/users/settings')
+  const raw = await apiGet<{
+      theme:               UserSettings['theme']
+      auto_fetch_title:      UserSettings['autoFetchTitle']
+      auto_fetch_thumbnail:  UserSettings['autoFetchThumbnail']
+      wiki_editor_mode:      UserSettings['wikiEditorMode']
+  }> ('/users/settings')
+
+  return {
+      theme:               raw.theme,
+      autoFetchTitle:      raw.auto_fetch_title,
+      autoFetchThumbnail:  raw.auto_fetch_thumbnail,
+      wikiEditorMode:      raw.wiki_editor_mode,
+  }
+}
 
 
 export const updateUserSettings = async (
-    settings: Partial<{
+    settings: Partial<{ theme: UserSettings['theme'] }>,
-	theme:                 UserSettings['theme']
+): Promise<UserSettings> => {
-	auto_fetch_title:      UserSettings['autoFetchTitle']
+  const raw = await apiPatch<{
-	auto_fetch_thumbnail:  UserSettings['autoFetchThumbnail']
+      theme:               UserSettings['theme']
-	wiki_editor_mode:      UserSettings['wikiEditorMode']
+      auto_fetch_title:      UserSettings['autoFetchTitle']
-    }>,
+      auto_fetch_thumbnail:  UserSettings['autoFetchThumbnail']
-): Promise<UserSettings> => await apiPatch<UserSettings> ('/users/settings', settings)
+      wiki_editor_mode:      UserSettings['wikiEditorMode']
+  }> ('/users/settings', settings)
+
+  return {
+      theme:               raw.theme,
+      autoFetchTitle:      raw.auto_fetch_title,
+      autoFetchThumbnail:  raw.auto_fetch_thumbnail,
+      wikiEditorMode:      raw.wiki_editor_mode,
+  }
+}
 
 
 const safeParseClientSettings = (raw: string | null): ClientSettings => {
@@ -136,6 +286,417 @@ const validListLimit = (value: unknown): ClientListLimit | null =>
     value === 20 || value === 50 || value === 100 ? value : null
 
 
+const normaliseHexColour = (value: string): string | null =>
+    /^#[0-9a-fA-F]{6}$/.test (value) ? value.toLowerCase () : null
+
+
+const isBuiltinThemeId = (value: string): value is BuiltinThemeId =>
+    value === 'light' || value === 'dark'
+
+
+const isCustomThemeId = (value: string): value is `custom:${ string }` =>
+    value.startsWith ('custom:')
+
+
+const themeCopyName = (baseTheme: BuiltinThemeId): string =>
+    `${ BUILTIN_THEMES[baseTheme].name }のコピー`
+
+
+const appearanceFromSettings = (): ClientAppearanceSettings =>
+    loadClientSettings ().appearance ?? { }
+
+
+export const hasStoredClientThemeSelection = (): boolean => {
+  const appearance = appearanceFromSettings ()
+  return (
+      appearance.activeThemeId != null
+      || appearance.customThemes != null
+      || appearance.theme != null
+      || appearance.tagColours != null
+  )
+}
+
+
+const mixHexColour = (
+    source:  string,
+    target:  string,
+    ratio:   number,
+): string => {
+  const clampedRatio = Math.max (0, Math.min (1, ratio))
+  const src = source.slice (1)
+  const dst = target.slice (1)
+  const channels = [0, 2, 4].map (offset => {
+      const srcValue = parseInt (src.slice (offset, offset + 2), 16)
+      const dstValue = parseInt (dst.slice (offset, offset + 2), 16)
+      const mixed = Math.round (
+	  srcValue + (dstValue - srcValue) * clampedRatio,
+      )
+      return mixed.toString (16).padStart (2, '0')
+  })
+
+  return `#${ channels.join ('') }`
+}
+
+
+export const getClientThemeMode = (): UserSettings['theme'] =>
+    (() => {
+      const appearance = appearanceFromSettings ()
+      const customThemes = getClientCustomThemes ()
+
+      if (appearance.activeThemeId === 'system')
+	return 'system'
+      if (appearance.activeThemeId === 'light' || appearance.activeThemeId === 'dark')
+	return appearance.activeThemeId
+      if (
+	  typeof appearance.activeThemeId === 'string'
+	  && customThemes[appearance.activeThemeId] != null
+      )
+	return customThemes[appearance.activeThemeId].baseTheme
+
+      return appearance.theme ?? DEFAULT_USER_SETTINGS.theme
+    }) ()
+
+
+export const setClientThemeMode = (theme: UserSettings['theme']): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      appearance: {
+	  ...(settings.appearance ?? { }),
+	  activeThemeId: theme,
+	  theme,
+      },
+  }))
+}
+
+
+export const seedClientThemeMode = (theme: UserSettings['theme']): void => {
+  if (hasStoredClientThemeSelection ())
+    return
+
+  setClientThemeMode (theme)
+}
+
+
+const prefersDarkTheme = (): boolean =>
+    window.matchMedia ('(prefers-color-scheme: dark)').matches
+
+
+export const resolveThemeMode = (
+    theme: UserSettings['theme'],
+): ResolvedTheme =>
+    theme === 'system'
+    ? (prefersDarkTheme () ? 'dark' : 'light')
+    : theme
+
+
+export const defaultThemeTagColoursFor = (
+    theme: ResolvedTheme,
+): ThemeTagColours =>
+    theme === 'dark'
+    ? DEFAULT_DARK_THEME_TAG_COLOURS
+    : DEFAULT_LIGHT_THEME_TAG_COLOURS
+
+
+const normaliseThemeTagColours = (
+    input:     Partial<ThemeTagColours> | null | undefined,
+    fallback:  ThemeTagColours,
+): ThemeTagColours =>
+    CATEGORIES.reduce<ThemeTagColours> (
+	(colours, category) => {
+	    const candidate = input?.[category]
+	    colours[category] =
+		typeof candidate === 'string' && normaliseHexColour (candidate) != null
+		? candidate
+		: fallback[category]
+	    return colours
+	},
+	{ ...fallback },
+    )
+
+
+const normaliseCustomTheme = (
+    rawTheme:    unknown,
+): CustomClientTheme | null => {
+  if (!(rawTheme) || typeof rawTheme !== 'object')
+    return null
+
+  const theme = rawTheme as Record<string, unknown>
+  const id = typeof theme.id === 'string' ? theme.id : null
+  const name = typeof theme.name === 'string' ? theme.name : null
+  const baseTheme = typeof theme.baseTheme === 'string' ? theme.baseTheme : null
+  if (
+      id == null
+      || !(isCustomThemeId (id))
+      || name == null
+      || baseTheme == null
+      || !(isBuiltinThemeId (baseTheme))
+  )
+    return null
+
+  return {
+      id,
+      name,
+      builtin: false,
+      baseTheme,
+      tokens: {
+	  ...(
+	      baseTheme === 'dark'
+	      ? DARK_THEME_TOKENS
+	      : LIGHT_THEME_TOKENS
+	  ),
+	  ...(theme.tokens && typeof theme.tokens === 'object'
+	      ? theme.tokens as Partial<ThemeTokens>
+	      : { }),
+	  tagColours: normaliseThemeTagColours (
+	      (
+		  theme.tokens
+		  && typeof theme.tokens === 'object'
+		  && 'tagColours' in theme.tokens
+	      )
+	      ? (theme.tokens as { tagColours?: Partial<ThemeTagColours> }).tagColours
+	      : theme.tagColours as Partial<ThemeTagColours> | undefined,
+	      defaultThemeTagColoursFor (baseTheme),
+	  ),
+      },
+  }
+}
+
+
+export const getClientCustomThemes = (): Record<string, CustomClientTheme> => {
+  const appearance = appearanceFromSettings ()
+  const customThemes = appearance.customThemes
+
+  if (customThemes && typeof customThemes === 'object')
+    {
+      return Object.entries (customThemes).reduce<Record<string, CustomClientTheme>> (
+	  (themes, [key, rawTheme]) => {
+	      const theme = normaliseCustomTheme (rawTheme)
+	      if (theme != null)
+		themes[key] = theme
+	      return themes
+	  },
+	  { },
+      )
+    }
+
+  const legacyTagColours = appearance.tagColours
+  if (!(legacyTagColours) || Object.keys (legacyTagColours).length === 0)
+    return { }
+
+  const baseTheme = resolveThemeMode (appearance.theme ?? DEFAULT_USER_SETTINGS.theme)
+  return {
+      [LEGACY_MIGRATED_THEME_ID]: {
+	  id: LEGACY_MIGRATED_THEME_ID,
+	  name: themeCopyName (baseTheme),
+	  builtin: false,
+	  baseTheme,
+	  tokens: {
+	      ...(baseTheme === 'dark' ? DARK_THEME_TOKENS : LIGHT_THEME_TOKENS),
+	      tagColours: normaliseThemeTagColours (
+		  legacyTagColours,
+		  defaultThemeTagColoursFor (baseTheme),
+	      ),
+	  },
+      },
+  }
+}
+
+
+export const getClientActiveThemeId = (): ActiveThemeId => {
+  const appearance = appearanceFromSettings ()
+  const customThemes = getClientCustomThemes ()
+
+  if (
+      typeof appearance.activeThemeId === 'string'
+      && (
+	  appearance.activeThemeId === 'system'
+	  || isBuiltinThemeId (appearance.activeThemeId)
+	  || customThemes[appearance.activeThemeId] != null
+      )
+  )
+    return appearance.activeThemeId
+
+  if (
+      Object.keys (customThemes).length > 0
+      && appearance.tagColours != null
+      && Object.keys (appearance.tagColours).length > 0
+  )
+    return LEGACY_MIGRATED_THEME_ID
+
+  if (typeof appearance.theme === 'string' && (
+      appearance.theme === 'system'
+      || appearance.theme === 'light'
+      || appearance.theme === 'dark'
+  ))
+    return appearance.theme
+
+  return DEFAULT_USER_SETTINGS.theme
+}
+
+
+export const getThemeById = (
+    themeId:       ThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): ClientTheme =>
+    isBuiltinThemeId (themeId)
+    ? BUILTIN_THEMES[themeId]
+    : (customThemes[themeId] ?? BUILTIN_THEMES.light)
+
+
+export const getResolvedThemeFromSelection = (
+    activeThemeId: ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): ClientTheme =>
+    activeThemeId === 'system'
+    ? BUILTIN_THEMES[resolveThemeMode ('system')]
+    : getThemeById (activeThemeId, customThemes)
+
+
+export const deriveUserThemeModeFromSelection = (
+    activeThemeId: ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): UserSettings['theme'] => {
+  if (activeThemeId === 'system')
+    return 'system'
+
+  return getThemeById (activeThemeId, customThemes).baseTheme
+}
+
+
+export const createCustomThemeFromBase = (
+    baseTheme:   BuiltinThemeId,
+    tokens?:     ThemeTokens,
+): CustomClientTheme => {
+  const id = `custom:${ crypto.randomUUID () }` as ThemeId
+  return {
+      id,
+      name: themeCopyName (baseTheme),
+      builtin: false,
+      baseTheme,
+      tokens: tokens ?? {
+	  ...(baseTheme === 'dark' ? DARK_THEME_TOKENS : LIGHT_THEME_TOKENS),
+      },
+  }
+}
+
+
+export const getClientThemeTagColours = (
+    activeThemeId: ActiveThemeId = getClientActiveThemeId (),
+    customThemes:  Record<string, CustomClientTheme> = getClientCustomThemes (),
+): ThemeTagColours => {
+  return {
+      ...getResolvedThemeFromSelection (activeThemeId, customThemes).tokens.tagColours,
+  }
+}
+
+
+export const setClientAppearanceThemes = (
+    activeThemeId: ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      appearance: {
+	  ...(settings.appearance ?? { }),
+	  activeThemeId,
+	  customThemes,
+	  theme: undefined,
+	  tagColours: undefined,
+      },
+  }))
+}
+
+
+export const setClientThemeTagColours = (
+    tagColours:     ThemeTagColours,
+    activeThemeId:  ActiveThemeId = getClientActiveThemeId (),
+    customThemes:   Record<string, CustomClientTheme> = getClientCustomThemes (),
+): void => {
+  if (activeThemeId === 'system' || isBuiltinThemeId (activeThemeId))
+    return
+
+  setClientAppearanceThemes (
+      activeThemeId,
+      {
+	  ...customThemes,
+	  [activeThemeId]: {
+	      ...customThemes[activeThemeId],
+	      tokens: {
+		  ...customThemes[activeThemeId].tokens,
+		  tagColours,
+	      },
+	  },
+      },
+  )
+}
+
+
+export const applyThemeMode = (theme: UserSettings['theme']): void => {
+  const root = document.documentElement
+  const resolvedTheme = resolveThemeMode (theme)
+
+  root.classList.toggle ('dark', resolvedTheme === 'dark')
+  root.style.colorScheme = resolvedTheme
+}
+
+
+export const applyThemeTagColours = (tagColours: ThemeTagColours): void => {
+  const root = document.documentElement
+
+  CATEGORIES.forEach (category => {
+      const colour = tagColours[category]
+      root.style.setProperty (`--tag-colour-${ category }`, colour)
+      root.style.setProperty (
+	  `--tag-colour-${ category }-hover`,
+	  mixHexColour (colour, '#ffffff', .18),
+      )
+  })
+}
+
+
+export const applyThemeTokens = (tokens: ThemeTokens): void => {
+  const root = document.documentElement
+
+  root.style.setProperty ('--background', tokens.background)
+  root.style.setProperty ('--foreground', tokens.foreground)
+  root.style.setProperty ('--card', tokens.card)
+  root.style.setProperty ('--card-foreground', tokens.cardForeground)
+  root.style.setProperty ('--popover', tokens.popover)
+  root.style.setProperty ('--popover-foreground', tokens.popoverForeground)
+  root.style.setProperty ('--primary', tokens.primary)
+  root.style.setProperty ('--primary-foreground', tokens.primaryForeground)
+  root.style.setProperty ('--secondary', tokens.secondary)
+  root.style.setProperty ('--secondary-foreground', tokens.secondaryForeground)
+  root.style.setProperty ('--muted', tokens.muted)
+  root.style.setProperty ('--muted-foreground', tokens.mutedForeground)
+  root.style.setProperty ('--accent', tokens.accent)
+  root.style.setProperty ('--accent-foreground', tokens.accentForeground)
+  root.style.setProperty ('--destructive', tokens.destructive)
+  root.style.setProperty ('--destructive-foreground', tokens.destructiveForeground)
+  root.style.setProperty ('--border', tokens.border)
+  root.style.setProperty ('--input', tokens.input)
+  root.style.setProperty ('--ring', tokens.ring)
+  root.style.setProperty ('--theme-link', tokens.link)
+
+  applyThemeTagColours (tokens.tagColours)
+}
+
+
+export const applyThemeSelection = (
+    activeThemeId: ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): void => {
+  const theme = getResolvedThemeFromSelection (activeThemeId, customThemes)
+  applyThemeMode (theme.baseTheme)
+  applyThemeTokens (theme.tokens)
+}
+
+
+export const applyClientAppearance = (): void => {
+  applyThemeSelection (getClientActiveThemeId (), getClientCustomThemes ())
+}
+
+
 export const getClientListLimit = (
     listKey: ClientListKey,
 ): ClientListLimit | null => {

frontend/src/pages/posts/PostListPage.tsx

@@ -7,7 +7,6 @@ import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
-import FormField from '@/components/common/FormField'
 import Pagination from '@/components/common/Pagination'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
@@ -16,43 +15,21 @@ import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
 import {
     DEFAULT_POST_LIST_LIMIT,
-    DEFAULT_POST_LIST_ORDER,
     getClientListLimit,
-    getClientListOrder,
     LIST_LIMIT_OPTIONS,
-    POST_LIST_ORDER_OPTIONS,
     setClientListSettings,
 } from '@/lib/settings'
-import { inputClass } from '@/lib/utils'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { FC } from 'react'
 
-import type { FetchPostsOrder, WikiPage } from '@/types'
+import type { WikiPage } from '@/types'
-
-const postOrderLabel: Record<FetchPostsOrder, string> = {
-    'title:asc': 'タイトル昇順',
-    'title:desc': 'タイトル降順',
-    'url:asc': 'URL 昇順',
-    'url:desc': 'URL 降順',
-    'original_created_at:asc': 'オリジナル投稿日時 昇順',
-    'original_created_at:desc': 'オリジナル投稿日時 降順',
-    'created_at:asc': '投稿日 昇順',
-    'created_at:desc': '投稿日 降順',
-    'updated_at:asc': '更新日 昇順',
-    'updated_at:desc': '更新日 降順',
-}
 
 const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
   const n = Number (value)
   return n === 20 || n === 50 || n === 100 ? n : null
 }
 
-const parseOrder = (value: string | null): FetchPostsOrder | null =>
-    POST_LIST_ORDER_OPTIONS.some (option => option === value)
-    ? value as FetchPostsOrder
-    : null
-
 
 const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
@@ -73,11 +50,7 @@ const PostListPage: FC = () => {
       ?? getClientListLimit ('postList')
       ?? DEFAULT_POST_LIST_LIMIT
   )
-  const order = (
+  const order = 'original_created_at:desc' as const
-      parseOrder (query.get ('order'))
-      ?? getClientListOrder<FetchPostsOrder> ('postList')
-      ?? DEFAULT_POST_LIST_ORDER
-  )
 
   const keys = {
       tags: tagsKey, match, page, limit,
@@ -92,14 +65,12 @@ const PostListPage: FC = () => {
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
   useEffect (() => {
-    setClientListSettings ('postList', { limit, order })
+    setClientListSettings ('postList', { limit })
-  }, [limit, order])
+  }, [limit])
 
-  const updateListQuery = (next: { limit?: 20 | 50 | 100
+  const updateListQuery = (next: { limit?: 20 | 50 | 100 }) => {
-				   order?: FetchPostsOrder }) => {
     const params = new URLSearchParams (location.search)
     params.set ('limit', String (next.limit ?? limit))
-    params.set ('order', next.order ?? order)
     params.set ('page', '1')
     navigate (`${ location.pathname }?${ params.toString () }`)
   }
@@ -146,39 +117,24 @@ const PostListPage: FC = () => {
 	}}/>
 
 	<MainArea>
-	  <div className="mb-4 flex flex-wrap gap-4 rounded-xl border border-border bg-background/80 p-4">
+	  <TabGroup
-	    <FormField label="表示件数">
+	      rightAddon={
-	      {() => (
+		  <label className="flex items-center gap-2 text-xs text-muted-foreground">
-		  <select
+		    <span>件数</span>
-		      className={inputClass (false)}
+		    <select
-		      value={limit}
+			className="rounded border border-border bg-background px-2 py-1 text-sm
-		      onChange={ev => updateListQuery ({
+				   text-foreground"
-			  limit: Number (ev.target.value) as 20 | 50 | 100,
+			value={limit}
-		      })}>
+			onChange={ev => updateListQuery ({
-		    {LIST_LIMIT_OPTIONS.map (value => (
+			    limit: Number (ev.target.value) as 20 | 50 | 100,
-			<option key={value} value={value}>
+			})}>
-			  {value} 件
+		      {LIST_LIMIT_OPTIONS.map (value => (
-			</option>))}
+			  <option key={value} value={value}>
-		  </select>)}
+			    {value}
-	    </FormField>
+			  </option>))}
-
+		    </select>
-	    <FormField label="並び順">
+		  </label>
-	      {() => (
+	      }>
-		  <select
-		      className={inputClass (false)}
-		      value={order}
-		      onChange={ev => updateListQuery ({
-			  order: ev.target.value as FetchPostsOrder,
-		      })}>
-		    {POST_LIST_ORDER_OPTIONS.map (value => (
-			<option key={value} value={value}>
-			  {postOrderLabel[value]}
-			</option>))}
-		  </select>)}
-	    </FormField>
-	  </div>
-
-	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length > 0
 	       ? (

frontend/src/pages/posts/PostNewPage.tsx

@@ -9,7 +9,6 @@ import Form from '@/components/common/Form'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
@@ -31,7 +30,6 @@ type PostFormField =
 
 const PostNewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
-  const { settings } = useUserSettings ()
 
   const navigate = useNavigate ()
 
@@ -49,16 +47,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [title, setTitle] = useState ('')
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] =
-      useState (settings.autoFetchThumbnail === 'auto')
 
-  const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
-  const titleFetchMode = settings.autoFetchTitle
-  const thumbnailFetchMode = settings.autoFetchThumbnail
-  const titleFetchVisible = titleFetchMode !== 'off'
-  const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
                [tags])
@@ -93,19 +83,7 @@ const PostNewPage: FC<Props> = ({ user }) => {
     }
   }
 
-  const handleURLBlur = () => {
-    if (!(url) || url === previousURLRef.current)
-      return
-
-    if (titleAutoFlg)
-      fetchTitle ()
-    if (thumbnailAutoFlg)
-      fetchThumbnail ()
-    previousURLRef.current = url
-  }
-
   const fetchTitle = useCallback (async () => {
-    setTitle ('')
     setTitleLoading (true)
     try
     {
@@ -144,24 +122,6 @@ const PostNewPage: FC<Props> = ({ user }) => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    setTitleAutoFlg (settings.autoFetchTitle === 'auto')
-  }, [settings.autoFetchTitle])
-
-  useEffect (() => {
-    setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
-  }, [settings.autoFetchThumbnail])
-
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [fetchTitle, titleAutoFlg, url])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [fetchThumbnail, thumbnailAutoFlg, url])
-
   if (!(editable))
     return <Forbidden/>
 
@@ -183,8 +143,7 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		       onChange={e => setURL (e.target.value)}
 		       aria-describedby={describedBy}
 		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
+		       className={inputClass (invalid)}/>)}
-		       onBlur={handleURLBlur}/>)}
 	  </FormField>
 
 	  {/* タイトル */}
@@ -200,31 +159,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
 			 onChange={ev => setTitle (ev.target.value)}
 			 disabled={titleLoading}/>
 		  <div className="flex flex-wrap items-center gap-2 text-sm">
-		    <span>
+		    <span>必要なタイミングで URL から取得できます．</span>
-		      {titleAutoFlg
+		    <Button
-		       ? 'URL 入力時に自動取得します．'
+			type="button"
-		       : titleFetchMode === 'manual'
+			variant="outline"
-			 ? '自動取得しません．必要なら手動で取得できます．'
+			onClick={() => void fetchTitle ()}
-		       : '取得機能は無効です．'}
+			disabled={!(url) || titleLoading}>
-		    </span>
+		      取得
-		    {titleFetchVisible && (
+		    </Button>
-			<>
-			  <label className="flex items-center gap-1">
-			    <input
-				type="checkbox"
-				checked={titleAutoFlg}
-				onChange={ev => setTitleAutoFlg (ev.target.checked)}/>
-			    <span>自動</span>
-			  </label>
-			  {!(titleAutoFlg) && (
-			      <Button
-				  type="button"
-				  variant="outline"
-				  onClick={() => void fetchTitle ()}
-				  disabled={!(url) || titleLoading}>
-				取得
-			      </Button>)}
-			</>)}
 		  </div>
 		</div>)}
 	  </FormField>
@@ -234,52 +176,29 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	    {({ describedBy, invalid }) => (
 		<>
 		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
-		    <span>
+		    <span>必要なタイミングで URL から取得できます．</span>
-		      {thumbnailAutoFlg
+		    <Button
-		       ? 'URL 入力時に自動取得します．'
+			type="button"
-		       : thumbnailFetchMode === 'manual'
+			variant="outline"
-			 ? '自動取得しません．必要なら手動で取得できます．'
+			onClick={() => void fetchThumbnail ()}
-		       : '取得機能は無効です．'}
+			disabled={!(url) || thumbnailLoading}>
-		    </span>
+		      取得
-		    {thumbnailFetchVisible && (
+		    </Button>
-			<>
-			  <label className="flex items-center gap-1">
-			    <input
-				type="checkbox"
-				checked={thumbnailAutoFlg}
-				onChange={ev => setThumbnailAutoFlg (ev.target.checked)}/>
-			    <span>自動</span>
-			  </label>
-			  {!(thumbnailAutoFlg) && (
-			      <Button
-				  type="button"
-				  variant="outline"
-				  onClick={() => void fetchThumbnail ()}
-				  disabled={!(url) || thumbnailLoading}>
-				取得
-			      </Button>)}
-			</>)}
 		  </div>
-		  {thumbnailAutoFlg
+		  {thumbnailLoading && (
-		   ? (thumbnailLoading
+		      <p className="text-gray-500 text-sm">Loading...</p>)}
-		      ? <p className="text-gray-500 text-sm">Loading...</p>
+		  <input type="file"
-		      : !(thumbnailPreview) && (
+			 accept="image/*"
-			  <p className="text-gray-500 text-sm">
+			 aria-describedby={describedBy}
-			    URL から自動取得されます。
+			 aria-invalid={invalid}
-			  </p>))
+			 onChange={e => {
-		   : (
+			   const file = e.target.files?.[0]
-		      <input type="file"
+			   if (file)
-			     accept="image/*"
+			     {
-			     aria-describedby={describedBy}
+			       setThumbnailFile (file)
-			     aria-invalid={invalid}
+			       setThumbnailPreview (URL.createObjectURL (file))
-			     onChange={e => {
+			     }
-			       const file = e.target.files?.[0]
+			 }}/>
-			       if (file)
-				 {
-				   setThumbnailFile (file)
-				   setThumbnailPreview (URL.createObjectURL (file))
-				 }
-			     }}/>)}
 		  {thumbnailPreview && (
 		      <img src={thumbnailPreview}
 			   alt="preview"

frontend/src/pages/posts/PostSearchPage.tsx

@@ -22,7 +22,6 @@ import {
     getClientListLimit,
     getClientListOrder,
     LIST_LIMIT_OPTIONS,
-    POST_LIST_ORDER_OPTIONS,
     setClientListSettings,
 } from '@/lib/settings'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
@@ -40,28 +39,30 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
     qs.set (k, t)
 }
 
-const postOrderLabel: Record<FetchPostsOrder, string> = {
-    'title:asc': 'タイトル昇順',
-    'title:desc': 'タイトル降順',
-    'url:asc': 'URL 昇順',
-    'url:desc': 'URL 降順',
-    'original_created_at:asc': 'オリジナル投稿日時 昇順',
-    'original_created_at:desc': 'オリジナル投稿日時 降順',
-    'created_at:asc': '投稿日 昇順',
-    'created_at:desc': '投稿日 降順',
-    'updated_at:asc': '更新日 昇順',
-    'updated_at:desc': '更新日 降順',
-}
-
 const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
   const n = Number (value)
   return n === 20 || n === 50 || n === 100 ? n : null
 }
 
-const parseOrder = (value: string | null): FetchPostsOrder | null =>
+const parseOrder = (value: string | null): FetchPostsOrder | null => {
-    POST_LIST_ORDER_OPTIONS.some (option => option === value)
+  switch (value)
-    ? value as FetchPostsOrder
+  {
-    : null
+  case 'title:asc':
+  case 'title:desc':
+  case 'url:asc':
+  case 'url:desc':
+  case 'original_created_at:asc':
+  case 'original_created_at:desc':
+  case 'created_at:asc':
+  case 'created_at:desc':
+  case 'updated_at:asc':
+  case 'updated_at:desc':
+    return value
+
+  default:
+    return null
+  }
+}
 
 
 const PostSearchPage: FC = () => {
@@ -188,41 +189,26 @@ const PostSearchPage: FC = () => {
 	</Helmet>
 
 	<div className="max-w-xl">
-	  <PageTitle>広場検索</PageTitle>
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>広場検索</PageTitle>
+	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+	      <span>件数</span>
+	      <select
+		  className="rounded border border-border bg-background px-2 py-1 text-sm
+			     text-foreground"
+		  value={limit}
+		  onChange={ev => updateListQuery ({
+		      limit: Number (ev.target.value) as 20 | 50 | 100,
+		  })}>
+		{LIST_LIMIT_OPTIONS.map (value => (
+		    <option key={value} value={value}>
+		      {value}
+		    </option>))}
+	      </select>
+	    </label>
+	  </div>
 
 	  <form onSubmit={handleSearch} className="space-y-2">
-	    <div className="grid gap-3 rounded-xl border border-border bg-background/80 p-3 sm:grid-cols-2">
-	      <FormField label="表示件数">
-		{() => (
-		    <select
-			className={inputClass (false)}
-			value={limit}
-			onChange={ev => updateListQuery ({
-			    limit: Number (ev.target.value) as 20 | 50 | 100,
-			})}>
-		      {LIST_LIMIT_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {value} 件
-			  </option>))}
-		    </select>)}
-	      </FormField>
-
-	      <FormField label="並び順">
-		{() => (
-		    <select
-			className={inputClass (false)}
-			value={order}
-			onChange={ev => updateListQuery ({
-			    order: ev.target.value as FetchPostsOrder,
-			})}>
-		      {POST_LIST_ORDER_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {postOrderLabel[value]}
-			  </option>))}
-		    </select>)}
-	      </FormField>
-	    </div>
-
 	    {/* タイトル */}
 	    <FormField label="タイトル">
 	      {({ invalid }) => (

frontend/src/pages/tags/TagListPage.tsx

@@ -21,7 +21,6 @@ import {
     getClientListOrder,
     LIST_LIMIT_OPTIONS,
     setClientListSettings,
-    TAG_LIST_ORDER_OPTIONS,
 } from '@/lib/settings'
 import { fetchTags } from '@/lib/tags'
 import { dateString, inputClass } from '@/lib/utils'
@@ -44,28 +43,30 @@ const boolFromQuery = (value: string | null): boolean =>
 
 const tagStateLabel = (deprecatedAt: string | null) => deprecatedAt ? '廃止' : ''
 
-const tagOrderLabel: Record<FetchTagsOrder, string> = {
-    'name:asc': '名前昇順',
-    'name:desc': '名前降順',
-    'category:asc': 'カテゴリ昇順',
-    'category:desc': 'カテゴリ降順',
-    'post_count:asc': '件数昇順',
-    'post_count:desc': '件数降順',
-    'created_at:asc': '最初の記載日時 昇順',
-    'created_at:desc': '最初の記載日時 降順',
-    'updated_at:asc': '更新日時 昇順',
-    'updated_at:desc': '更新日時 降順',
-}
-
 const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
   const n = Number (value)
   return n === 20 || n === 50 || n === 100 ? n : null
 }
 
-const parseOrder = (value: string | null): FetchTagsOrder | null =>
+const parseOrder = (value: string | null): FetchTagsOrder | null => {
-    TAG_LIST_ORDER_OPTIONS.some (option => option === value)
+  switch (value)
-    ? value as FetchTagsOrder
+  {
-    : null
+  case 'name:asc':
+  case 'name:desc':
+  case 'category:asc':
+  case 'category:desc':
+  case 'post_count:asc':
+  case 'post_count:desc':
+  case 'created_at:asc':
+  case 'created_at:desc':
+  case 'updated_at:asc':
+  case 'updated_at:desc':
+    return value
+
+  default:
+    return null
+  }
+}
 
 
 const TagListPage: FC = () => {
@@ -192,41 +193,26 @@ const TagListPage: FC = () => {
 	</Helmet>
 
 	<div className="max-w-xl">
-	  <PageTitle>タグ</PageTitle>
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>タグ</PageTitle>
+	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+	      <span>件数</span>
+	      <select
+		  value={limit}
+		  onChange={ev => updateListQuery ({
+		      limit: Number (ev.target.value) as 20 | 50 | 100,
+		  })}
+		  className="rounded border border-border bg-background px-2 py-1 text-sm
+			     text-foreground">
+		{LIST_LIMIT_OPTIONS.map (value => (
+		    <option key={value} value={value}>
+		      {value}
+		    </option>))}
+	      </select>
+	    </label>
+	  </div>
 
 	  <form onSubmit={handleSearch} className="space-y-2">
-	    <div className="grid gap-3 rounded-xl border border-border bg-background/80 p-3 sm:grid-cols-2">
-	      <FormField label="表示件数">
-		{() => (
-		    <select
-			value={limit}
-			onChange={ev => updateListQuery ({
-			    limit: Number (ev.target.value) as 20 | 50 | 100,
-			})}
-			className={inputClass (false)}>
-		      {LIST_LIMIT_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {value} 件
-			  </option>))}
-		    </select>)}
-	      </FormField>
-
-	      <FormField label="並び順">
-		{() => (
-		    <select
-			value={order}
-			onChange={ev => updateListQuery ({
-			    order: ev.target.value as FetchTagsOrder,
-			})}
-			className={inputClass (false)}>
-		      {TAG_LIST_ORDER_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {tagOrderLabel[value]}
-			  </option>))}
-		    </select>)}
-	      </FormField>
-	    </div>
-
 	    {/* 名前 */}
 	    <FormField label="名前">
 	      {({ invalid }) => (

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -8,7 +8,6 @@ import { useParams, useNavigate } from 'react-router-dom'
 import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
-import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
@@ -25,27 +24,11 @@ import type { FC } from 'react'
 import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
+const FIXED_WIKI_EDITOR_VIEW = { menu: true, md: true, html: true } as const
 
-type EditorView = {
+// `wiki_editor_mode` is still kept in backend settings, but the common
-    menu:  boolean
+// settings screen does not expose it at present. Until that UI returns, the
-    md:    boolean
+// editor stays on the fixed split view here.
-    html:  boolean }
-
-const editorView = (
-    mode: 'split' | 'write' | 'preview',
-): EditorView => {
-  switch (mode)
-  {
-  case 'write':
-    return { menu: true, md: true, html: false }
-
-  case 'preview':
-    return { menu: true, md: false, html: true }
-
-  default:
-    return { menu: true, md: true, html: true }
-  }
-}
 
 type Props = { user: User | null }
 
@@ -54,7 +37,6 @@ type WikiFormField = 'title' | 'body'
 
 const WikiEditPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
-  const { settings } = useUserSettings ()
 
   const { id } = useParams ()
 
@@ -137,7 +119,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
-				config={{ view: editorView (settings.wikiEditorMode) }}
+				config={{ view: FIXED_WIKI_EDITOR_VIEW }}
 				renderHTML={text => mdParser.render (text)}
 				onChange={({ text }) => setBody (text)}/>)}
 		</FormField>

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -9,7 +9,6 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
-import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
@@ -23,27 +22,11 @@ import 'react-markdown-editor-lite/lib/index.css'
 import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
+const FIXED_WIKI_EDITOR_VIEW = { menu: true, md: true, html: true } as const
 
-type EditorView = {
+// `wiki_editor_mode` is still kept in backend settings, but the common
-    menu:  boolean
+// settings screen does not expose it at present. Until that UI returns, the
-    md:    boolean
+// editor stays on the fixed split view here.
-    html:  boolean }
-
-const editorView = (
-    mode: 'split' | 'write' | 'preview',
-): EditorView => {
-  switch (mode)
-  {
-  case 'write':
-    return { menu: true, md: true, html: false }
-
-  case 'preview':
-    return { menu: true, md: false, html: true }
-
-  default:
-    return { menu: true, md: true, html: true }
-  }
-}
 
 type Props = { user: User | null }
 
@@ -52,7 +35,6 @@ type WikiFormField = 'title' | 'body'
 
 const WikiNewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
-  const { settings } = useUserSettings ()
 
   const location = useLocation ()
   const navigate = useNavigate ()
@@ -115,7 +97,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
-			  config={{ view: editorView (settings.wikiEditorMode) }}
+			  config={{ view: FIXED_WIKI_EDITOR_VIEW }}
 			  renderHTML={text => mdParser.render (text)}
 			  onChange={({ text }) => setBody (text)}/>)}
 	  </FormField>

frontend/tailwind.config.js

@@ -8,6 +8,7 @@ import { DARK_COLOUR_SHADE,
 const colours = Object.values (TAG_COLOUR)
 
 export default {
+    darkMode: 'class',
     content: ['./src/**/*.{html,js,ts,jsx,tsx,mdx}'],
     safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
 	       ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),