backend/app/controllers/user_theme_slots_controller.rb

@@ -0,0 +1,38 @@
+class UserThemeSlotsController < ApplicationController
+  wrap_parameters false
+
+  def index
+    return head :unauthorized unless current_user
+
+    render json: current_user
+                 .theme_slots
+                 .order(:base_theme, :slot_no)
+                 .map { |slot| slot.serializable_hash }
+  end
+
+  def update
+    return head :unauthorized unless current_user
+
+    base_theme = params[:base_theme].to_s
+    slot_no = params[:slot_no].to_i
+    tokens = params[:tokens]
+
+    unless UserThemeSlot::BASE_THEMES.include?(base_theme)
+      return render_validation_error fields: { base_theme: ['値が不正です．'] }
+    end
+    unless UserThemeSlot::SLOT_NOS.include?(slot_no)
+      return render_validation_error fields: { slot_no: ['値が不正です．'] }
+    end
+    unless tokens.is_a?(ActionController::Parameters) || tokens.is_a?(Hash)
+      return render_validation_error fields: { tokens: ['JSON object で指定してください．'] }
+    end
+
+    slot = UserThemeSlot.find_or_initialize_by(user: current_user,
+                                               base_theme:,
+                                               slot_no:)
+    slot.tokens = tokens.is_a?(ActionController::Parameters) ? tokens.to_unsafe_h : tokens
+    slot.save!
+
+    render json: slot.serializable_hash, status: :ok
+  end
+end

backend/app/models/user.rb

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

backend/app/models/user_theme_slot.rb

@@ -0,0 +1,27 @@
+class UserThemeSlot < ApplicationRecord
+  BASE_THEMES = ['light', 'dark'].freeze
+  SLOT_NOS = [1, 2, 3].freeze
+
+  belongs_to :user
+
+  validates :user_id, presence: true
+  validates :base_theme, presence: true, inclusion: { in: BASE_THEMES }
+  validates :slot_no, presence: true, inclusion: { in: SLOT_NOS }
+  validates :tokens, presence: true
+  validates :user_id, uniqueness: { scope: [:base_theme, :slot_no] }
+
+  validate :tokens_must_be_object
+
+  def serializable_hash(options = nil)
+    hash = { only: [:base_theme, :slot_no, :tokens, :created_at, :updated_at] }
+    super(hash.merge(options || {}))
+  end
+
+  private
+
+  def tokens_must_be_object
+    return if tokens.is_a?(Hash)
+
+    errors.add(:tokens, 'は JSON object で指定してください．')
+  end
+end

backend/config/routes.rb

@@ -83,6 +83,8 @@ Rails.application.routes.draw do
 
   get 'users/settings', to: 'user_settings#show'
   patch 'users/settings', to: 'user_settings#update'
+  get 'users/theme_slots', to: 'user_theme_slots#index'
+  put 'users/theme_slots/:base_theme/:slot_no', to: 'user_theme_slots#update'
 
   resources :users, only: [:create, :update] do
     collection do

backend/db/migrate/20260705000000_create_user_theme_slots.rb

