#34

AGENTS.md

@@ -106,6 +106,10 @@ npm run preview
 - Explain risks directly.
 - Prefer single quotes for strings unless interpolation or escaping makes
   double quotes better.
+- For Japanese text, follow the 1986 Cabinet Notice
+  《現代仮名遣い》 as the default orthography.
+- For Japanese kanji spelling, do not apply
+  《当用漢字による書きかえ》; prefer the original spelling as the formal one.
 - Ruby: never put a space before method-call parentheses.
 - Ruby: `render` 系メソッド呼び出しでは、keyword 引数付きでも括弧を書かない。
 - Ruby: never put a line break immediately before `)`.
@@ -255,8 +259,11 @@ const value =
   `!==` over negating a comparison like `!(a === b)`.
 - In TypeScript and TSX, prefer `++i` or `--i` over `i += 1` or `i -= 1` for
   simple unit-step counter updates.
-- For user-facing Japanese text, prefer modern kana usage and natural current
+- For user-facing Japanese text, follow the 1986 Cabinet Notice
-  phrasing over historical spellings or awkward literal wording.
+  《現代仮名遣い》 and avoid historical kana spellings unless the task
+  explicitly requires them.
+- For user-facing Japanese kanji spelling, do not normalize to
+  《当用漢字による書きかえ》; prefer original forms such as `編輯`.
 - For user-facing Japanese ellipses, prefer `……` over ASCII `...`.
 
 ### Frontend TSX style

backend/app/controllers/user_settings_controller.rb

@@ -0,0 +1,61 @@
+class UserSettingsController < ApplicationController
+  wrap_parameters false
+
+  def show
+    return head :unauthorized unless current_user
+
+    render json: current_setting.serializable_hash
+  end
+
+  def update
+    return head :unauthorized unless current_user
+
+    raw_attributes = editable_raw_attributes
+    field_errors = validate_raw_attributes(raw_attributes)
+    return render_validation_error fields: field_errors if field_errors.present?
+
+    setting = current_setting
+    setting.assign_attributes(raw_attributes)
+
+    if setting.save
+      render json: setting.serializable_hash, status: :ok
+    else
+      render_validation_error setting
+    end
+  end
+
+  private
+
+  def current_setting
+    Setting.find_or_create_by!(user: current_user) do |setting|
+      setting.assign_attributes(Setting.defaults)
+    end
+  rescue ActiveRecord::RecordNotUnique
+    Setting.find_by!(user: current_user)
+  end
+
+  def editable_raw_attributes
+    request.request_parameters.slice(*Setting::EDITABLE_ATTRIBUTES)
+  end
+
+  def validate_raw_attributes raw_attributes
+    raw_attributes.each_with_object({ }) do |(key, value), errors|
+      next if value_matches_type?(key, value)
+
+      errors[key.to_sym] = ['値の型が不正です．']
+    end
+  end
+
+  def value_matches_type? key, value
+    case Setting::TYPE_BY_ATTRIBUTE.fetch(key)
+    when :string
+      value.is_a?(String)
+    when :integer
+      value.is_a?(Integer)
+    when :boolean
+      value == true || value == false
+    else
+      false
+    end
+  end
+end

backend/app/models/setting.rb

@@ -1,7 +1,52 @@
 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
+
+  STRING_ATTRIBUTES = [
+    'theme',
+    'auto_fetch_title',
+    'auto_fetch_thumbnail',
+    'wiki_editor_mode',
+  ].freeze
+  INTEGER_ATTRIBUTES = [].freeze
+  BOOLEAN_ATTRIBUTES = [].freeze
+  EDITABLE_ATTRIBUTES =
+      (STRING_ATTRIBUTES + INTEGER_ATTRIBUTES + BOOLEAN_ATTRIBUTES).freeze
+  TYPE_BY_ATTRIBUTE = {
+    'theme' => :string,
+    'auto_fetch_title' => :string,
+    'auto_fetch_thumbnail' => :string,
+    'wiki_editor_mode' => :string,
+  }.freeze
+
   belongs_to :user
 
   validates :user_id, presence: true
-  validates :key, presence: true, length: { maximum: 255 }
+  validates :user_id, uniqueness: true
-  validates :value, presence: true
+
+  validates :theme, inclusion: { in: THEMES }
+  validates :auto_fetch_title, inclusion: { in: AUTO_FETCH_MODES }
+  validates :auto_fetch_thumbnail, inclusion: { in: AUTO_FETCH_MODES }
+  validates :wiki_editor_mode, inclusion: { in: WIKI_EDITOR_MODES }
+
+  def self.defaults
+    {
+      theme: 'system',
+      auto_fetch_title: 'manual',
+      auto_fetch_thumbnail: 'manual',
+      wiki_editor_mode: 'split',
+    }
+  end
+
+  def self.serializable_attributes
+    EDITABLE_ATTRIBUTES.map(&:to_sym)
+  end
+
+  def serializable_hash(options = nil)
+    super({ only: self.class.serializable_attributes }.merge(options || { }))
+  end
 end

backend/app/models/user.rb

@@ -7,7 +7,7 @@ class User < ApplicationRecord
 
   has_many :created_posts,
            class_name: 'Post', foreign_key: :uploaded_user_id, dependent: :nullify
-  has_many :settings
+  has_one :setting, dependent: :destroy
   has_many :user_ips, dependent: :destroy
   has_many :ip_addresses, through: :user_ips
   has_many :user_post_views, dependent: :destroy

backend/config/routes.rb

@@ -81,6 +81,9 @@ Rails.application.routes.draw do
     end
   end
 
+  get 'users/settings', to: 'user_settings#show'
+  patch 'users/settings', to: 'user_settings#update'
+
   resources :users, only: [:create, :update] do
     collection do
       post :verify

backend/db/migrate/20260704000000_rebuild_settings_as_typed_user_settings.rb

@@ -0,0 +1,31 @@
+class RebuildSettingsAsTypedUserSettings < ActiveRecord::Migration[8.0]
+  def change
+    remove_foreign_key :settings, :users if foreign_key_exists?(:settings, :users)
+    remove_index :settings, :user_id if index_exists?(:settings, :user_id)
+
+    remove_column :settings, :key, :string if column_exists?(:settings, :key)
+    remove_column :settings, :value, :json if column_exists?(:settings, :value)
+
+    change_column_null :settings, :user_id, false
+
+    add_column :settings, :theme, :string, null: false, default: 'system'
+    add_column :settings,
+               :auto_fetch_title,
+               :string,
+               null: false,
+               default: 'manual'
+    add_column :settings,
+               :auto_fetch_thumbnail,
+               :string,
+               null: false,
+               default: 'manual'
+    add_column :settings,
+               :wiki_editor_mode,
+               :string,
+               null: false,
+               default: 'split'
+
+    add_index :settings, :user_id, unique: true
+    add_foreign_key :settings, :users
+  end
+end

backend/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
+ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
   create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -374,11 +374,13 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
 
   create_table "settings", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "user_id", null: false
-    t.string "key", null: false
-    t.json "value", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.index ["user_id"], name: "index_settings_on_user_id"
+    t.string "theme", default: "system", null: false
+    t.string "auto_fetch_title", default: "manual", null: false
+    t.string "auto_fetch_thumbnail", default: "manual", null: false
+    t.string "wiki_editor_mode", default: "split", null: false
+    t.index ["user_id"], name: "index_settings_on_user_id", unique: true
   end
 
   create_table "tag_implications", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|

frontend/src/App.tsx

@@ -12,6 +12,12 @@ import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 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'
@@ -104,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')
@@ -137,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:

frontend/src/components/PostFormTagsArea.tsx

@@ -68,9 +68,12 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 
     setBounds ({ start, end })
 
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: '0' } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q: token,
-    setSuggestionsVsbl (suggestions.length > 0)
+	nico: '0' } })
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   return (

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/common/TagInput.test.tsx

@@ -26,7 +26,7 @@ describe ('TagInput', () => {
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
           '/tags/autocomplete',
-          { params: { q: '虹夏' } },
+          { params: { q: '虹夏', nico: '0' } },
       )
     })
     expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
@@ -41,4 +41,20 @@ describe ('TagInput', () => {
     expect (api.apiGet).not.toHaveBeenCalled ()
     expect (setValue).toHaveBeenCalledWith (' ')
   })
+
+  it ('sends nico=1 only when includeNico is true', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
+
+    render (<TagInput value="" setValue={setValue} includeNico={true}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹夏', nico: '1' } },
+      )
+    })
+  })
 })

frontend/src/components/common/TagInput.tsx

@@ -10,13 +10,20 @@ import type { Tag } from '@/types'
 
 
 type Props = {
+    includeNico?:   boolean
     describedBy?:  string
     invalid?:      boolean
     value:         string
     setValue:      (value: string) => void }
 
 
-const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
+const TagInput: FC<Props> = ({
+    includeNico = false,
+    describedBy,
+    invalid,
+    value,
+    setValue,
+}) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -32,10 +39,12 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
 	return
       }
 
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q,
-    if (suggestions.length > 0)
+	nico: includeNico ? '1' : '0' } })
-      setSuggestionsVsbl (true)
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   // TODO: TagSearch からのコピペのため，共通化を考へる．

frontend/src/components/users/UserSettingsProvider.tsx

@@ -0,0 +1,97 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+
+import {
+    applyClientAppearance,
+    DEFAULT_USER_SETTINGS,
+    fetchUserSettings,
+} from '@/lib/settings'
+
+import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
+
+import type { User } from '@/types'
+import type { UserSettings } from '@/lib/settings'
+
+type ContextValue = {
+    loaded:       boolean
+    error:        string | null
+    settings:     UserSettings
+    setSettings:  Dispatch<SetStateAction<UserSettings>> }
+
+const UserSettingsContext = createContext<ContextValue | null> (null)
+
+
+export const UserSettingsProvider: FC<{
+    children:  ReactNode
+    user:      User | null }> = ({ children, user }) => {
+  const [error, setError] = useState<string | null> (null)
+  const [loaded, setLoaded] = useState (false)
+  const [settings, setSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
+
+  useEffect (() => {
+    let cancelled = false
+
+    if (!(user))
+      {
+	setError (null)
+	setSettings (DEFAULT_USER_SETTINGS)
+	setLoaded (true)
+	return
+      }
+
+    setLoaded (false)
+    setError (null)
+
+    void (async () => {
+      try
+      {
+	const next = await fetchUserSettings ()
+	if (!(cancelled))
+	  {
+	    setError (null)
+	    setSettings (next)
+	    setLoaded (true)
+	  }
+      }
+      catch
+      {
+	if (!(cancelled))
+	  {
+	    setError ('設定を読み込めませんでした．既定値で表示しています．')
+	    setSettings (DEFAULT_USER_SETTINGS)
+	    setLoaded (true)
+	  }
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [user])
+
+  useEffect (() => {
+    void settings.theme
+    applyClientAppearance ()
+  }, [settings.theme])
+
+  const value = useMemo<ContextValue> (() => ({
+      error,
+      loaded,
+      settings,
+      setSettings,
+  }), [error, loaded, settings])
+
+  return (
+      <UserSettingsContext.Provider value={value}>
+	{children}
+      </UserSettingsContext.Provider>)
+}
+
+
+export const useUserSettings = (): ContextValue => {
+  const value = useContext (UserSettingsContext)
+
+  if (value == null)
+    throw new Error ('UserSettingsProvider is missing')
+
+  return value
+}

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;
@@ -87,6 +111,29 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root[data-font-size='small']
+{
+  font-size: 14px;
+}
+
+:root[data-font-size='normal']
+{
+  font-size: 16px;
+}
+
+:root[data-font-size='large']
+{
+  font-size: 18px;
+}
+
+:root[data-display-density='compact'] input,
+:root[data-display-density='compact'] textarea,
+:root[data-display-density='compact'] select,
+:root[data-display-density='compact'] button
+{
+  line-height: 1.25;
+}
+
 a
 {
   font-weight: 500;
@@ -97,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
@@ -138,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

@@ -0,0 +1,843 @@
+import { CATEGORIES } from '@/consts'
+import { apiGet, apiPatch } from '@/lib/api'
+
+import type { Category, FetchPostsOrder, FetchTagsOrder } from '@/types'
+
+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'
+export type ClientPaneBreakpoint = 'desktop' | 'tablet'
+export type ClientListKey = 'postList' | 'postSearch' | 'tagList'
+export type ClientListLimit = 20 | 50 | 100
+
+type ClientPaneSettings = {
+    widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
+    collapsed?:           boolean }
+
+type ClientListSettings = {
+    limit?: ClientListLimit
+    order?: string }
+
+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 = {
+    appearance?:    ClientAppearanceSettings
+    panes?:         Record<string, ClientPaneSettings>
+    lists?:         Partial<Record<ClientListKey, ClientListSettings>>
+    theatre?:       {
+	layoutMode?: TheatreLayoutMode
+	tagFlow?:    TheatreTagFlow
+    }
+    gekanator?:    {
+	backgroundMotion?: GekanatorBackgroundMotionMode
+    }
+    reducedMotion?: string
+    embedAutoLoad?: string
+    thumbnailMode?: string }
+
+export const CLIENT_SETTINGS_STORAGE_KEY = 'btrc_hub.client_settings'
+export const THEME_OPTIONS = ['system', 'light', 'dark'] as const
+export const LIST_LIMIT_OPTIONS = [20, 50, 100] as const
+export const POST_LIST_ORDER_OPTIONS = [
+    'title:asc',
+    'title:desc',
+    'url:asc',
+    'url:desc',
+    'original_created_at:asc',
+    'original_created_at:desc',
+    'created_at:asc',
+    'created_at:desc',
+    'updated_at:asc',
+    'updated_at:desc',
+] as const satisfies readonly FetchPostsOrder[]
+export const TAG_LIST_ORDER_OPTIONS = [
+    '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',
+] 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 = '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> => {
+  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<{ theme: UserSettings['theme'] }>,
+): Promise<UserSettings> => {
+  const raw = await apiPatch<{
+      theme:               UserSettings['theme']
+      auto_fetch_title:      UserSettings['autoFetchTitle']
+      auto_fetch_thumbnail:  UserSettings['autoFetchThumbnail']
+      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 => {
+  if (!(raw))
+    return { }
+
+  try
+  {
+    const parsed = JSON.parse (raw)
+    return parsed && typeof parsed === 'object' ? parsed as ClientSettings : { }
+  }
+  catch
+  {
+    return { }
+  }
+}
+
+
+export const loadClientSettings = (): ClientSettings =>
+    safeParseClientSettings (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY))
+
+
+export const saveClientSettings = (settings: ClientSettings): void => {
+  localStorage.setItem (CLIENT_SETTINGS_STORAGE_KEY, JSON.stringify (settings))
+}
+
+
+export const updateClientSettings = (
+    updater: (settings: ClientSettings) => ClientSettings,
+): ClientSettings => {
+  const next = updater (loadClientSettings ())
+  saveClientSettings (next)
+  return next
+}
+
+
+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 => {
+  const value = loadClientSettings ().lists?.[listKey]?.limit
+  return validListLimit (value)
+}
+
+
+export const getClientListOrder = <T extends string>(
+    listKey: ClientListKey,
+): T | null => {
+  const value = loadClientSettings ().lists?.[listKey]?.order
+  return typeof value === 'string' ? value as T : null
+}
+
+
+export const setClientListSettings = (
+    listKey: ClientListKey,
+    { limit, order }: { limit?: ClientListLimit
+			order?: string },
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      lists: {
+	  ...(settings.lists ?? { }),
+	  [listKey]: {
+	      ...(settings.lists?.[listKey] ?? { }),
+	      ...(limit == null ? { } : { limit }),
+	      ...(order == null ? { } : { order }),
+	  },
+      },
+  }))
+}
+
+
+const legacyTheatreLayoutMode = (): TheatreLayoutMode | null => {
+  const value = localStorage.getItem (LEGACY_THEATRE_LAYOUT_STORAGE_KEY)
+  return (
+      value === 'threeColumns'
+      || value === 'tagsBottom'
+      || value === 'commentsBottom'
+  ) ? value : null
+}
+
+
+const legacyTheatreTagFlow = (): TheatreTagFlow | null => {
+  const value = localStorage.getItem (LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY)
+  return (value === 'vertical' || value === 'horizontal') ? value : null
+}
+
+
+const legacyGekanatorBackgroundMotion = (): GekanatorBackgroundMotionMode | null => {
+  const value = localStorage.getItem (LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY)
+  return (value === 'on' || value === 'calm' || value === 'off') ? value : null
+}
+
+
+export const getClientTheatreLayoutMode = (): TheatreLayoutMode =>
+    loadClientSettings ().theatre?.layoutMode
+    ?? legacyTheatreLayoutMode ()
+    ?? 'threeColumns'
+
+
+export const setClientTheatreLayoutMode = (layoutMode: TheatreLayoutMode): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      theatre: { ...(settings.theatre ?? { }), layoutMode } }))
+}
+
+
+export const getClientTheatreTagFlow = (): TheatreTagFlow =>
+    loadClientSettings ().theatre?.tagFlow
+    ?? legacyTheatreTagFlow ()
+    ?? 'vertical'
+
+
+export const setClientTheatreTagFlow = (tagFlow: TheatreTagFlow): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      theatre: { ...(settings.theatre ?? { }), tagFlow } }))
+}
+
+
+export const getClientGekanatorBackgroundMotion =
+    (): GekanatorBackgroundMotionMode =>
+	loadClientSettings ().gekanator?.backgroundMotion
+	?? legacyGekanatorBackgroundMotion ()
+	?? 'on'
+
+
+export const setClientGekanatorBackgroundMotion = (
+    backgroundMotion: GekanatorBackgroundMotionMode,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      gekanator: { ...(settings.gekanator ?? { }), backgroundMotion } }))
+}
+
+
+export const getClientPaneWidthPx = (
+    paneKey:      string,
+    breakpoint:   ClientPaneBreakpoint,
+): number | null => {
+  const value = loadClientSettings ().panes?.[paneKey]?.widthPxByBreakpoint?.[breakpoint]
+  return typeof value === 'number' ? value : null
+}
+
+
+export const setClientPaneWidthPx = (
+    paneKey:      string,
+    breakpoint:   ClientPaneBreakpoint,
+    widthPx:      number,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      panes: {
+	  ...(settings.panes ?? { }),
+	  [paneKey]: {
+	      ...(settings.panes?.[paneKey] ?? { }),
+	      widthPxByBreakpoint: {
+		  ...(settings.panes?.[paneKey]?.widthPxByBreakpoint ?? { }),
+		  [breakpoint]: widthPx,
+	      },
+	  },
+      },
+  }))
+}
+
+
+export const setClientPaneCollapsed = (
+    paneKey:      string,
+    collapsed:    boolean,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      panes: {
+	  ...(settings.panes ?? { }),
+	  [paneKey]: {
+	      ...(settings.panes?.[paneKey] ?? { }),
+	      collapsed,
+	  },
+      },
+  }))
+}