@@ -0,0 +1,22 @@
+class CreateUserThemeSlots < ActiveRecord::Migration[8.0]
+  def change
+    create_table :user_theme_slots do |t|
+      t.references :user, null: false, foreign_key: true
+      t.string :base_theme, null: false
+      t.integer :slot_no, null: false
+      t.json :tokens, null: false
+      t.timestamps
+    end
+
+    add_index :user_theme_slots,
+              [:user_id, :base_theme, :slot_no],
+              unique: true,
+              name: 'index_user_theme_slots_on_user_theme_and_slot'
+    add_check_constraint :user_theme_slots,
+                         "base_theme IN ('light', 'dark')",
+                         name: 'user_theme_slots_base_theme_valid'
+    add_check_constraint :user_theme_slots,
+                         'slot_no BETWEEN 1 AND 3',
+                         name: 'user_theme_slots_slot_no_valid'
+  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_07_04_000000) do
+ActiveRecord::Schema[8.0].define(version: 2026_07_05_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
@@ -72,7 +72,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["correct_post_id"], name: "index_gekanator_games_on_correct_post_id"
     t.index ["guessed_post_id"], name: "index_gekanator_games_on_guessed_post_id"
     t.index ["user_id"], name: "index_gekanator_games_on_user_id"
-    t.check_constraint "`question_count` >= 0", name: "chk_gekanator_games_question_count_nonnegative"
   end
 
   create_table "gekanator_question_examples", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -275,10 +274,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
     t.index ["created_at"], name: "index_nico_tag_versions_on_created_at"
-    t.index ["created_by_user_id", "created_at"], name: "index_nico_tag_versions_on_created_by_user_id_and_created_at", order: { created_at: :desc }
+    t.index ["created_by_user_id", "created_at"], name: "index_nico_tag_versions_on_created_by_user_id_and_created_at"
-    t.index ["tag_id", "created_at"], name: "index_nico_tag_versions_on_tag_id_and_created_at", order: { created_at: :desc }
+    t.index ["tag_id", "created_at"], name: "index_nico_tag_versions_on_tag_id_and_created_at"
     t.index ["tag_id", "version_no"], name: "index_nico_tag_versions_on_tag_id_and_version_no", unique: true
-    t.check_constraint "`version_no` > 0", name: "nico_tag_versions_version_no_positive"
   end
 
   create_table "post_implications", primary_key: ["post_id", "parent_post_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -287,14 +285,13 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.index ["parent_post_id"], name: "index_post_implications_on_parent_post_id"
-    t.check_constraint "`post_id` <> `parent_post_id`", name: "chk_post_implications_no_self"
   end
 
   create_table "post_similarities", primary_key: ["post_id", "target_post_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "post_id", null: false
     t.bigint "target_post_id", null: false
     t.float "cos", null: false
-    t.index ["post_id", "cos"], name: "index_post_similarities_on_post_id_and_cos", order: { cos: :desc }
+    t.index ["post_id", "cos"], name: "index_post_similarities_on_post_id_and_cos"
     t.index ["target_post_id"], name: "index_post_similarities_on_target_post_id"
   end
 
@@ -350,8 +347,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["post_id"], name: "index_post_versions_on_post_id"
     t.index ["video_ms", "post_id"], name: "idx_post_versions_video_ms_post_id"
     t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_post_versions_video_ms_positive"
-    t.check_constraint "`event_type` in (_utf8mb4'create',_utf8mb4'update',_utf8mb4'discard',_utf8mb4'restore')", name: "post_versions_event_type_valid"
-    t.check_constraint "`version_no` > 0", name: "post_versions_version_no_positive"
   end
 
   create_table "posts", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -369,7 +364,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["url"], name: "index_posts_on_url", unique: true
     t.index ["video_ms", "id"], name: "idx_posts_video_ms_id"
     t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_posts_video_ms_positive"
-    t.check_constraint "`version_no` > 0", name: "chk_posts_version_no_positive"
   end
 
   create_table "settings", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -377,6 +371,12 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.string "theme", default: "system", null: false
+    t.string "display_density", default: "comfortable", null: false
+    t.string "font_size", default: "normal", null: false
+    t.integer "post_list_limit", default: 50, null: false
+    t.string "post_list_order", default: "created_at_desc", null: false
+    t.string "viewed_post_display", default: "show", null: false
+    t.boolean "tag_autocomplete_nico", default: true, 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
@@ -418,7 +418,7 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.bigint "tag_id", null: false
     t.bigint "target_tag_id", null: false
     t.float "cos", null: false
-    t.index ["tag_id", "cos"], name: "index_tag_similarities_on_tag_id_and_cos", order: { cos: :desc }
+    t.index ["tag_id", "cos"], name: "index_tag_similarities_on_tag_id_and_cos"
     t.index ["target_tag_id"], name: "index_tag_similarities_on_target_tag_id"
   end
 
@@ -428,32 +428,30 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.string "event_type", null: false
     t.string "name", null: false
     t.string "category", null: false
-    t.datetime "deprecated_at"
     t.text "aliases", null: false
     t.text "parent_tag_ids", null: false
+    t.datetime "deprecated_at"
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
     t.index ["created_at"], name: "index_tag_versions_on_created_at"
-    t.index ["created_by_user_id", "created_at"], name: "index_tag_versions_on_created_by_user_id_and_created_at", order: { created_at: :desc }
+    t.index ["created_by_user_id", "created_at"], name: "index_tag_versions_on_created_by_user_id_and_created_at"
-    t.index ["tag_id", "created_at"], name: "index_tag_versions_on_tag_id_and_created_at", order: { created_at: :desc }
+    t.index ["tag_id", "created_at"], name: "index_tag_versions_on_tag_id_and_created_at"
     t.index ["tag_id", "version_no"], name: "index_tag_versions_on_tag_id_and_version_no", unique: true
-    t.check_constraint "`version_no` > 0", name: "tag_versions_version_no_positive"
   end
 
   create_table "tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "tag_name_id", null: false
     t.string "category", default: "general", null: false
+    t.datetime "deprecated_at"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "post_count", default: 0, null: false
-    t.datetime "deprecated_at"
     t.datetime "discarded_at"
     t.integer "version_no", null: false
     t.index ["deprecated_at"], name: "index_tags_on_deprecated_at"
     t.index ["discarded_at"], name: "index_tags_on_discarded_at"
     t.index ["tag_name_id"], name: "index_tags_on_tag_name_id", unique: true
     t.check_constraint "(`deprecated_at` is null) or (`category` <> _utf8mb4'nico')", name: "chk_tags_deprecated_at_not_nico"
-    t.check_constraint "`version_no` > 0", name: "chk_tags_version_no_positive"
   end
 
   create_table "theatre_comments", primary_key: ["theatre_id", "no"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -568,6 +566,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["post_id"], name: "index_user_post_views_on_post_id"
   end
 
+  create_table "user_theme_slots", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.string "base_theme", null: false
+    t.integer "slot_no", null: false
+    t.json "tokens", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["user_id", "base_theme", "slot_no"], name: "index_user_theme_slots_on_user_theme_and_slot", unique: true
+    t.index ["user_id"], name: "index_user_theme_slots_on_user_id"
+    t.check_constraint "`base_theme` in (_utf8mb4'light',_utf8mb4'dark')", name: "user_theme_slots_base_theme_valid"
+    t.check_constraint "`slot_no` between 1 and 3", name: "user_theme_slots_slot_no_valid"
+  end
+
   create_table "users", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name"
     t.string "inheritance_code", limit: 64, null: false
@@ -578,19 +589,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["banned_at"], name: "index_users_on_banned_at"
   end
 
-  create_table "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
-    t.bigint "wiki_page_id", null: false
-    t.integer "no", null: false
-    t.string "alt_text"
-    t.binary "sha256", limit: 32, null: false
-    t.bigint "created_by_user_id", null: false
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
-    t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
-    t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
-    t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
-  end
-
   create_table "wiki_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "sha256", limit: 64, null: false
     t.text "body", null: false
@@ -607,13 +605,11 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.datetime "discarded_at"
-    t.integer "next_asset_no", default: 1, null: false
     t.integer "version_no", null: false
     t.index ["created_user_id"], name: "index_wiki_pages_on_created_user_id"
     t.index ["discarded_at"], name: "index_wiki_pages_on_discarded_at"
     t.index ["tag_name_id"], name: "index_wiki_pages_on_tag_name_id", unique: true
     t.index ["updated_user_id"], name: "index_wiki_pages_on_updated_user_id"
-    t.check_constraint "`version_no` > 0", name: "chk_wiki_pages_version_no_positive"
   end
 
   create_table "wiki_revision_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -658,8 +654,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
     t.index ["created_by_user_id"], name: "index_wiki_versions_on_created_by_user_id"
     t.index ["wiki_page_id", "version_no"], name: "index_wiki_versions_on_wiki_page_id_and_version_no", unique: true
     t.index ["wiki_page_id"], name: "index_wiki_versions_on_wiki_page_id"
-    t.check_constraint "`event_type` in (_utf8mb4'create',_utf8mb4'update',_utf8mb4'discard',_utf8mb4'restore')", name: "wiki_versions_event_type_valid"
-    t.check_constraint "`version_no` > 0", name: "wiki_versions_version_no_positive"
   end
 
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
@@ -740,8 +734,7 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
   add_foreign_key "user_ips", "users"
   add_foreign_key "user_post_views", "posts"
   add_foreign_key "user_post_views", "users"
-  add_foreign_key "wiki_assets", "users", column: "created_by_user_id"
+  add_foreign_key "user_theme_slots", "users"
-  add_foreign_key "wiki_assets", "wiki_pages"
   add_foreign_key "wiki_pages", "tag_names"
   add_foreign_key "wiki_pages", "users", column: "created_user_id"
   add_foreign_key "wiki_pages", "users", column: "updated_user_id"

frontend/src/App.tsx

@@ -13,8 +13,15 @@ import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import { applyClientAppearance,
+	 fetchUserThemeSlots,
 	 fetchUserSettings,
 	 getClientThemeMode,
+	 getClientActiveThemeSlot,
+	 hasStoredClientThemeSelection,
+	 normaliseThemeSlotSelectionAgainstSlots,
+	 normaliseUserThemeSlots,
+	 setCachedUserThemeSlots,
+	 setClientActiveThemeSlot,
 	 seedClientThemeMode } from '@/lib/settings'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 
@@ -177,8 +184,26 @@ const App: FC = () => {
     void (async () => {
       try
       {
-	const settings = await fetchUserSettings ()
+	const [settings, themeSlots] = await Promise.all ([
+	    fetchUserSettings (),
+	    fetchUserThemeSlots (),
+	])
+	const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
+	const initialSelection = (
+	    hasStoredClientThemeSelection ()
+	    ? getClientActiveThemeSlot ()
+	    : (settings.theme === 'system'
+	       ? 'system'
+	       : `builtin:${ settings.theme }`)
+	)
+	const nextSelection = normaliseThemeSlotSelectionAgainstSlots (
+	    initialSelection,
+	    storedThemeSlots,
+	)
+	setCachedUserThemeSlots (storedThemeSlots)
 	seedClientThemeMode (settings.theme)
+	if (nextSelection !== initialSelection)
+	  setClientActiveThemeSlot (nextSelection)
 	applyClientAppearance ()
       }
       catch

frontend/src/components/PrefetchLink.tsx

@@ -5,6 +5,7 @@ import { createPath, useNavigate } from 'react-router-dom'
 
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 
 import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
@@ -33,6 +34,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
   const navigate = useNavigate ()
   const qc = useQueryClient ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
   const url = useMemo (() => {
     const path = (typeof to === 'string') ? to : createPath (to)
     return (new URL (path, location.origin)).toString ()
@@ -54,11 +57,15 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
   const handleMouseEnter = async (ev: MouseEvent<HTMLAnchorElement>) => {
     onMouseEnter?.(ev)
+    if (ev.defaultPrevented || linkPreloadMode !== 'intent')
+      return
     await doPrefetch ()
   }
 
   const handleTouchStart = async (ev: TouchEvent<HTMLAnchorElement>) => {
     onTouchStart?.(ev)
+    if (ev.defaultPrevented || linkPreloadMode !== 'intent')
+      return
     await doPrefetch ()
   }
 

frontend/src/components/TagDetailSidebar.tsx

@@ -21,6 +21,7 @@ import { toast } from '@/components/ui/use-toast'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { DragEndEvent } from '@dnd-kit/core'
@@ -29,6 +30,9 @@ import type { FC, MutableRefObject, ReactNode } from 'react'
 import type { Category, Post, TagWithSections } from '@/types'
 
 type TagByCategory = { [key in Category]: TagWithSections[] }
+type FlatTagRow = {
+    tag:          TagWithSections
+    parentTagId?: number }
 
 
 const renderTagTree = (
@@ -61,6 +65,33 @@ const renderTagTree = (
 }
 
 
+const flattenTagTree = (
+    tags: TagWithSections[],
+): FlatTagRow[] => {
+  const seen = new Set<number> ()
+  const rows: FlatTagRow[] = []
+
+  const visit = (
+      tag:           TagWithSections,
+      parentTagId?:  number,
+  ) => {
+    if (seen.has (tag.id))
+      return
+
+    seen.add (tag.id)
+    rows.push ({ tag, parentTagId })
+
+    for (const child of tag.children ?? [])
+      visit (child, tag.id)
+  }
+
+  for (const tag of tags)
+    visit (tag)
+
+  return rows.sort ((rowA, rowB) => rowA.tag.name < rowB.tag.name ? -1 : 1)
+}
+
+
 const isDescendant = (
     root:     TagWithSections,
     targetId: number,
@@ -156,6 +187,8 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const tagRelationDisplay = behaviourSettings.tagRelationDisplay ?? 'grouped'
 
   const baseTags = useMemo<TagByCategory> (() => {
     const tagsTmp = { } as TagByCategory
@@ -321,8 +354,27 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		</SubsectionTitle>
 
 		<ul>
-		  {(tags[cat] ?? []).flatMap (tag => (
+		  {(tagRelationDisplay === 'grouped'
-		      renderTagTree (tag, 0, `cat-${ cat }`, suppressClickRef, undefined, sp)))}
+		    ? (tags[cat] ?? []).flatMap (tag =>
+			  renderTagTree (
+			      tag,
+			      0,
+			      `cat-${ cat }`,
+			      suppressClickRef,
+			      undefined,
+			      sp,
+			  ),
+		      )
+		    : flattenTagTree (tags[cat] ?? []).map (row => (
+			<li key={`flat-${ cat }-${ row.tag.id }`} className="mb-1">
+			  <DraggableDroppableTagRow
+			      tag={row.tag}
+			      nestLevel={0}
+			      pathKey={`flat-${ cat }-${ row.tag.id }`}
+			      parentTagId={row.parentTagId}
+			      suppressClickRef={suppressClickRef}
+			      sp={sp}/>
+			</li>)))}
 		  <DropSlot cat={cat}/>
 		</ul>
 	      </div>))}

frontend/src/components/TopNav.tsx

@@ -209,12 +209,11 @@ const TopNav: FC<Props> = ({ user }) => {
   return (
       <>
 	<nav className="px-3 flex justify-between items-center w-full
-			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
+			border-b top-nav-themed">
 	  <div className="flex items-center gap-2 h-12">
 	    <PrefetchLink
 		to="/posts"
-		className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
+		className="mx-4 text-xl font-bold"
-			   dark:text-pink-300 dark:hover:text-pink-100"
 		onClick={() => {
 		  scroll (0, 0)
 		}}>
@@ -224,7 +223,7 @@ const TopNav: FC<Props> = ({ user }) => {
 	    <div ref={navRef} className="relative hidden md:flex h-12 items-center">
 	      <div aria-hidden
 		   className={cn ('absolute inset-y-0 h-12',
-				  'bg-yellow-200 dark:bg-red-950',
+				  'top-nav-themed-active',
 				  highlightTransitionClass)}
 		   style={{ width:      hl.width,
 			    transform:  `translateX(${ hl.left }px)`,
@@ -247,7 +246,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			  itemsRef.current[i] = el
 			}}
 			className={cn ('relative z-10 flex h-full items-center px-5',
-				       (i === openItemIdx) && 'font-bold')}>
+				       (i === openItemIdx) && 'top-nav-themed-active font-bold')}>
 		      {item.name}
 		    </PrefetchLink>
 		  </motion.div>))}
@@ -262,7 +261,7 @@ const TopNav: FC<Props> = ({ user }) => {
 		    measure (-1)
 		  }}
 		  className={cn ('relative z-10 flex h-full items-center px-5',
-				 (openItemIdx < 0 || moreVsbl) && 'font-bold')}>
+				 (openItemIdx < 0 || moreVsbl) && 'top-nav-themed-active font-bold')}>
 		その他 &raquo;
 	      </PrefetchLink>
 	    </div>
@@ -272,9 +271,7 @@ const TopNav: FC<Props> = ({ user }) => {
 
 	  <button
 	     type="button"
-	     className="md:hidden ml-auto border-0 bg-transparent pr-4
+	     className="md:hidden ml-auto border-0 bg-transparent pr-4"
-			text-pink-600 hover:text-pink-400
-			dark:text-pink-300 dark:hover:text-pink-100"
 	     onClick={() => {
 	       setMenuOpen (!(menuOpen))
 	     }}>
@@ -288,7 +285,7 @@ const TopNav: FC<Props> = ({ user }) => {
 	      {...(animationsOff ? { }
 		   : { layout: true })}
 	      className="relative z-20 hidden md:block overflow-hidden
-			 bg-yellow-200 dark:bg-red-950"
+			 top-nav-themed-submenu"
 	      animate={{ height: submenuHeight }}
 	      onMouseLeave={() => {
 		if (moreVsbl)
@@ -429,8 +426,8 @@ const TopNav: FC<Props> = ({ user }) => {
 	 ? (
 	     menuOpen && (
 		 <div
-		     className={cn ('flex flex-col md:hidden',
+		     className={cn ('top-nav-themed top-nav-themed-submenu flex flex-col md:hidden',
-				    'bg-yellow-200 dark:bg-red-975 items-start')}>
+				    'items-start')}>
 		   <Separator/>
 		   {visibleMenu.map ((item, i) => (
 		       <Fragment key={i}>
@@ -438,7 +435,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			     to={i === openItemIdx ? item.to : '#'}
 			     className={cn ('w-full min-h-[40px] flex items-center pl-8',
 					((i === openItemIdx)
-					 && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+					 && 'top-nav-themed-active font-bold'))}
 			     onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
 			       if (i !== openItemIdx)
 				 {
@@ -450,7 +447,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			 </PrefetchLink>
 
 			 {i === openItemIdx && (
-			     <div className="w-full bg-yellow-50 dark:bg-red-950">
+			     <div className="top-nav-themed-submenu w-full">
 			       {item.subMenu
 				.filter (subItem => subItem.visible ?? true)
 				.map ((subItem, j) => (
@@ -478,7 +475,7 @@ const TopNav: FC<Props> = ({ user }) => {
 		       }}
 		       className={cn ('w-full min-h-[40px] flex items-center pl-8',
 				      ((openItemIdx < 0)
-				       && 'font-bold bg-yellow-50 dark:bg-red-950'))}>
+				       && 'top-nav-themed-active font-bold'))}>
 		     その他 &raquo;
 		   </PrefetchLink>
 		   <TopNavUser user={user} sp/>
@@ -489,8 +486,8 @@ const TopNav: FC<Props> = ({ user }) => {
 	       {menuOpen && (
 		   <motion.div
 		       key="spmenu"
-		       className={cn ('flex flex-col md:hidden',
+		       className={cn ('top-nav-themed top-nav-themed-submenu flex flex-col md:hidden',
-				      'bg-yellow-200 dark:bg-red-975 items-start')}
+				      'items-start')}
 		       variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
 					     height:   0 },
 				   open:   { clipPath: 'inset(0 0 0% 0)',
@@ -506,7 +503,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			       to={i === openItemIdx ? item.to : '#'}
 			       className={cn ('w-full min-h-[40px] flex items-center pl-8',
 					  ((i === openItemIdx)
-					   && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+					   && 'top-nav-themed-active font-bold'))}
 			       onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
 				 if (i !== openItemIdx)
 				   {
@@ -521,7 +518,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			     {i === openItemIdx && (
 				 <motion.div
 				     key={`sp-sub-${ i }`}
-				     className="w-full bg-yellow-50 dark:bg-red-950"
+				     className="top-nav-themed-submenu w-full"
 				     variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
 							   height:   0,
 							   opacity:  0 },
@@ -560,7 +557,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			 }}
 			 className={cn ('w-full min-h-[40px] flex items-center pl-8',
 					((openItemIdx < 0)
-					 && 'font-bold bg-yellow-50 dark:bg-red-950'))}>
+					 && 'top-nav-themed-active font-bold'))}>
 		       その他 &raquo;
 		     </PrefetchLink>
 		     <TopNavUser user={user} sp/>

frontend/src/components/users/BehaviourSettingsSection.tsx

@@ -10,6 +10,8 @@ import type { FC, ReactNode } from 'react'
 import type { ClientAnimationMode,
 	      ClientBehaviorSettings,
 	      ClientEmbedAutoLoadMode,
+	      ClientLinkPreloadMode,
+	      ClientTagRelationDisplayMode,
 	      ClientThumbnailMode } from '@/lib/settings'
 
 type Props = {
@@ -39,6 +41,14 @@ const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
     { value: 'manual', label: 'クリック時' },
     { value: 'auto', label: '自動' }]
 
+const linkPreloadOptions: SegmentedOption<ClientLinkPreloadMode>[] = [
+    { value: 'off', label: 'しない' },
+    { value: 'intent', label: 'マウスを置いたら' }]
+
+const tagRelationDisplayOptions: SegmentedOption<ClientTagRelationDisplayMode>[] = [
+    { value: 'flat', label: 'まとめない' },
+    { value: 'grouped', label: 'まとめる' }]
+
 const thumbnailModeOptions: SegmentedOption<ClientThumbnailMode>[] = [
     { value: 'off', label: '非表示' },
     { value: 'light', label: '軽量' },
@@ -63,8 +73,8 @@ const SegmentedControl = <T extends string,> (
 		    'transition-colors focus-visible:outline-none focus-visible:ring-2',
 		    'focus-visible:ring-ring focus-visible:ring-offset-2',
 		    value === option.value
-		    ? 'bg-background text-foreground shadow-sm'
+		    ? 'bg-primary text-primary-foreground shadow-sm ring-1 ring-primary/40'
-		    : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
+		    : 'bg-transparent text-muted-foreground hover:bg-background/70 hover:text-foreground',
 		)}
 		onClick={() => onChange (option.value)}>
 	      {option.label}
@@ -157,6 +167,24 @@ const BehaviourSettingsSection: FC<Props> = ({ sectionClassName }) => {
 		onChange={value => updateDraft ('animation', value)}/>
 	  </SettingBlock>
 
+	  <SettingBlock
+	      title="リンク先の先読み"
+	      description="リンクにマウスを置いた時などに、移動先の情報を先に読みます。通信量や意図しない読込みが気になる場合は「しない」にできます。">
+	    <SegmentedControl
+		value={draftSettings.linkPreload ?? 'intent'}
+		options={linkPreloadOptions}
+		onChange={value => updateDraft ('linkPreload', value)}/>
+	  </SettingBlock>
+
+	  <SettingBlock
+	      title="タグの親子関係表示"
+	      description="親子関係があるタグを、まとまりとして表示します。見た目を単純にしたい場合は「まとめない」にできます。">
+	    <SegmentedControl
+		value={draftSettings.tagRelationDisplay ?? 'grouped'}
+		options={tagRelationDisplayOptions}
+		onChange={value => updateDraft ('tagRelationDisplay', value)}/>
+	  </SettingBlock>
+
 	  <SettingBlock
 	      title="埋め込み自動読込"
 	      description="外部埋め込みを自動で読み込むかを切り替えます。">

frontend/src/index.css

@@ -34,6 +34,15 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --theme-link: 221.2 83.2% 53.3%;
+    --top-nav-background: 48 96% 89%;
+    --top-nav-foreground: 20 14.3% 4.1%;
+    --top-nav-border: 45 93% 77%;
+    --top-nav-link: 334 84% 57%;
+    --top-nav-link-hover: 334 78% 69%;
+    --top-nav-active-background: 48 96% 89%;
+    --top-nav-active-foreground: 20 14.3% 4.1%;
+    --top-nav-submenu-background: 48 100% 96%;
+    --top-nav-submenu-foreground: 20 14.3% 4.1%;
 
     --tag-colour-deerjikist: #9f1239;
     --tag-colour-deerjikist-hover: #b62a51;
@@ -78,6 +87,15 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --top-nav-background: 0 49% 20%;
+    --top-nav-foreground: 345 100% 93%;
+    --top-nav-border: 0 38% 28%;
+    --top-nav-link: 335 82% 80%;
+    --top-nav-link-hover: 341 100% 92%;
+    --top-nav-active-background: 0 38% 28%;
+    --top-nav-active-foreground: 345 100% 93%;
+    --top-nav-submenu-background: 0 49% 20%;
+    --top-nav-submenu-foreground: 345 100% 93%;
   }
 
   body
@@ -197,6 +215,43 @@ body
   color: var(--tag-link-hover-colour) !important;
 }
 
+.top-nav-themed
+{
+  background: hsl(var(--top-nav-background));
+  color: hsl(var(--top-nav-foreground));
+  border-color: hsl(var(--top-nav-border));
+}
+
+.top-nav-themed a,
+.top-nav-themed button
+{
+  color: hsl(var(--top-nav-link));
+}
+
+.top-nav-themed a:hover,
+.top-nav-themed button:hover
+{
+  color: hsl(var(--top-nav-link-hover));
+}
+
+.top-nav-themed-active
+{
+  background: hsl(var(--top-nav-active-background));
+  color: hsl(var(--top-nav-active-foreground));
+}
+
+.top-nav-themed a.top-nav-themed-active,
+.top-nav-themed button.top-nav-themed-active
+{
+  color: hsl(var(--top-nav-active-foreground));
+}
+
+.top-nav-themed-submenu
+{
+  background: hsl(var(--top-nav-submenu-background));
+  color: hsl(var(--top-nav-submenu-foreground));
+}
+
 .tag-marquee__animated
 {
   position: absolute;

frontend/src/lib/settings.ts

@@ -1,5 +1,5 @@
 import { CATEGORIES } from '@/consts'
-import { apiGet, apiPatch } from '@/lib/api'
+import { apiGet, apiPatch, apiPut } from '@/lib/api'
 import { DEFAULT_KEY_BINDINGS, normaliseKeyBinding } from '@/lib/keyboardShortcuts'
 
 import type { Category, FetchPostsOrder, FetchTagsOrder } from '@/types'
@@ -13,6 +13,12 @@ export type UserSettings = {
 
 export type ThemeTagColours = Record<Category, string>
 export type BuiltinThemeId = 'light' | 'dark'
+export type UserThemeSlotNo = 1 | 2 | 3
+export type UserThemeSlotSelection = `user:${ BuiltinThemeId }:${ UserThemeSlotNo }`
+export type ThemeSlotSelection =
+    | 'system'
+    | `builtin:${ BuiltinThemeId }`
+    | UserThemeSlotSelection
 export type ThemeId = BuiltinThemeId | `custom:${ string }`
 export type ActiveThemeId = ThemeId | 'system'
 export type ResolvedTheme = 'light' | 'dark'
@@ -37,8 +43,30 @@ export type ThemeTokens = {
     input:                  string
     ring:                   string
     link:                   string
+    topNavBackground:       string
+    topNavForeground:       string
+    topNavBorder:           string
+    topNavLink:             string
+    topNavLinkHover:        string
+    topNavActiveBackground: string
+    topNavActiveForeground: string
+    topNavSubmenuBackground: string
+    topNavSubmenuForeground: string
     tagColours:             ThemeTagColours
 }
+export type UserThemeSlot = {
+    baseTheme:   BuiltinThemeId
+    slotNo:      UserThemeSlotNo
+    tokens:      ThemeTokens
+    createdAt?:  string
+    updatedAt?:  string }
+export type UserThemeSlotMap =
+    Partial<Record<UserThemeSlotSelection, UserThemeSlot>>
+export type ResolvedThemeSelection = {
+    selection:  ThemeSlotSelection
+    baseTheme:  BuiltinThemeId
+    builtin:    boolean
+    tokens:     ThemeTokens }
 export type ClientTheme = {
     id:         ThemeId
     name:       string
@@ -53,6 +81,8 @@ export type TheatreTagFlow = 'vertical' | 'horizontal'
 export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
 export type ClientAnimationMode = 'normal' | 'reduced' | 'off'
 export type ClientEmbedAutoLoadMode = 'auto' | 'manual' | 'off'
+export type ClientLinkPreloadMode = 'off' | 'intent'
+export type ClientTagRelationDisplayMode = 'flat' | 'grouped'
 export type ClientThumbnailMode = 'normal' | 'light' | 'off'
 export type ClientPaneBreakpoint = 'desktop' | 'tablet'
 export type ClientListKey = 'postList' | 'postSearch' | 'tagList'
@@ -72,6 +102,7 @@ export type ClientKeyboardSettings = {
 }
 
 export type ClientAppearanceSettings = {
+    activeThemeSlot?: ThemeSlotSelection
     activeThemeId?: ActiveThemeId
     customThemes?:  Record<string, CustomClientTheme>
     // Legacy fields kept for migration from the earlier appearance model.
@@ -80,6 +111,8 @@ export type ClientAppearanceSettings = {
 
 export type ClientBehaviorSettings = {
     animation?:        ClientAnimationMode
+    linkPreload?:      ClientLinkPreloadMode
+    tagRelationDisplay?: ClientTagRelationDisplayMode
     embedAutoLoad?:    ClientEmbedAutoLoadMode
     thumbnailMode?:    ClientThumbnailMode
 }
@@ -113,6 +146,15 @@ export type ClientSettings = {
 
 export const CLIENT_SETTINGS_STORAGE_KEY = 'btrc_hub.client_settings'
 export const CLIENT_SETTINGS_EVENT = 'btrc-hub:client-settings-change'
+export const USER_THEME_SLOT_NOS: UserThemeSlotNo[] = [1, 2, 3]
+export const USER_THEME_SLOT_SELECTIONS: UserThemeSlotSelection[] = [
+    'user:light:1',
+    'user:light:2',
+    'user:light:3',
+    'user:dark:1',
+    'user:dark:2',
+    'user:dark:3',
+]
 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 = [
@@ -182,6 +224,15 @@ export const LIGHT_THEME_TOKENS: ThemeTokens = {
     input:                 '214.3 31.8% 91.4%',
     ring:                  '222.2 84% 4.9%',
     link:                  '221.2 83.2% 53.3%',
+    topNavBackground:      '48 96% 89%',
+    topNavForeground:      '20 14.3% 4.1%',
+    topNavBorder:          '45 93% 77%',
+    topNavLink:            '334 84% 57%',
+    topNavLinkHover:       '334 78% 69%',
+    topNavActiveBackground: '48 96% 89%',
+    topNavActiveForeground: '20 14.3% 4.1%',
+    topNavSubmenuBackground: '48 100% 96%',
+    topNavSubmenuForeground: '20 14.3% 4.1%',
     tagColours:            DEFAULT_LIGHT_THEME_TAG_COLOURS,
 }
 export const DARK_THEME_TOKENS: ThemeTokens = {
@@ -205,6 +256,15 @@ export const DARK_THEME_TOKENS: ThemeTokens = {
     input:                 '217.2 32.6% 17.5%',
     ring:                  '212.7 26.8% 83.9%',
     link:                  '213.1 93.9% 67.8%',
+    topNavBackground:      '0 49% 20%',
+    topNavForeground:      '345 100% 93%',
+    topNavBorder:          '0 38% 28%',
+    topNavLink:            '335 82% 80%',
+    topNavLinkHover:       '341 100% 92%',
+    topNavActiveBackground: '0 38% 28%',
+    topNavActiveForeground: '345 100% 93%',
+    topNavSubmenuBackground: '0 49% 20%',
+    topNavSubmenuForeground: '345 100% 93%',
     tagColours:            DEFAULT_DARK_THEME_TAG_COLOURS,
 }
 export const BUILTIN_THEMES: Record<BuiltinThemeId, ClientTheme> = {
@@ -336,6 +396,18 @@ const normaliseEmbedAutoLoadMode = (value: unknown): ClientEmbedAutoLoadMode | n
     value === 'auto' || value === 'manual' || value === 'off' ? value : null
 
 
+const normaliseLinkPreloadMode = (
+    value: unknown,
+): ClientLinkPreloadMode | null =>
+    value === 'off' || value === 'intent' ? value : null
+
+
+const normaliseTagRelationDisplayMode = (
+    value: unknown,
+): ClientTagRelationDisplayMode | null =>
+    value === 'flat' || value === 'grouped' ? value : null
+
+
 const normaliseThumbnailMode = (value: unknown): ClientThumbnailMode | null =>
     value === 'normal' || value === 'light' || value === 'off' ? value : null
 
@@ -418,6 +490,35 @@ export const setClientAnimationMode = (
 	animation,
     })
 
+
+export const getClientLinkPreloadMode = (): ClientLinkPreloadMode =>
+    normaliseLinkPreloadMode (loadClientSettings ().behavior?.linkPreload)
+    ?? 'intent'
+
+
+export const setClientLinkPreloadMode = (
+    linkPreload: ClientLinkPreloadMode,
+): ClientBehaviorSettings =>
+    setClientBehaviorSettings ({
+	...getClientBehaviorSettings (),
+	linkPreload,
+    })
+
+
+export const getClientTagRelationDisplayMode = (): ClientTagRelationDisplayMode =>
+    normaliseTagRelationDisplayMode (loadClientSettings ().behavior?.tagRelationDisplay)
+    ?? 'grouped'
+
+
+export const setClientTagRelationDisplayMode = (
+    tagRelationDisplay: ClientTagRelationDisplayMode,
+): ClientBehaviorSettings =>
+    setClientBehaviorSettings ({
+	...getClientBehaviorSettings (),
+	tagRelationDisplay,
+    })
+
+
 export const getClientEmbedAutoLoadMode = (): ClientEmbedAutoLoadMode =>
     loadClientSettings ().behavior?.embedAutoLoad
     ?? legacyEmbedAutoLoadMode ()
@@ -450,6 +551,8 @@ export const setClientThumbnailMode = (
 
 export const getClientBehaviorSettings = (): ClientBehaviorSettings => ({
     animation:        getClientAnimationMode (),
+    linkPreload:      getClientLinkPreloadMode (),
+    tagRelationDisplay: getClientTagRelationDisplayMode (),
     embedAutoLoad:    getClientEmbedAutoLoadMode (),
     thumbnailMode:    getClientThumbnailMode (),
 })
@@ -463,6 +566,14 @@ export const setClientBehaviorSettings = (
 	  normaliseAnimationMode (behavior.animation)
 	  ?? getClientAnimationMode ()
       ),
+      linkPreload: (
+	  normaliseLinkPreloadMode (behavior.linkPreload)
+	  ?? getClientLinkPreloadMode ()
+      ),
+      tagRelationDisplay: (
+	  normaliseTagRelationDisplayMode (behavior.tagRelationDisplay)
+	  ?? getClientTagRelationDisplayMode ()
+      ),
       embedAutoLoad: (
 	  normaliseEmbedAutoLoadMode (behavior.embedAutoLoad)
 	  ?? getClientEmbedAutoLoadMode ()
@@ -575,11 +686,14 @@ const themeCopyName = (baseTheme: BuiltinThemeId): string =>
 const appearanceFromSettings = (): ClientAppearanceSettings =>
     loadClientSettings ().appearance ?? { }
 
+let cachedUserThemeSlots: UserThemeSlotMap = { }
+
 
 export const hasStoredClientThemeSelection = (): boolean => {
   const appearance = appearanceFromSettings ()
   return (
-      appearance.activeThemeId != null
+      appearance.activeThemeSlot != null
+      || appearance.activeThemeId != null
       || appearance.customThemes != null
       || appearance.theme != null
       || appearance.tagColours != null
@@ -608,37 +722,66 @@ const mixHexColour = (
 }
 
 
-export const getClientThemeMode = (): UserSettings['theme'] =>
+const legacyThemeSlotSelection = (): ThemeSlotSelection => {
-    (() => {
   const appearance = appearanceFromSettings ()
   const customThemes = getClientCustomThemes ()
 
   if (appearance.activeThemeId === 'system')
     return 'system'
-      if (appearance.activeThemeId === 'light' || appearance.activeThemeId === 'dark')
+  if (appearance.activeThemeId === 'light')
-	return appearance.activeThemeId
+    return 'builtin:light'
+  if (appearance.activeThemeId === 'dark')
+    return 'builtin:dark'
   if (
       typeof appearance.activeThemeId === 'string'
       && customThemes[appearance.activeThemeId] != null
   )
-	return customThemes[appearance.activeThemeId].baseTheme
+    return `builtin:${ customThemes[appearance.activeThemeId].baseTheme }`
-
+  if (appearance.theme === 'light')
-      return appearance.theme ?? DEFAULT_USER_SETTINGS.theme
+    return 'builtin:light'
-    }) ()
+  if (appearance.theme === 'dark')
+    return 'builtin:dark'
+  return 'system'
+}
 
 
-export const setClientThemeMode = (theme: UserSettings['theme']): void => {
+export const getClientActiveThemeSlot = (): ThemeSlotSelection =>
+    normaliseThemeSlotSelection (appearanceFromSettings ().activeThemeSlot)
+    ?? legacyThemeSlotSelection ()
+
+
+export const setClientActiveThemeSlot = (
+    activeThemeSlot: ThemeSlotSelection,
+): void => {
   updateClientSettings (settings => ({
       ...settings,
       appearance: {
 	  ...(settings.appearance ?? { }),
-	  activeThemeId: theme,
+	  activeThemeSlot,
-	  theme,
       },
   }))
 }
 
 
+export const getClientThemeMode = (): UserSettings['theme'] => {
+  const selection = getClientActiveThemeSlot ()
+
+  if (selection === 'system')
+    return 'system'
+
+  return baseThemeOfSelection (selection) ?? DEFAULT_USER_SETTINGS.theme
+}
+
+
+export const setClientThemeMode = (theme: UserSettings['theme']): void => {
+  setClientActiveThemeSlot (
+      theme === 'system'
+      ? 'system'
+      : `builtin:${ theme }`,
+  )
+}
+
+
 export const seedClientThemeMode = (theme: UserSettings['theme']): void => {
   if (hasStoredClientThemeSelection ())
     return
@@ -684,6 +827,207 @@ const normaliseThemeTagColours = (
     )
 
 
+const normaliseThemeTokenValue = (
+    value:     unknown,
+    fallback:  string,
+): string =>
+    typeof value === 'string' && value !== '' ? value : fallback
+
+
+const normaliseThemeTokens = (
+    rawTokens:   unknown,
+    baseTheme:   BuiltinThemeId,
+): ThemeTokens => {
+  const fallback = baseTheme === 'dark' ? DARK_THEME_TOKENS : LIGHT_THEME_TOKENS
+  const tokens =
+      rawTokens && typeof rawTokens === 'object'
+      ? rawTokens as Partial<ThemeTokens>
+      : { }
+
+  return {
+      background: normaliseThemeTokenValue (tokens.background, fallback.background),
+      foreground: normaliseThemeTokenValue (tokens.foreground, fallback.foreground),
+      card: normaliseThemeTokenValue (tokens.card, fallback.card),
+      cardForeground: normaliseThemeTokenValue (
+	  tokens.cardForeground,
+	  fallback.cardForeground,
+      ),
+      popover: normaliseThemeTokenValue (tokens.popover, fallback.popover),
+      popoverForeground: normaliseThemeTokenValue (
+	  tokens.popoverForeground,
+	  fallback.popoverForeground,
+      ),
+      primary: normaliseThemeTokenValue (tokens.primary, fallback.primary),
+      primaryForeground: normaliseThemeTokenValue (
+	  tokens.primaryForeground,
+	  fallback.primaryForeground,
+      ),
+      secondary: normaliseThemeTokenValue (tokens.secondary, fallback.secondary),
+      secondaryForeground: normaliseThemeTokenValue (
+	  tokens.secondaryForeground,
+	  fallback.secondaryForeground,
+      ),
+      muted: normaliseThemeTokenValue (tokens.muted, fallback.muted),
+      mutedForeground: normaliseThemeTokenValue (
+	  tokens.mutedForeground,
+	  fallback.mutedForeground,
+      ),
+      accent: normaliseThemeTokenValue (tokens.accent, fallback.accent),
+      accentForeground: normaliseThemeTokenValue (
+	  tokens.accentForeground,
+	  fallback.accentForeground,
+      ),
+      destructive: normaliseThemeTokenValue (
+	  tokens.destructive,
+	  fallback.destructive,
+      ),
+      destructiveForeground: normaliseThemeTokenValue (
+	  tokens.destructiveForeground,
+	  fallback.destructiveForeground,
+      ),
+      border: normaliseThemeTokenValue (tokens.border, fallback.border),
+      input: normaliseThemeTokenValue (tokens.input, fallback.input),
+      ring: normaliseThemeTokenValue (tokens.ring, fallback.ring),
+      link: normaliseThemeTokenValue (tokens.link, fallback.link),
+      topNavBackground: normaliseThemeTokenValue (
+	  tokens.topNavBackground,
+	  fallback.topNavBackground,
+      ),
+      topNavForeground: normaliseThemeTokenValue (
+	  tokens.topNavForeground,
+	  fallback.topNavForeground,
+      ),
+      topNavBorder: normaliseThemeTokenValue (
+	  tokens.topNavBorder,
+	  fallback.topNavBorder,
+      ),
+      topNavLink: normaliseThemeTokenValue (
+	  tokens.topNavLink,
+	  fallback.topNavLink,
+      ),
+      topNavLinkHover: normaliseThemeTokenValue (
+	  tokens.topNavLinkHover,
+	  fallback.topNavLinkHover,
+      ),
+      topNavActiveBackground: normaliseThemeTokenValue (
+	  tokens.topNavActiveBackground,
+	  fallback.topNavActiveBackground,
+      ),
+      topNavActiveForeground: normaliseThemeTokenValue (
+	  tokens.topNavActiveForeground,
+	  fallback.topNavActiveForeground,
+      ),
+      topNavSubmenuBackground: normaliseThemeTokenValue (
+	  tokens.topNavSubmenuBackground,
+	  fallback.topNavSubmenuBackground,
+      ),
+      topNavSubmenuForeground: normaliseThemeTokenValue (
+	  tokens.topNavSubmenuForeground,
+	  fallback.topNavSubmenuForeground,
+      ),
+      tagColours: normaliseThemeTagColours (tokens.tagColours, fallback.tagColours),
+  }
+}
+
+
+export const getUserThemeSlotSelection = (
+    baseTheme:  BuiltinThemeId,
+    slotNo:     UserThemeSlotNo,
+): UserThemeSlotSelection => `user:${ baseTheme }:${ slotNo }`
+
+
+const isBuiltinThemeSlotSelection = (
+    value: string,
+): value is `builtin:${ BuiltinThemeId }` =>
+    value === 'builtin:light' || value === 'builtin:dark'
+
+
+export const isUserThemeSlotSelection = (
+    value: unknown,
+): value is UserThemeSlotSelection =>
+    typeof value === 'string' && USER_THEME_SLOT_SELECTIONS.includes (value as UserThemeSlotSelection)
+
+
+const normaliseThemeSlotSelection = (
+    value: unknown,
+): ThemeSlotSelection | null => {
+  if (value === 'system')
+    return 'system'
+  if (typeof value === 'string' && isBuiltinThemeSlotSelection (value))
+    return value
+  if (isUserThemeSlotSelection (value))
+    return value
+  return null
+}
+
+
+const baseThemeOfSelection = (
+    selection: ThemeSlotSelection,
+): BuiltinThemeId | null => {
+  if (selection === 'system')
+    return null
+  if (isBuiltinThemeSlotSelection (selection))
+    return selection.slice ('builtin:'.length) as BuiltinThemeId
+
+  return selection.split (':')[1] as BuiltinThemeId
+}
+
+
+const slotNoOfSelection = (
+    selection: UserThemeSlotSelection,
+): UserThemeSlotNo => Number (selection.split (':')[2]) as UserThemeSlotNo
+
+
+export const getDefaultUserThemeSlot = (
+    baseTheme:  BuiltinThemeId,
+    slotNo:     UserThemeSlotNo,
+): UserThemeSlot => ({
+    baseTheme,
+    slotNo,
+    tokens: normaliseThemeTokens ({ }, baseTheme),
+})
+
+
+const normaliseUserThemeSlot = (
+    rawSlot: unknown,
+): UserThemeSlot | null => {
+  if (!(rawSlot) || typeof rawSlot !== 'object')
+    return null
+
+  const slot = rawSlot as Partial<UserThemeSlot>
+  const baseTheme = slot.baseTheme
+  const slotNo = slot.slotNo
+
+  if (
+      baseTheme == null
+      || !(isBuiltinThemeId (baseTheme))
+      || slotNo == null
+      || !(USER_THEME_SLOT_NOS.includes (slotNo as UserThemeSlotNo))
+  )
+    return null
+
+  return {
+      baseTheme,
+      slotNo: slotNo as UserThemeSlotNo,
+      tokens: normaliseThemeTokens (slot.tokens, baseTheme),
+      createdAt: typeof slot.createdAt === 'string' ? slot.createdAt : undefined,
+      updatedAt: typeof slot.updatedAt === 'string' ? slot.updatedAt : undefined,
+  }
+}
+
+
+export const normaliseUserThemeSlots = (
+    slots: UserThemeSlot[],
+): UserThemeSlotMap =>
+    slots.reduce<UserThemeSlotMap> (
+	(map, slot) => {
+	  map[getUserThemeSlotSelection (slot.baseTheme, slot.slotNo)] = slot
+	  return map
+	},
+	{ },
+    )
+
+
 const normaliseCustomTheme = (
     rawTheme:    unknown,
 ): CustomClientTheme | null => {
@@ -708,26 +1052,21 @@ const normaliseCustomTheme = (
       name,
       builtin: false,
       baseTheme,
-      tokens: {
+      tokens: normaliseThemeTokens (
-	  ...(
+	  {
-	      baseTheme === 'dark'
-	      ? DARK_THEME_TOKENS
-	      : LIGHT_THEME_TOKENS
-	  ),
 	      ...(theme.tokens && typeof theme.tokens === 'object'
 		  ? theme.tokens as Partial<ThemeTokens>
 		  : { }),
-	  tagColours: normaliseThemeTagColours (
+	      tagColours: (
-	      (
 		  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),
-	  ),
 	  },
+	  baseTheme,
+      ),
   }
 }
 
@@ -772,6 +1111,60 @@ export const getClientCustomThemes = (): Record<string, CustomClientTheme> => {
 }
 
 
+export const fetchUserThemeSlots = async (): Promise<UserThemeSlot[]> => {
+  const raw = await apiGet<Array<{
+      baseTheme: BuiltinThemeId
+      slotNo: UserThemeSlotNo
+      tokens: ThemeTokens
+      createdAt: string
+      updatedAt: string
+  }>> ('/users/theme_slots')
+
+  return raw
+      .map (slot => normaliseUserThemeSlot (slot))
+      .filter ((slot): slot is UserThemeSlot => slot != null)
+}
+
+
+export const upsertUserThemeSlot = async (
+    baseTheme:  BuiltinThemeId,
+    slotNo:     UserThemeSlotNo,
+    tokens:     ThemeTokens,
+): Promise<UserThemeSlot> => {
+  const raw = await apiPut<{
+      baseTheme: BuiltinThemeId
+      slotNo: UserThemeSlotNo
+      tokens: ThemeTokens
+      createdAt: string
+      updatedAt: string
+  }> (`/users/theme_slots/${ baseTheme }/${ slotNo }`, { tokens })
+  const slot = normaliseUserThemeSlot (raw)
+
+  if (slot == null)
+    throw new Error ('theme slot response is invalid')
+
+  return slot
+}
+
+
+export const setCachedUserThemeSlots = (themeSlots: UserThemeSlotMap): void => {
+  cachedUserThemeSlots = themeSlots
+}
+
+
+export const getCachedUserThemeSlots = (): UserThemeSlotMap =>
+    cachedUserThemeSlots
+
+
+export const normaliseThemeSlotSelectionAgainstSlots = (
+    selection:   ThemeSlotSelection,
+    themeSlots:  UserThemeSlotMap,
+): ThemeSlotSelection =>
+    isUserThemeSlotSelection (selection) && themeSlots[selection] == null
+    ? 'system'
+    : selection
+
+
 export const getClientActiveThemeId = (): ActiveThemeId => {
   const appearance = appearanceFromSettings ()
   const customThemes = getClientCustomThemes ()
@@ -833,6 +1226,51 @@ export const deriveUserThemeModeFromSelection = (
 }
 
 
+export const resolveThemeFromSlotSelection = (
+    selection:   ThemeSlotSelection,
+    themeSlots:  UserThemeSlotMap = getCachedUserThemeSlots (),
+): ResolvedThemeSelection => {
+  if (selection === 'system')
+    {
+      const baseTheme = resolveThemeMode ('system')
+      return {
+	  selection,
+	  baseTheme,
+	  builtin: true,
+	  tokens: BUILTIN_THEMES[baseTheme].tokens,
+      }
+    }
+
+  if (isBuiltinThemeSlotSelection (selection))
+    {
+      const baseTheme = selection.slice ('builtin:'.length) as BuiltinThemeId
+      return {
+	  selection,
+	  baseTheme,
+	  builtin: true,
+	  tokens: BUILTIN_THEMES[baseTheme].tokens,
+      }
+    }
+
+  const baseTheme = baseThemeOfSelection (selection) ?? 'light'
+  return {
+      selection,
+      baseTheme,
+      builtin: false,
+      tokens: themeSlots[selection]?.tokens
+	  ?? getDefaultUserThemeSlot (baseTheme, slotNoOfSelection (selection)).tokens,
+  }
+}
+
+
+export const deriveUserThemeModeFromSlotSelection = (
+    selection: ThemeSlotSelection,
+): UserSettings['theme'] =>
+    selection === 'system'
+    ? 'system'
+    : (baseThemeOfSelection (selection) ?? DEFAULT_USER_SETTINGS.theme)
+
+
 export const createCustomThemeFromBase = (
     baseTheme:   BuiltinThemeId,
     tokens?:     ThemeTokens,
@@ -947,23 +1385,40 @@ export const applyThemeTokens = (tokens: ThemeTokens): void => {
   root.style.setProperty ('--input', tokens.input)
   root.style.setProperty ('--ring', tokens.ring)
   root.style.setProperty ('--theme-link', tokens.link)
+  root.style.setProperty ('--top-nav-background', tokens.topNavBackground)
+  root.style.setProperty ('--top-nav-foreground', tokens.topNavForeground)
+  root.style.setProperty ('--top-nav-border', tokens.topNavBorder)
+  root.style.setProperty ('--top-nav-link', tokens.topNavLink)
+  root.style.setProperty ('--top-nav-link-hover', tokens.topNavLinkHover)
+  root.style.setProperty ('--top-nav-active-background', tokens.topNavActiveBackground)
+  root.style.setProperty ('--top-nav-active-foreground', tokens.topNavActiveForeground)
+  root.style.setProperty (
+      '--top-nav-submenu-background',
+      tokens.topNavSubmenuBackground,
+  )
+  root.style.setProperty (
+      '--top-nav-submenu-foreground',
+      tokens.topNavSubmenuForeground,
+  )
 
   applyThemeTagColours (tokens.tagColours)
 }
 
 
 export const applyThemeSelection = (
-    activeThemeId: ActiveThemeId,
+    activeThemeSlot: ThemeSlotSelection,
-    customThemes:  Record<string, CustomClientTheme>,
+    themeSlots:      UserThemeSlotMap = getCachedUserThemeSlots (),
 ): void => {
-  const theme = getResolvedThemeFromSelection (activeThemeId, customThemes)
+  const theme = resolveThemeFromSlotSelection (activeThemeSlot, themeSlots)
   applyThemeMode (theme.baseTheme)
   applyThemeTokens (theme.tokens)
 }
 
 
-export const applyClientAppearance = (): void => {
+export const applyClientAppearance = (
-  applyThemeSelection (getClientActiveThemeId (), getClientCustomThemes ())
+    themeSlots: UserThemeSlotMap = getCachedUserThemeSlots (),
+): void => {
+  applyThemeSelection (getClientActiveThemeSlot (), themeSlots)
 }