frontend/src/pages/GekanatorPage.tsx

@@ -24,6 +24,10 @@ import { recoverCandidatePosts } from '@/lib/gekanatorCandidateRecovery'
 import { isQuestionHardFilteredAfterAnswers,
 	 monthForCondition } from '@/lib/gekanatorQuestionFilters'
 import { gekanatorKeys } from '@/lib/queryKeys'
+import {
+  getClientGekanatorBackgroundMotion,
+  setClientGekanatorBackgroundMotion,
+} from '@/lib/settings'
 import { cn } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -185,7 +189,6 @@ const softenedAnswerWeight = .35
 const confidenceTemperature = 6
 const gameStorageKey = 'gekanator:game:v1'
 const recentGamesStorageKey = 'gekanator:recent-games:v1'
-const backgroundMotionStorageKey = 'gekanator:background-motion:v1'
 const maxStoredRecentGames = 12
 const specialOriginalMonthDayLabels: Record<string, string> = {
     '1-1': '元日',
@@ -429,18 +432,13 @@ const storeRecentGameSummary = (
 
 
 const loadBackgroundMotionMode = (): BackgroundMotionMode => {
-  const fallbackMode = 'on'
   try
   {
-    const raw = localStorage.getItem (backgroundMotionStorageKey)
+    return getClientGekanatorBackgroundMotion ()
-    if (raw === 'off' || raw === 'calm' || raw === 'on')
-      return raw
-
-    return fallbackMode
   }
   catch
   {
-    return fallbackMode
+    return 'on'
   }
 }
 
@@ -3916,7 +3914,7 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
   useEffect (() => {
     try
     {
-      localStorage.setItem (backgroundMotionStorageKey, backgroundMotionMode)
+      setClientGekanatorBackgroundMotion (backgroundMotionMode)
     }
     catch
     {

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -79,7 +79,7 @@ const MaterialNewPage: FC = () => {
 	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	  <FormField label="タグ" messages={fieldErrors.tag}>
+	   <FormField label="タグ" messages={fieldErrors.tag}>
 	    {({ describedBy, invalid }) => (
 		<TagInput
 		    describedBy={describedBy}

frontend/src/pages/posts/PostListPage.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
@@ -13,12 +13,23 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    getClientListLimit,
+    LIST_LIMIT_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { FC } from 'react'
 
 import type { WikiPage } from '@/types'
 
+const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
+  const n = Number (value)
+  return n === 20 || n === 50 || n === 100 ? n : null
+}
+
 
 const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
@@ -26,6 +37,7 @@ const PostListPage: FC = () => {
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const location = useLocation ()
+  const navigate = useNavigate ()
   const query = new URLSearchParams (location.search)
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
@@ -33,13 +45,18 @@ const PostListPage: FC = () => {
   const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
   const tagsKey = tags.join (' ')
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('postList')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
+  const order = 'original_created_at:desc' as const
 
   const keys = {
       tags: tagsKey, match, page, limit,
       url: '', title: '', originalCreatedFrom: '', originalCreatedTo: '',
       createdFrom: '', createdTo: '', updatedFrom: '', updatedTo: '',
-      order: 'original_created_at:desc' } as const
+      order } as const
   const { data, isLoading: loading } = useQuery ({
       queryKey: postsKeys.index (keys),
       queryFn:  () => fetchPosts (keys) })
@@ -47,6 +64,17 @@ const PostListPage: FC = () => {
   const cursor = ''
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postList', { limit })
+  }, [limit])
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100 }) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('limit', String (next.limit ?? limit))
+    params.set ('page', '1')
+    navigate (`${ location.pathname }?${ params.toString () }`)
+  }
+
   useLayoutEffect (() => {
     scroll (0, 0)
 
@@ -89,7 +117,24 @@ const PostListPage: FC = () => {
 	}}/>
 
 	<MainArea>
-	  <TabGroup>
+	  <TabGroup
+	      rightAddon={
+		  <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>
+	      }>
 	    <Tab name="広場">
 	      {posts.length > 0
 	       ? (

frontend/src/pages/posts/PostNewPage.tsx

@@ -41,16 +41,13 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
   const [duration, setDuration] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
   const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
   const [thumbnailLoading, setThumbnailLoading] = useState (false)
   const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
   const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
 
-  const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
@@ -86,23 +83,17 @@ 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)
-    const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
+    try
-    setTitle (data.title || '')
+    {
-    setTitleLoading (false)
+      const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
+      setTitle (data.title || '')
+    }
+    finally
+    {
+      setTitleLoading (false)
+    }
   }, [url])
 
   const fetchThumbnail = useCallback (async () => {
@@ -111,30 +102,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
     setThumbnailLoading (true)
     if (thumbnailPreviewRef.current)
       URL.revokeObjectURL (thumbnailPreviewRef.current)
-    const data = await apiGet<Blob> ('/preview/thumbnail',
+    try
-				     { params: { url }, responseType: 'blob' })
+    {
-    const imageURL = URL.createObjectURL (data)
+      const data = await apiGet<Blob> ('/preview/thumbnail',
-    setThumbnailPreview (imageURL)
+				       { params: { url }, responseType: 'blob' })
-    setThumbnailFile (new File ([data],
+      const imageURL = URL.createObjectURL (data)
-				'thumbnail.png',
+      setThumbnailPreview (imageURL)
-				{ type: data.type || 'image/png' }))
+      setThumbnailFile (new File ([data],
-    setThumbnailLoading (false)
+				  'thumbnail.png',
+				  { type: data.type || 'image/png' }))
+    }
+    finally
+    {
+      setThumbnailLoading (false)
+    }
   }, [url])
 
   useEffect (() => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [fetchTitle, titleAutoFlg, url])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [fetchThumbnail, thumbnailAutoFlg, url])
-
   if (!(editable))
     return <Forbidden/>
 
@@ -156,59 +143,62 @@ 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>
 
 	  {/* タイトル */}
-	  <FormField
+	  <FormField label="タイトル" messages={fieldErrors.title}>
-	      checkBox={{
-		  label:    '自動',
-		  checked:  titleAutoFlg,
-		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      label="タイトル"
-	      messages={fieldErrors.title}>
 	    {({ describedBy, invalid }) => (
-		<input type="text"
+		<div className="space-y-2">
-		       aria-describedby={describedBy}
+		  <input type="text"
-		       aria-invalid={invalid}
+			 aria-describedby={describedBy}
-		       className={inputClass (invalid)}
+			 aria-invalid={invalid}
-		       value={title}
+			 className={inputClass (invalid)}
-		       placeholder={titleLoading ? 'Loading...' : ''}
+			 value={title}
-		       onChange={ev => setTitle (ev.target.value)}
+			 placeholder={titleLoading ? 'Loading...' : ''}
-		       disabled={titleAutoFlg}/>)}
+			 onChange={ev => setTitle (ev.target.value)}
+			 disabled={titleLoading}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>必要なタイミングで URL から取得できます．</span>
+		    <Button
+			type="button"
+			variant="outline"
+			onClick={() => void fetchTitle ()}
+			disabled={!(url) || titleLoading}>
+		      取得
+		    </Button>
+		  </div>
+		</div>)}
 	  </FormField>
 
 	  {/* サムネール */}
-	  <FormField
+	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
-	      checkBox={{
-		  label:    '自動',
-		  checked:  thumbnailAutoFlg,
-		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      label="サムネール"
-	      messages={fieldErrors.thumbnail}>
 	    {({ describedBy, invalid }) => (
 		<>
-		  {thumbnailAutoFlg
+		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
-		   ? (thumbnailLoading
+		    <span>必要なタイミングで URL から取得できます．</span>
-		      ? <p className="text-gray-500 text-sm">Loading...</p>
+		    <Button
-		      : !(thumbnailPreview) && (
+			type="button"
-			  <p className="text-gray-500 text-sm">
+			variant="outline"
-			    URL から自動取得されます。
+			onClick={() => void fetchThumbnail ()}
-			  </p>))
+			disabled={!(url) || thumbnailLoading}>
-		   : (
+		      取得
-		      <input type="file"
+		    </Button>
-			     accept="image/*"
+		  </div>
-			     aria-describedby={describedBy}
+		  {thumbnailLoading && (
-			     aria-invalid={invalid}
+		      <p className="text-gray-500 text-sm">Loading...</p>)}
-			     onChange={e => {
+		  <input type="file"
-			       const file = e.target.files?.[0]
+			 accept="image/*"
-			       if (file)
+			 aria-describedby={describedBy}
-				 {
+			 aria-invalid={invalid}
-				   setThumbnailFile (file)
+			 onChange={e => {
-				   setThumbnailPreview (URL.createObjectURL (file))
+			   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

@@ -16,6 +16,14 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_POST_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
@@ -31,6 +39,31 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
     qs.set (k, t)
 }
 
+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 => {
+  switch (value)
+  {
+  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 = () => {
   const location = useLocation ()
@@ -41,7 +74,11 @@ const PostSearchPage: FC = () => {
 			 [location.search])
 
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('postSearch')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
 
   const qURL = query.get ('url') ?? ''
   const qTitle = query.get ('title') ?? ''
@@ -53,7 +90,11 @@ const PostSearchPage: FC = () => {
   const qCreatedTo = query.get ('created_to') ?? ''
   const qUpdatedFrom = query.get ('updated_from') ?? ''
   const qUpdatedTo = query.get ('updated_to') ?? ''
-  const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder
+  const order = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchPostsOrder> ('postSearch')
+      ?? DEFAULT_POST_LIST_ORDER
+  )
 
   const [createdFrom, setCreatedFrom] = useState<string | null> (null)
   const [createdTo, setCreatedTo] = useState<string | null> (null)
@@ -83,6 +124,10 @@ const PostSearchPage: FC = () => {
   const results = data?.posts ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postSearch', { limit, order })
+  }, [limit, order])
+
   useEffect (() => {
     setURL (qURL ?? '')
     setTitle (qTitle ?? '')
@@ -113,6 +158,16 @@ const PostSearchPage: FC = () => {
     qs.set ('match', matchType)
     qs.set ('page', '1')
     qs.set ('order', order)
+    qs.set ('limit', String (limit))
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchPostsOrder }) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('limit', String (next.limit ?? limit))
+    qs.set ('order', next.order ?? order)
+    qs.set ('page', '1')
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
@@ -134,7 +189,24 @@ 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">
 	    {/* タイトル */}
@@ -161,6 +233,7 @@ const PostSearchPage: FC = () => {
 	    <FormField label="タグ">
 	      {() => (
 		  <TagInput
+		      includeNico={true}
 		      value={tagsStr}
 		      setValue={setTagsStr}/>)}
 	    </FormField>
@@ -296,7 +369,9 @@ const PostSearchPage: FC = () => {
 		  </thead>
 		  <tbody>
 		    {results.map (row => (
-			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
+			<tr
+			    key={row.id}
+			    className="even:bg-gray-100 dark:even:bg-gray-700">
 			  <td className="p-2">
 			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
 			      <motion.div

frontend/src/pages/tags/TagListPage.tsx

@@ -14,6 +14,14 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { tagsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_TAG_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
 import { fetchTags } from '@/lib/tags'
 import { dateString, inputClass } from '@/lib/utils'
 
@@ -35,6 +43,31 @@ const boolFromQuery = (value: string | null): boolean =>
 
 const tagStateLabel = (deprecatedAt: string | null) => deprecatedAt ? '廃止' : ''
 
+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 => {
+  switch (value)
+  {
+  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 = () => {
   const location = useLocation ()
@@ -44,7 +77,11 @@ const TagListPage: FC = () => {
   const query = useMemo (() => new URLSearchParams (location.search), [location.search])
 
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('tagList')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
 
   const qName = query.get ('name') ?? ''
   const qCategory = (query.get ('category') || null) as Category | null
@@ -58,7 +95,11 @@ const TagListPage: FC = () => {
   const qDeprecated = query.has ('deprecated')
       ? boolFromQuery (query.get ('deprecated'))
       : null
-  const order = (query.get ('order') || 'post_count:desc') as FetchTagsOrder
+  const order = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchTagsOrder> ('tagList')
+      ?? DEFAULT_TAG_LIST_ORDER
+  )
 
   const [name, setName] = useState ('')
   const [category, setCategory] = useState<Category | null> (null)
@@ -88,6 +129,10 @@ const TagListPage: FC = () => {
   const results = data?.tags ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('tagList', { limit, order })
+  }, [limit, order])
+
   useEffect (() => {
     setName (qName)
     setCategory (qCategory)
@@ -121,10 +166,20 @@ const TagListPage: FC = () => {
       qs.set ('deprecated', deprecated ? '1' : '0')
     qs.set ('page', '1')
     qs.set ('order', order)
+    qs.set ('limit', String (limit))
 
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchTagsOrder }) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('limit', String (next.limit ?? limit))
+    qs.set ('order', next.order ?? order)
+    qs.set ('page', '1')
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
   const defaultDirection = { name: 'asc',
 			     category: 'asc',
 			     post_count: 'desc',
@@ -138,7 +193,24 @@ 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">
 	    {/* 名前 */}

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -15,6 +15,12 @@ import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
+import {
+  getClientTheatreLayoutMode,
+  getClientTheatreTagFlow,
+  setClientTheatreLayoutMode,
+  setClientTheatreTagFlow,
+} from '@/lib/settings'
 import { canEditContent } from '@/lib/users'
 import { cn, dateString, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
@@ -50,9 +56,6 @@ const INITIAL_THEATRE_INFO: TheatreInfo =
 const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
     { tagPenalties: [], lightestPosts: [], heaviestPosts: [] }
 
-const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
-const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
-
 const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
     threeColumns:   '3 列',
     tagsBottom:     '2 列 A 型',
@@ -228,32 +231,20 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   const [post, setPost] = useState<Post | null> (null)
   const [videoLength, setVideoLength] = useState (0)
   const [weights, setWeights] = useState<TheatrePostSelectionWeights> (INITIAL_WEIGHTS)
-  const [layoutMode, setLayoutMode] = useState<TheatreLayoutMode> (() => {
+  const [layoutMode, setLayoutMode] =
-    const stored = localStorage.getItem (LAYOUT_STORAGE_KEY)
+      useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
-    return (
+  const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
-	((['threeColumns', 'tagsBottom', 'commentsBottom'] as TheatreLayoutMode[])
-	 .includes (stored as TheatreLayoutMode))
-	? (stored as TheatreLayoutMode)
-	: 'threeColumns')
-  })
-  const [tagFlow, setTagFlow] = useState<TagFlow> (() => {
-    const stored = localStorage.getItem (TAG_FLOW_STORAGE_KEY)
-    return (
-	(['vertical', 'horizontal'] as TagFlow[]).includes (stored as TagFlow)
-	? (stored as TagFlow)
-	: 'vertical')
-  })
   const { fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<TheatreCommentField> ()
 
   const changeLayoutMode = (mode: TheatreLayoutMode) => {
     setLayoutMode (mode)
-    localStorage.setItem (LAYOUT_STORAGE_KEY, mode)
+    setClientTheatreLayoutMode (mode)
   }
 
   const changeTagFlow = (flow: TagFlow) => {
     setTagFlow (flow)
-    localStorage.setItem (TAG_FLOW_STORAGE_KEY, flow)
+    setClientTheatreTagFlow (flow)
   }
 
   const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {

frontend/src/pages/users/SettingPage.tsx

@@ -1,43 +1,553 @@
-import type { FC } from 'react'
+import type { CSSProperties, Dispatch, FC, KeyboardEvent, SetStateAction } from 'react'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import FieldError from '@/components/common/FieldError'
-import Form from '@/components/common/Form'
 import FormField from '@/components/common/FormField'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import TagLink from '@/components/TagLink'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
+import { CATEGORY_NAMES, CATEGORIES } from '@/consts'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPut } from '@/lib/api'
-import { inputClass } from '@/lib/utils'
+import {
+    applyThemeSelection,
+    BUILTIN_THEMES,
+    createCustomThemeFromBase,
+    defaultThemeTagColoursFor,
+    DEFAULT_USER_SETTINGS,
+    deriveUserThemeModeFromSelection,
+    fetchUserSettings,
+    hasStoredClientThemeSelection,
+    getClientActiveThemeId,
+    getClientCustomThemes,
+    getResolvedThemeFromSelection,
+    setClientAppearanceThemes,
+    updateUserSettings,
+} from '@/lib/settings'
+import { cn, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
-import type { User } from '@/types'
+import type { Category, Tag, User } from '@/types'
+import type {
+    ActiveThemeId,
+    ClientTheme,
+    CustomClientTheme,
+    ThemeTagColours,
+    UserSettings,
+} from '@/lib/settings'
 
-type Props = { user:    User | null
+type Props = {
-	       setUser: React.Dispatch<React.SetStateAction<User | null>> }
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>>
+}
 
 type UserFormField = 'name'
+type SettingsFormField = 'theme'
+type SettingsTab = 'account' | 'theme' | 'keyboard'
+
+type TabSpec = {
+    id:     SettingsTab
+    label:  string }
+
+type SharedSectionProps = {
+    user:                  User
+    name:                  string
+    onNameChange:          (value: string) => void
+    onInheritOpen:         () => void
+    onUserCodeOpen:        () => void
+    onUserSubmit:          () => void
+    userBaseErrors:        string[]
+    userFieldErrors:       Partial<Record<UserFormField, string[]>>
+    draftActiveThemeId:    ActiveThemeId
+    draftCustomThemes:     Record<string, CustomClientTheme>
+    selectedTheme:         ClientTheme
+    draftTagColours:       ThemeTagColours
+    onThemeChange:         (themeId: ActiveThemeId) => void
+    onTagColourChange:     (category: Category, colour: string) => void
+    onResetAllTagColours:  () => void
+    onResetTagColour:      (category: Category) => void
+    onThemeSubmit:         () => void
+    settingsBaseErrors:    string[]
+    settingsFieldErrors:   Partial<Record<SettingsFormField, string[]>>
+}
+
+const tabs: TabSpec[] = [
+    { id: 'account', label: 'アカウント' },
+    { id: 'theme', label: 'テーマ' },
+    { id: 'keyboard', label: 'キーボード' },
+]
+
+const sectionClassName =
+    'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+
+const themeLabel: Record<UserSettings['theme'], string> = {
+    system: 'システム設定に従う',
+    light:  'ライト・モード',
+    dark:   'ダーク・モード',
+}
+
+const builtinThemeLabel: Record<'light' | 'dark', string> = {
+    light: 'ライト・モード',
+    dark:  'ダーク・モード',
+}
+
+const keyboardShortcutRows = [
+    {
+	action:   '投稿詳細を開く',
+	key:      'Enter',
+	scope:    '一覧・検索結果',
+	conflict: 'なし',
+    },
+    {
+	action:   '候補タグを選ぶ',
+	key:      '↑ / ↓ / Enter',
+	scope:    'タグ入力',
+	conflict: 'なし',
+    },
+    {
+	action:   '候補タグを閉じる',
+	key:      'Escape',
+	scope:    'タグ入力',
+	conflict: 'なし',
+    },
+]
+
+const previewTag = (
+    id:         number,
+    name:       string,
+    category:   Category,
+    postCount:  number,
+    hasWiki:    boolean,
+    options?:   { hasDeerjikists?: boolean },
+): Tag => ({
+    id,
+    name,
+    category,
+    deprecatedAt: null,
+    aliases: [],
+    parents: [],
+    postCount,
+    createdAt: '',
+    updatedAt: '',
+    hasWiki,
+    materialId: null,
+    hasDeerjikists: options?.hasDeerjikists ?? false,
+    children: [],
+})
+
+const previewTags: Record<Category, Tag> = {
+    deerjikist: previewTag (1, 'にじらー', 'deerjikist', 12, true, { hasDeerjikists: true }),
+    meme: previewTag (2, 'ミーム', 'meme', 34, true),
+    character: previewTag (3, 'キャラクター', 'character', 56, false),
+    general: previewTag (4, '一般', 'general', 78, true),
+    material: previewTag (5, '素材', 'material', 90, false),
+    meta: previewTag (6, 'メタ', 'meta', 21, true),
+    nico: previewTag (7, 'nico:sm9', 'nico', 43, false),
+}
+
+
+const parseTab = (search: string): SettingsTab => {
+  const tab = new URLSearchParams (search).get ('tab')
+  return tabs.some (candidate => candidate.id === tab)
+    ? tab as SettingsTab
+    : 'account'
+}
+
+
+const tabButtonId = (tab: SettingsTab): string => `settings-tab-${ tab }`
+const tabPanelId = (tab: SettingsTab): string => `settings-panel-${ tab }`
+
+
+const themePreviewStyle = (tagColours: ThemeTagColours): CSSProperties =>
+    Object.fromEntries (
+	CATEGORIES.flatMap (category => [
+	    [`--tag-colour-${ category }`, tagColours[category]],
+	    [`--tag-colour-${ category }-hover`, tagColours[category]],
+	]),
+    ) as CSSProperties
+
+
+const themeLabelById = (
+    themeId:       ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): string => {
+  if (themeId === 'system')
+    return themeLabel.system
+  if (themeId === 'light' || themeId === 'dark')
+    return builtinThemeLabel[themeId]
+  return (customThemes[themeId] ?? BUILTIN_THEMES.light).name
+}
+
+
+const AccountSection: FC<SharedSectionProps> = ({
+    name,
+    onInheritOpen,
+    onNameChange,
+    onUserCodeOpen,
+    onUserSubmit,
+    user,
+    userBaseErrors,
+    userFieldErrors,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">アカウント</h2>
+      <FieldError messages={userBaseErrors}/>
+
+      <FormField label="表示名" messages={userFieldErrors.name}>
+	{({ describedBy, invalid }) => (
+	    <>
+	      <input
+		  type="text"
+		  aria-describedby={describedBy}
+		  aria-invalid={invalid}
+		  className={inputClass (invalid)}
+		  value={name}
+		  placeholder="名もなきニジラー"
+		  onChange={ev => onNameChange (ev.target.value)}/>
+	      {!(user.name) && (
+		  <p className="mt-1 text-sm text-red-500">
+		    名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+		  </p>)}
+	    </>)}
+      </FormField>
+
+      <div className="flex flex-wrap gap-2">
+	<Button type="button" onClick={onUserSubmit}>
+	  表示名を更新
+	</Button>
+      </div>
+
+      <div className="space-y-2">
+	<Label>引継ぎ</Label>
+	<div className="flex flex-wrap gap-2">
+	  <Button
+	      type="button"
+	      onClick={onUserCodeOpen}
+	      className="bg-gray-600 text-white"
+	      disabled={!(user)}>
+	    引継ぎコードを表示
+	  </Button>
+	  <Button
+	      type="button"
+	      onClick={onInheritOpen}
+	      className="bg-red-600 text-white"
+	      disabled={!(user)}>
+	    ほかのブラウザから引継ぐ
+	  </Button>
+	</div>
+      </div>
+    </section>)
+
+
+const ThemeSection: FC<SharedSectionProps> = ({
+    draftActiveThemeId,
+    draftCustomThemes,
+    selectedTheme,
+    draftTagColours,
+    onResetAllTagColours,
+    onResetTagColour,
+    onTagColourChange,
+    onThemeChange,
+    onThemeSubmit,
+    settingsBaseErrors,
+    settingsFieldErrors,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">テーマ</h2>
+      <FieldError messages={settingsBaseErrors}/>
+
+      <FormField label="基本テーマ" messages={settingsFieldErrors.theme}>
+	{() => (
+	    <select
+		className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
+		value={draftActiveThemeId}
+		onChange={ev => onThemeChange (ev.target.value as ActiveThemeId)}>
+	      <option value="system">{themeLabel.system}</option>
+	      <option value="light">{builtinThemeLabel.light}</option>
+	      <option value="dark">{builtinThemeLabel.dark}</option>
+	      {Object.values (draftCustomThemes).length > 0 && (
+		  <optgroup label="カスタムテーマ">
+		    {Object.values (draftCustomThemes).map (theme => (
+			<option key={theme.id} value={theme.id}>
+			  {theme.name}
+			</option>))}
+		  </optgroup>)}
+	    </select>)}
+      </FormField>
+
+      <div className="space-y-2 rounded-lg border border-dashed border-border/70 p-3 text-sm">
+	<p>
+	  テーマの選択状態は現在のブラウザに保存し，背景・文字色はそのテーマの base に従います．
+	</p>
+	<p className="text-muted-foreground">
+	  backend には system / light / dark の mode だけ保存します．
+	  カスタムテーマ本体は今は browser-local です．
+	</p>
+	<p className="text-muted-foreground">
+	  将来は themes テーブルなどへ移して，端末間同期できる構造に拡張できます．
+	</p>
+      </div>
+
+      <div className="space-y-3">
+	<div className="flex flex-wrap items-center justify-between gap-2">
+	  <div>
+	  <h3 className="font-medium">タグカテゴリ色</h3>
+	  <p className="text-sm text-muted-foreground">
+	    {selectedTheme.builtin || draftActiveThemeId === 'system'
+	     ? '組み込みテーマは直接変更されません．色を変更するとカスタムテーマを作成します．'
+	     : `現在の編輯対象: ${ selectedTheme.name }`}
+	  </p>
+	  </div>
+	  <Button
+	      type="button"
+	      variant="outline"
+	      onClick={onResetAllTagColours}
+	      disabled={selectedTheme.builtin || draftActiveThemeId === 'system'}>
+	    すべてのタグ色を既定に戻す
+	  </Button>
+	</div>
+
+	<div className="grid gap-3 sm:grid-cols-2">
+	  {CATEGORIES.map (category => {
+	      const resolvedDefaults =
+		  defaultThemeTagColoursFor (selectedTheme.baseTheme)
+	      const isDefault =
+		  draftTagColours[category] === resolvedDefaults[category]
+
+	      return (
+		  <div
+		      key={category}
+		      className="space-y-2 rounded-lg border border-border/70 px-3 py-2">
+		    <div className="flex items-center justify-between gap-3">
+		      <span className="text-sm">{CATEGORY_NAMES[category]}</span>
+		      <input
+			  type="color"
+			  value={draftTagColours[category]}
+			  onChange={ev => onTagColourChange (category, ev.target.value)}
+			  className="h-10 w-16 cursor-pointer rounded border border-border
+				     bg-transparent p-1"/>
+		    </div>
+		    <div className="flex justify-end">
+		      <Button
+			  type="button"
+			  variant="ghost"
+			  className="h-auto px-0 py-0 text-xs"
+			  onClick={() => onResetTagColour (category)}
+			  disabled={
+			      isDefault
+			      || selectedTheme.builtin
+			      || draftActiveThemeId === 'system'
+			  }>
+			既定に戻す
+		      </Button>
+		    </div>
+		  </div>)
+	  })}
+	</div>
+      </div>
+
+      <div className="space-y-2 rounded-lg border border-border bg-background p-3
+		      text-foreground shadow-sm transition-colors">
+	<p className="text-sm font-medium">プレビュー</p>
+	<p className="text-xs text-muted-foreground">
+	  現在の表示テーマ: {themeLabelById (draftActiveThemeId, draftCustomThemes)}
+	</p>
+	<div className="flex flex-wrap gap-3" style={themePreviewStyle (draftTagColours)}>
+	  {CATEGORIES.map (category => (
+	      <TagLink
+		  key={category}
+		  tag={previewTags[category]}
+		  linkFlg={false}
+		  truncateOnMobile
+		  withWiki={false}/>))}
+	</div>
+      </div>
+
+      <div className="space-y-2 rounded-lg border border-dashed border-border/70 p-3 text-sm">
+	<p className="font-medium">既存 backend 設定について</p>
+	<p>
+	  auto_fetch_title、auto_fetch_thumbnail、wiki_editor_mode は backend 側に
+	  保持したままです．この共通設定画面にはまだ接続していません．
+	</p>
+      </div>
+
+      <Button type="button" onClick={onThemeSubmit}>
+	テーマを保存
+      </Button>
+    </section>)
+
+
+const KeyboardSection: FC = () => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">キーボード</h2>
+
+      <p className="text-sm text-muted-foreground">
+	現段階では一覧表示のみです．将来は action / key / scope / conflict を持つ
+	key bind 設定へ拡張できる形にしています．
+      </p>
+
+      <div className="overflow-x-auto">
+	<table className="w-full min-w-[28rem] table-fixed border-collapse text-sm">
+	  <thead className="border-b border-border">
+	    <tr>
+	      <th className="p-2 text-left">操作</th>
+	      <th className="p-2 text-left">キー</th>
+	      <th className="p-2 text-left">適用範囲</th>
+	      <th className="p-2 text-left">競合</th>
+	    </tr>
+	  </thead>
+	  <tbody>
+	    {keyboardShortcutRows.map (row => (
+		<tr key={row.action} className="border-b border-border/60 last:border-b-0">
+		  <td className="p-2">{row.action}</td>
+		  <td className="p-2 font-mono">{row.key}</td>
+		  <td className="p-2">{row.scope}</td>
+		  <td className="p-2">{row.conflict}</td>
+		</tr>))}
+	  </tbody>
+	</table>
+      </div>
+    </section>)
 
 
 const SettingPage: FC<Props> = ({ user, setUser }) => {
-  const [name, setName] = useState ('')
+  const location = useLocation ()
-  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
+  const navigate = useNavigate ()
-  const [inheritVsbl, setInheritVsbl] = useState (false)
-  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
-      useValidationErrors<UserFormField> ()
 
-  const handleSubmit = async () => {
+  const [inheritVsbl, setInheritVsbl] = useState (false)
+  const [loading, setLoading] = useState (true)
+  const [name, setName] = useState ('')
+  const [settingsError, setSettingsError] = useState<string | null> (null)
+  const [, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
+  const [savedActiveThemeId, setSavedActiveThemeId] =
+      useState<ActiveThemeId> (getClientActiveThemeId ())
+  const [savedCustomThemes, setSavedCustomThemes] =
+      useState<Record<string, CustomClientTheme>> (getClientCustomThemes ())
+  const [draftActiveThemeId, setDraftActiveThemeId] =
+      useState<ActiveThemeId> (getClientActiveThemeId ())
+  const [draftCustomThemes, setDraftCustomThemes] =
+      useState<Record<string, CustomClientTheme>> (getClientCustomThemes ())
+  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
+  const {
+    baseErrors: userBaseErrors,
+    fieldErrors: userFieldErrors,
+    clearValidationErrors: clearUserValidationErrors,
+    applyValidationError: applyUserValidationError,
+  } = useValidationErrors<UserFormField> ()
+  const {
+    baseErrors: settingsBaseErrors,
+    fieldErrors: settingsFieldErrors,
+    clearValidationErrors: clearSettingsValidationErrors,
+    applyValidationError: applySettingsValidationError,
+  } = useValidationErrors<SettingsFormField> ()
+
+  const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
+  const selectedTheme = useMemo<ClientTheme> (
+      () => getResolvedThemeFromSelection (draftActiveThemeId, draftCustomThemes),
+      [draftActiveThemeId, draftCustomThemes],
+  )
+  const draftTagColours = selectedTheme.tokens.tagColours
+
+  const setActiveTab = (tab: SettingsTab) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('tab', tab)
+    navigate (
+	`${ location.pathname }?${ params.toString () }`,
+	{ replace: true },
+    )
+  }
+
+  const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (() => ({
+      account: Boolean (userFieldErrors.name?.length),
+      theme: Boolean (settingsFieldErrors.theme?.length),
+      keyboard: false,
+  }), [settingsFieldErrors.theme, userFieldErrors.name])
+
+  const applyDraftThemeSelection = (
+      activeThemeId: ActiveThemeId,
+      customThemes:  Record<string, CustomClientTheme>,
+  ) => {
+    setDraftActiveThemeId (activeThemeId)
+    setDraftCustomThemes (customThemes)
+    setDraftSettings (current => ({
+	...current,
+	theme: deriveUserThemeModeFromSelection (activeThemeId, customThemes),
+    }))
+    applyThemeSelection (activeThemeId, customThemes)
+  }
+
+  const ensureEditableCustomTheme = (): {
+      activeThemeId: ActiveThemeId
+      customThemes:  Record<string, CustomClientTheme>
+  } => {
+    if (draftActiveThemeId !== 'system' && draftCustomThemes[draftActiveThemeId] != null)
+      {
+	return {
+	    activeThemeId: draftActiveThemeId,
+	    customThemes: draftCustomThemes,
+	}
+      }
+
+    const customTheme = createCustomThemeFromBase (
+	selectedTheme.baseTheme,
+	{
+	    ...selectedTheme.tokens,
+	    tagColours: { ...selectedTheme.tokens.tagColours },
+	},
+    )
+    const nextCustomThemes = {
+	...draftCustomThemes,
+	[customTheme.id]: customTheme,
+    }
+
+    return {
+	activeThemeId: customTheme.id,
+	customThemes: nextCustomThemes,
+    }
+  }
+
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const currentIndex = tabs.findIndex (tab => tab.id === activeTab)
+
+    switch (event.key)
+    {
+    case 'ArrowDown':
+    case 'ArrowRight':
+      event.preventDefault ()
+      setActiveTab (tabs[(currentIndex + 1) % tabs.length].id)
+      break
+
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      event.preventDefault ()
+      setActiveTab (tabs[(currentIndex - 1 + tabs.length) % tabs.length].id)
+      break
+
+    case 'Home':
+      event.preventDefault ()
+      setActiveTab (tabs[0].id)
+      break
+
+    case 'End':
+      event.preventDefault ()
+      setActiveTab (tabs[tabs.length - 1].id)
+      break
+    }
+  }
+
+  const handleUserSubmit = async () => {
     if (!(user))
       return
 
-    clearValidationErrors ()
+    clearUserValidationErrors ()
 
     const formData = new FormData
     formData.append ('name', name)
@@ -47,13 +557,35 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       const data = await apiPut<User> (
 	  `/users/${ user.id }`, formData,
 	  { headers: { 'Content-Type': 'multipart/form-data' } })
-      setUser (user => ({ ...user, ...data }))
+      setUser (currentUser => ({ ...currentUser, ...data }))
-      toast ({ title: '設定を更新しました．' })
+      toast ({ title: '表示名を更新しました．' })
     }
-    catch (e)
+    catch (submitError)
     {
-      applyValidationError (e)
+      applyUserValidationError (submitError)
-      toast ({ title: 'しっぱい……' })
+      toast ({ title: '表示名を更新できませんでした．' })
+    }
+  }
+
+  const handleThemeSubmit = async () => {
+    clearSettingsValidationErrors ()
+
+    try
+    {
+      const themeMode =
+	  deriveUserThemeModeFromSelection (draftActiveThemeId, draftCustomThemes)
+      const data = await updateUserSettings ({ theme: themeMode })
+      setDraftSettings ({ ...data, theme: themeMode })
+      setSavedActiveThemeId (draftActiveThemeId)
+      setSavedCustomThemes (draftCustomThemes)
+      setClientAppearanceThemes (draftActiveThemeId, draftCustomThemes)
+      applyThemeSelection (draftActiveThemeId, draftCustomThemes)
+      toast ({ title: 'テーマ設定を保存しました．' })
+    }
+    catch (submitError)
+    {
+      applySettingsValidationError (submitError)
+      toast ({ title: 'テーマ設定を保存できませんでした．' })
     }
   }
 
@@ -64,6 +596,152 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     setName (user.name ?? '')
   }, [user])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	const data = await fetchUserSettings ()
+	if (cancelled)
+	  return
+
+	const customThemes = getClientCustomThemes ()
+	const activeThemeId = hasStoredClientThemeSelection ()
+	    ? getClientActiveThemeId ()
+	    : data.theme
+	const themeMode = deriveUserThemeModeFromSelection (activeThemeId, customThemes)
+
+	setDraftSettings ({ ...data, theme: themeMode })
+	setSavedActiveThemeId (activeThemeId)
+	setSavedCustomThemes (customThemes)
+	setDraftActiveThemeId (activeThemeId)
+	setDraftCustomThemes (customThemes)
+	setSettingsError (null)
+      }
+      catch
+      {
+	if (cancelled)
+	  return
+
+	setSettingsError ('設定の読込みに失敗しました．')
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [user])
+
+  useEffect (() => {
+    if (userFieldErrors.name?.length)
+      setActiveTab ('account')
+  }, [location.pathname, location.search, userFieldErrors.name])
+
+  useEffect (() => {
+    if (settingsFieldErrors.theme?.length)
+      setActiveTab ('theme')
+  }, [location.pathname, location.search, settingsFieldErrors.theme])
+
+  useEffect (() => {
+    applyThemeSelection (draftActiveThemeId, draftCustomThemes)
+
+    return () => {
+      applyThemeSelection (savedActiveThemeId, savedCustomThemes)
+    }
+  }, [draftActiveThemeId, draftCustomThemes, savedActiveThemeId, savedCustomThemes])
+
+  const sectionProps: SharedSectionProps | null = user ? {
+      user,
+      name,
+      onNameChange: setName,
+      onInheritOpen: () => setInheritVsbl (true),
+      onUserCodeOpen: () => setUserCodeVsbl (true),
+      onUserSubmit: handleUserSubmit,
+      userBaseErrors,
+      userFieldErrors,
+      draftActiveThemeId,
+      draftCustomThemes,
+      selectedTheme,
+      draftTagColours,
+      onThemeChange: themeId => {
+	  applyDraftThemeSelection (themeId, draftCustomThemes)
+      },
+      onTagColourChange: (category, colour) => {
+	  const editable = ensureEditableCustomTheme ()
+	  const editableTheme = editable.customThemes[editable.activeThemeId]
+	  const nextCustomThemes = {
+	      ...editable.customThemes,
+	      [editable.activeThemeId]: {
+		  ...editableTheme,
+		  tokens: {
+		      ...editableTheme.tokens,
+		      tagColours: {
+			  ...editableTheme.tokens.tagColours,
+			  [category]: colour,
+		      },
+		  },
+	      },
+	  }
+	  applyDraftThemeSelection (editable.activeThemeId, nextCustomThemes)
+      },
+      onResetAllTagColours: () => {
+	  if (selectedTheme.builtin || draftActiveThemeId === 'system')
+	    return
+
+	  applyDraftThemeSelection (
+	      draftActiveThemeId,
+	      {
+		  ...draftCustomThemes,
+		  [draftActiveThemeId]: {
+		      ...draftCustomThemes[draftActiveThemeId],
+		      tokens: {
+			  ...draftCustomThemes[draftActiveThemeId].tokens,
+			  tagColours: {
+			      ...defaultThemeTagColoursFor (selectedTheme.baseTheme),
+			  },
+		      },
+		  },
+	      },
+	  )
+      },
+      onResetTagColour: category => {
+	  if (selectedTheme.builtin || draftActiveThemeId === 'system')
+	    return
+
+	  applyDraftThemeSelection (
+	      draftActiveThemeId,
+	      {
+		  ...draftCustomThemes,
+		  [draftActiveThemeId]: {
+		      ...draftCustomThemes[draftActiveThemeId],
+		      tokens: {
+			  ...draftCustomThemes[draftActiveThemeId].tokens,
+			  tagColours: {
+			      ...draftCustomThemes[draftActiveThemeId].tokens.tagColours,
+			      [category]:
+				  defaultThemeTagColoursFor (selectedTheme.baseTheme)[category],
+			  },
+		      },
+		  },
+	      },
+	  )
+      },
+      onThemeSubmit: handleThemeSubmit,
+      settingsBaseErrors,
+      settingsFieldErrors,
+  } : null
+
   return (
       <MainArea>
 	<Helmet>
@@ -71,62 +749,80 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	  <title>設定 | {SITE_TITLE}</title>
 	</Helmet>
 
-	<Form>
+	<div className="mx-auto max-w-xl space-y-4 p-4 md:hidden">
 	  <PageTitle>設定</PageTitle>
-
+	  <FieldError messages={settingsError ? [settingsError] : []}/>
-	  {user ? (
+	  {loading ? 'Loading...' : (
 	      <>
-		<FieldError messages={baseErrors}/>
+		{sectionProps && (
+		    <>
+		      <AccountSection {...sectionProps}/>
+		      <ThemeSection {...sectionProps}/>
+		      <KeyboardSection/>
+		    </>)}
+	      </>)}
+	</div>
 
-		{/* 名前 */}
+	<div className="hidden md:flex md:justify-center md:px-4">
-		<FormField label="表示名" messages={fieldErrors.name}>
+	  <div className="grid w-full max-w-[58rem] grid-cols-[12rem_minmax(0,1fr)] gap-6">
-		  {({ describedBy, invalid }) => (
+	    <div
-		      <>
+		role="tablist"
-		  <input type="text"
+		aria-label="設定区分"
-			 aria-describedby={describedBy}
+		aria-orientation="vertical"
-			 aria-invalid={invalid}
+		className="sticky top-4 flex h-fit flex-col gap-2">
-			 className={inputClass (invalid)}
+	      {tabs.map (tab => (
-			 value={name}
+		  <button
-			 placeholder="名もなきニジラー"
+		      key={tab.id}
-			 onChange={ev => setName (ev.target.value)}/>
+		      id={tabButtonId (tab.id)}
-		  {(user && !(user.name)) && (
+		      type="button"
-		      <p className="mt-1 text-sm text-red-500">
+		      role="tab"
-			名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+		      aria-selected={activeTab === tab.id}
-		      </p>)}
+		      aria-controls={tabPanelId (tab.id)}
-		      </>)}
+		      tabIndex={activeTab === tab.id ? 0 : -1}
-		</FormField>
+		      className={cn (
+			  'rounded-xl border px-4 py-3 text-left text-sm font-medium',
+			  activeTab === tab.id
+			  ? ['border-slate-900 bg-slate-900 text-white',
+			     'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
+			  : ['border-slate-300 bg-white text-slate-700',
+			     'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100'],
+		      )}
+		      onClick={() => setActiveTab (tab.id)}
+		      onKeyDown={handleTabKeyDown}>
+		    {tab.label}
+		    {settingsTabErrors[tab.id] ? ' ⚠' : ''}
+		  </button>))}
+	    </div>
 
-		{/* 送信 */}
+	    <div className="w-full max-w-xl justify-self-center space-y-4">
-		<Button onClick={handleSubmit}
+	      <PageTitle>設定</PageTitle>
-			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+	      <FieldError messages={settingsError ? [settingsError] : []}/>
-		  更新
+	      {loading ? 'Loading...' : (
-		</Button>
+		  <div
+		      id={tabPanelId (activeTab)}
+		      role="tabpanel"
+		      aria-labelledby={tabButtonId (activeTab)}>
+		    {sectionProps && (
+			<>
+			  {activeTab === 'account' && <AccountSection {...sectionProps}/>}
+			  {activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
+			  {activeTab === 'keyboard' && <KeyboardSection/>}
+			</>)}
+		  </div>)}
+	    </div>
+	  </div>
+	</div>
 
-		{/* 引継ぎ */}
+	<UserCodeDialogue
-		<div>
+	    visible={userCodeVsbl}
-		  <Label>引継ぎ</Label>
+	    onVisibleChange={setUserCodeVsbl}
-		  <Button onClick={() => setUserCodeVsbl (true)}
+	    user={user}
-			  className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
+	    setUser={setUser}/>
-			  disabled={!(user)}>
-		    引継ぎコードを表示
-		  </Button>
-		  <Button onClick={() => setInheritVsbl (true)}
-			  className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
-			  disabled={!(user)}>
-		    ほかのブラウザから引継ぐ
-		  </Button>
-		</div>
-	      </>) : 'Loading...'}
-	</Form>
 
-	<UserCodeDialogue visible={userCodeVsbl}
+	<InheritDialogue
-			  onVisibleChange={setUserCodeVsbl}
+	    visible={inheritVsbl}
-			  user={user}
+	    onVisibleChange={setInheritVsbl}
-			  setUser={setUser}/>
+	    setUser={setUser}/>
-
-	<InheritDialogue visible={inheritVsbl}
-			 onVisibleChange={setInheritVsbl}
-			 setUser={setUser}/>
       </MainArea>)
 }
 

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -24,6 +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
+
+// `wiki_editor_mode` is still kept in backend settings, but the common
+// settings screen does not expose it at present. Until that UI returns, the
+// editor stays on the fixed split view here.
 
 type Props = { user: User | null }
 
@@ -114,6 +119,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
+				config={{ view: FIXED_WIKI_EDITOR_VIEW }}
 				renderHTML={text => mdParser.render (text)}
 				onChange={({ text }) => setBody (text)}/>)}
 		</FormField>

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -22,6 +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
+
+// `wiki_editor_mode` is still kept in backend settings, but the common
+// settings screen does not expose it at present. Until that UI returns, the
+// editor stays on the fixed split view here.
 
 type Props = { user: User | null }
 
@@ -92,6 +97,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
+			  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 }`),