From 17d7bc17814d0c718f40ab6887d5b164f6da591e Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 22 Jun 2026 02:43:35 +0800
Subject: [PATCH] refactor(assets): SCSS variables with hugo:vars and module
 setup standardization (#788)

* feat(assets): refactor SCSS variables with Hugo config via hugo:vars

Use Hugo's hugo:vars mechanism (v0.161.0+) to configure SCSS variables
via [params.appearance] in hugo.toml, replacing the override.scss file.

- Add [params.appearance] config section in hugo.toml
- Create scss-vars.html partial for SCSS default values
- Pass vars to toCSS via head/index.html
- Rewrite _variables.scss to use @use "hugo:vars" as h with !default
- Update all 20 consumer files from @use "override" to @use "variables"
- Delete override.scss
- Add admonition mixin in core/mixins/_admonition.scss
- Update deprecation detection to use fileExists

* refactor(assets): standardize module setup() and simplify main.ts init

- Add setup() method to all modules (menu, theme, search, enc, misc, events)
- Rename initMenu to setup, initMenuDesktop/initMenuMobile to initDesktop/initMobile
- Rename initSearch, initFixItDecryptor to setup
- Standardize setup() position at end of each module class and interface
- Simplify main.ts init sequence to uniform setup() calls

* refactor(assets): replace config.template.scss with hugo:vars/internal

- Delete config.template.scss and its ExecuteAsTemplate pipeline
- Pass internal config (base URL, logo, loading) via hugo:vars/internal namespace
- Move CSS custom properties to _root.scss using set-fi-vars mixin
- Simplify _variables.scss by removing config namespace dependency
- Update CLAUDE.md to reflect new SCSS architecture

* style(i18n): fix spacing in Korean translation strings

* fix(assets): resolve dead SCSS config keys and deduplicate defaults

- Wire up 5 config keys with v.$ references: menu-active-color,
  tag-cloud-start, tag-cloud-end, tag-cloud-end-dark,
  pagination-link-color-dark (were reading from SCSS vars, ignoring
  hugo:vars overrides)
- Remove dead !default flags from all v.$ references (hugo:vars
  always provides values, making !default unreachable)
- Compute derived defaults in scss-vars.html from base values instead
  of hardcoding duplicates
- Extract admonition mixin set-fi-vars map to shared $vars variable
---
 CLAUDE.md                                     |   2 +-
 assets/js/core/tokens.ts                      |  11 +-
 assets/js/main.ts                             |  31 ++--
 assets/js/modules/content.ts                  |   5 +-
 assets/js/modules/encryption.ts               |   2 +-
 assets/js/modules/events.ts                   |   8 +
 assets/js/modules/menu.ts                     |  20 +--
 assets/js/modules/misc.ts                     |  10 ++
 assets/js/modules/search/index.ts             |  40 ++---
 assets/js/modules/theme.ts                    |   6 +
 assets/scss/_variables.scss                   | 157 +++++++++---------
 assets/scss/config.template.scss              |  14 --
 assets/scss/core/_root.scss                   |  15 +-
 assets/scss/core/functions/_var.scss          |   2 +-
 assets/scss/core/layouts/_header.scss         |   2 +-
 assets/scss/core/layouts/_wrapper.scss        |   2 +-
 assets/scss/core/mixins/_admonition.scss      |  32 ++++
 assets/scss/core/mixins/_index.scss           |   1 +
 assets/scss/core/mixins/_link.scss            |   2 +-
 assets/scss/core/mixins/_theme-switch.scss    |   2 +-
 assets/scss/core/mixins/_theme-vars.scss      |   2 +-
 assets/scss/override.scss                     |  12 --
 assets/scss/pages/_patch.scss                 |   2 +-
 assets/scss/pages/archives/_tags.scss         |   2 +-
 assets/scss/pages/single/_base.scss           |   2 +-
 assets/scss/pages/single/_code.scss           |   2 +-
 assets/scss/pages/single/_collections.scss    |   2 +-
 .../scss/pages/single/_fixit-decryptor.scss   |   2 +-
 assets/scss/pages/single/_reward.scss         |   2 +-
 assets/scss/pages/single/_toc.scss            |   2 +-
 .../scss/pages/single/code-syntax/_dark.scss  |   2 +-
 .../scss/pages/single/code-syntax/_light.scss |   2 +-
 .../pages/single/shortcodes/_admonition.scss  |  22 +--
 .../scss/pages/single/shortcodes/_tabs.scss   |   2 +-
 .../pages/single/shortcodes/_timeline.scss    |   2 +-
 hugo.toml                                     |  13 ++
 i18n/ko.toml                                  |   4 +-
 layouts/_partials/base/head/index.html        |  22 ++-
 layouts/_partials/function/scss-vars.html     |  89 ++++++++++
 .../_partials/init/detection-deprecated.html  |  18 +-
 40 files changed, 357 insertions(+), 213 deletions(-)
 delete mode 100644 assets/scss/config.template.scss
 create mode 100644 assets/scss/core/mixins/_admonition.scss
 delete mode 100644 assets/scss/override.scss
 create mode 100644 layouts/_partials/function/scss-vars.html

diff --git a/CLAUDE.md b/CLAUDE.md
index 0ffa1ee5..7ceb318c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -90,7 +90,7 @@ Cross-module communication uses the shared `eventBus` singleton, not direct modu
 
 Hugo Pipes processes all assets. The key orchestration is in `_partials/base/assets.html`:
 
-- **CSS**: `scss/config.template.scss` generates runtime CSS custom properties from Hugo config. `scss/main.scss` is the entry point importing `core/`, `pages/`, `widgets/`, `custom`.
+- **CSS**: `scss/main.scss` is the entry point importing `core/`, `pages/`, `widgets/`, `custom`. SCSS variables are configured via `hugo:vars` (user-configurable from `[params.appearance]`) and `hugo:vars/internal` (theme system config).
 - **JS**: `_partials/function/js-build.html` wraps `js.Build` with minify-in-production defaults. Hugo's `@params` injection passes config values into TypeScript at build time.
 - **Third-party libraries**: Stored in `assets/lib/` (vendored, not npm-managed). Tracked by `librarybot.yml` and updated weekly by the `hugo-fixit/librarybot` GitHub Action. Can be overridden via CDN config in `assets/data/cdn/jsdelivr.yml` or `unpkg.yml`.
 
diff --git a/assets/js/core/tokens.ts b/assets/js/core/tokens.ts
index 3e024570..ac604861 100644
--- a/assets/js/core/tokens.ts
+++ b/assets/js/core/tokens.ts
@@ -21,16 +21,19 @@ export interface ThemeService {
   setThemeMode: (mode: string, persist?: boolean) => void
   initThemeColor: () => void
   initSwitchTheme: () => void
+  setup: () => void
 }
 
 // ─── MenuService ───
 export interface MenuService {
-  initMenu: () => void
+  initDesktop: () => void
+  initMobile: () => void
+  setup: () => void
 }
 
 // ─── SearchService ───
 export interface SearchService {
-  initSearch: () => void
+  setup: () => void
 }
 
 // ─── CodeService ───
@@ -50,7 +53,7 @@ export interface TocService {
 
 // ─── EncryptionService ───
 export interface EncryptionService {
-  initFixItDecryptor: () => void
+  setup: () => void
 }
 
 // ─── ContentService ───
@@ -69,6 +72,7 @@ export interface MiscService {
   initReward: () => void
   initPostChatUser: () => void
   initComment: () => void
+  setup: () => void
 }
 
 // ─── EventsService ───
@@ -77,6 +81,7 @@ export interface EventsService {
   onResize: () => void
   onClickMask: () => void
   initPrint: () => void
+  setup: () => void
 }
 
 // ─── FixItPublicAPI ───
diff --git a/assets/js/main.ts b/assets/js/main.ts
index 570de1e1..08f2e72a 100644
--- a/assets/js/main.ts
+++ b/assets/js/main.ts
@@ -12,27 +12,24 @@ function bootstrap(): void {
   // Build window.fixit facade with all modules
   window.fixit = new PublicAPI()
 
+  /**
+   * Initialize all modules in dependency order.
+   *
+   * 1. UI framework — menu (mask overlay), theme (color scheme)
+   * 2. Interactive components — toc (sidebar), search (overlay)
+   * 3. Content enhancement — content (details, tooltips), enc (decryption)
+   * 4. Global features — misc (PWA, comments), events (scroll, resize)
+   */
   function init() {
     try {
+      window.fixit.menu.setup()
+      window.fixit.theme.setup()
       window.fixit.toc.setup()
+      window.fixit.search.setup()
       window.fixit.content.setup()
-      window.fixit.enc.initFixItDecryptor()
-      window.fixit.theme.initThemeColor()
-      window.fixit.content.initSVGIcon()
-      window.fixit.menu.initMenu()
-      window.fixit.theme.initSwitchTheme()
-      window.fixit.search.initSearch()
-      window.fixit.misc.initSiteTime()
-      window.fixit.misc.initServiceWorker()
-      window.fixit.misc.initAutoMark()
-      window.fixit.misc.initReward()
-      window.fixit.misc.initPostChatUser()
-      window.fixit.misc.initComment()
-      window.fixit.content.initContent()
-      window.fixit.events.onScroll()
-      window.fixit.events.onResize()
-      window.fixit.events.onClickMask()
-      window.fixit.events.initPrint()
+      window.fixit.enc.setup()
+      window.fixit.misc.setup()
+      window.fixit.events.setup()
     }
     catch (err) {
       console.error(err)
diff --git a/assets/js/modules/content.ts b/assets/js/modules/content.ts
index 5172bce1..674f7fe3 100644
--- a/assets/js/modules/content.ts
+++ b/assets/js/modules/content.ts
@@ -9,7 +9,7 @@ const copyText = createCopyText()
  * Content module — details toggle, tooltips, footnotes, SVG icons, and link guard.
  *
  * Responsibilities:
- * - Attach toggle behaviour to `<details>` elements.
+ * - Attach toggle behaviour to `.details` elements.
  * - Initialize CellTooltip on action buttons, copy buttons, and footnotes.
  * - Fetch and inline SVG icons from `data-svg-src` attributes.
  * - Set up link guard dialog for external link confirmation.
@@ -111,7 +111,7 @@ export class ContentModule implements ContentService {
   }
 
   /**
-   * Attach toggle behaviour to `<details>` elements.
+   * Attach toggle behaviour to `.details` elements.
    * @param target - The root element to search within.
    */
   initDetails(target: Element | Document = document) {
@@ -185,6 +185,7 @@ export class ContentModule implements ContentService {
 
   setup() {
     this.initContent()
+    this.initSVGIcon()
     eventBus.on('fixit:decrypted', () => {
       this.initContent()
     })
diff --git a/assets/js/modules/encryption.ts b/assets/js/modules/encryption.ts
index 12ecd54c..b7dc7486 100644
--- a/assets/js/modules/encryption.ts
+++ b/assets/js/modules/encryption.ts
@@ -25,7 +25,7 @@ export class EncryptionModule implements EncryptionService {
   }
 
   /** Initialize the FixItDecryptor and wire up decryption/re-encryption events. */
-  initFixItDecryptor() {
+  setup() {
     if (!this.core.config.encryption)
       return
     const decryptor = new window.FixItDecryptor()
diff --git a/assets/js/modules/events.ts b/assets/js/modules/events.ts
index bfb9a306..984edb92 100644
--- a/assets/js/modules/events.ts
+++ b/assets/js/modules/events.ts
@@ -165,4 +165,12 @@ export class EventsModule implements EventsService {
       this.code.initCodeTabs()
     }, false)
   }
+
+  /** Initialize all event listeners. */
+  setup() {
+    this.onScroll()
+    this.onResize()
+    this.onClickMask()
+    this.initPrint()
+  }
 }
diff --git a/assets/js/modules/menu.ts b/assets/js/modules/menu.ts
index df5f7d88..64a447ba 100644
--- a/assets/js/modules/menu.ts
+++ b/assets/js/modules/menu.ts
@@ -4,28 +4,22 @@ import type { CoreService, MenuService } from '../core/tokens'
  * Menu module — desktop dropdown and mobile drawer navigation.
  *
  * Responsibilities:
- * - Initialize desktop header dropdown menu interactions.
- * - Initialize mobile header drawer menu open/close/toggle.
+ * - Desktop header dropdown menu interactions.
+ * - Mobile header drawer menu open/close/toggle.
  * - Sync menu state with mask overlay.
  */
 export class MenuModule implements MenuService {
   constructor(private readonly core: CoreService) {}
 
-  /** Initialize both desktop and mobile menus. */
-  initMenu() {
-    this.initMenuDesktop()
-    this.initMenuMobile()
-  }
-
   /** Set min-width on desktop sub-menus to match parent item width. */
-  initMenuDesktop() {
+  initDesktop() {
     document.querySelectorAll<HTMLElement>('.has-children').forEach(($item) => {
       $item.querySelector<HTMLElement>('.sub-menu')!.style.minWidth = `${$item.offsetWidth - 8}px`
     })
   }
 
   /** Initialize mobile drawer menu with mask overlay and nested toggles. */
-  initMenuMobile() {
+  initMobile() {
     const $menuToggleMobile = document.getElementById('menu-toggle-mobile')
     const $menuMobile = document.getElementById('menu-mobile')
     if (!$menuToggleMobile || !$menuMobile)
@@ -54,4 +48,10 @@ export class MenuModule implements MenuService {
       })
     })
   }
+
+  /** Initialize both desktop and mobile menus. */
+  setup() {
+    this.initDesktop()
+    this.initMobile()
+  }
 }
diff --git a/assets/js/modules/misc.ts b/assets/js/modules/misc.ts
index 98617b27..bf67cea7 100644
--- a/assets/js/modules/misc.ts
+++ b/assets/js/modules/misc.ts
@@ -140,4 +140,14 @@ export class MiscModule implements MiscService {
       }
     })
   }
+
+  /** Initialize all miscellaneous features. */
+  setup() {
+    this.initSiteTime()
+    this.initServiceWorker()
+    this.initAutoMark()
+    this.initReward()
+    this.initPostChatUser()
+    this.initComment()
+  }
 }
diff --git a/assets/js/modules/search/index.ts b/assets/js/modules/search/index.ts
index 7150c894..3862a233 100644
--- a/assets/js/modules/search/index.ts
+++ b/assets/js/modules/search/index.ts
@@ -22,26 +22,6 @@ export class SearchModule implements SearchService {
 
   constructor(private readonly core: CoreService) {}
 
-  /** Initialize the search overlay, autocomplete, and engine-specific logic. */
-  initSearch() {
-    const searchConfig = this.core.config.search
-    if (!searchConfig || !searchConfig.type)
-      return
-
-    // Initialize engine once
-    if (!this.#engine) {
-      this.#engine = this.#createEngine(searchConfig.type, searchConfig)
-    }
-
-    // Initialize dialog and autocomplete once
-    if (!this.#initialized) {
-      this.#initialized = true
-      this.#initAutosearch()
-      this.#initDialog()
-      this.#initKeyboardShortcuts()
-    }
-  }
-
   /** Create the appropriate search engine based on type. */
   #createEngine(type: string, searchConfig: SearchConfig): SearchEngine {
     switch (type) {
@@ -258,4 +238,24 @@ export class SearchModule implements SearchService {
       }
     })
   }
+
+  /** Initialize the search overlay, autocomplete, and engine-specific logic. */
+  setup() {
+    const searchConfig = this.core.config.search
+    if (!searchConfig || !searchConfig.type)
+      return
+
+    // Initialize engine once
+    if (!this.#engine) {
+      this.#engine = this.#createEngine(searchConfig.type, searchConfig)
+    }
+
+    // Initialize dialog and autocomplete once
+    if (!this.#initialized) {
+      this.#initialized = true
+      this.#initAutosearch()
+      this.#initDialog()
+      this.#initKeyboardShortcuts()
+    }
+  }
 }
diff --git a/assets/js/modules/theme.ts b/assets/js/modules/theme.ts
index 520a37b4..34fcadd5 100644
--- a/assets/js/modules/theme.ts
+++ b/assets/js/modules/theme.ts
@@ -76,4 +76,10 @@ export class ThemeModule implements ThemeService {
       })
     })
   }
+
+  /** Initialize theme color and switch handler. */
+  setup() {
+    this.initThemeColor()
+    this.initSwitchTheme()
+  }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 47f814e3..865742f3 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,181 +1,184 @@
 // ==========================================================================
 // SCSS Variables
-// Note: These SCSS variables are now also defined as CSS custom properties
-// in _core/_root.scss for runtime theme switching and runtime customization.
+// Configured via [params.appearance] in hugo.toml using hugo:vars.
+// Default values are defined in layouts/_partials/function/scss-vars.html.
 // ==========================================================================
 @forward "core/maps";
 @use "sass:color";
+@use "hugo:vars" as v;
 
-// ========== Global ========== //
+// ========== Internal ========== //
 $prefix: fi- !default;
 $rootPrefix: --#{$prefix} !default;
+// ========== Internal ========== //
 
+// ========== Global ========== //
 // Font and Line Height
-$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;
-$global-font-size: 16px !default;
-$global-font-weight: 400 !default;
-$global-line-height: 1.5rem !default;
+$global-font-family: v.$global-font-family;
+$global-font-size: v.$global-font-size;
+$global-font-weight: v.$global-font-weight;
+$global-line-height: v.$global-line-height;
 
 // Radius of the border
-$global-border-radius: 6px !default;
+$global-border-radius: v.$global-border-radius;
 
 // Color of the background
-$global-background-color: #ffffff !default;
-$global-background-color-dark: #1f252d !default;
+$global-background-color: v.$global-background-color;
+$global-background-color-dark: v.$global-background-color-dark;
 
 // Color of the text
-$global-font-color: #1f2328 !default;
-$global-font-color-dark: #b3bdcb !default;
+$global-font-color: v.$global-font-color;
+$global-font-color-dark: v.$global-font-color-dark;
 
 // Color of the secondary text
-$global-font-secondary-color: #8b949e !default;
-$global-font-secondary-color-dark: #7d8792 !default;
+$global-font-secondary-color: v.$global-font-secondary-color;
+$global-font-secondary-color-dark: v.$global-font-secondary-color-dark;
 
 // Color of the link
-$global-link-color: #161209 !default;
-$global-link-color-dark: $global-font-color-dark !default;
+$global-link-color: v.$global-link-color;
+$global-link-color-dark: v.$global-link-color-dark;
 
 // Color of the hover link
-$global-link-hover-color: #2983bb !default; // 潮蓝
-$global-link-hover-color-dark: #fff !default;
+$global-link-hover-color: v.$global-link-hover-color;
+$global-link-hover-color-dark: v.$global-link-hover-color-dark;
 
 // Color of the border
-$global-border-color: #d7dee4 !default;
-$global-border-color-dark: #383f47 !default;
+$global-border-color: v.$global-border-color;
+$global-border-color-dark: v.$global-border-color-dark;
 // ========== Global ========== //
 
 // ========== Scrollbar ========== //
 // Color of the scrollbar
-$scrollbar-color: #a6a6a6 !default;
+$scrollbar-color: v.$scrollbar-color;
 
 // Color of the hover scrollbar
-$scrollbar-hover-color: #7d7d7d !default;
+$scrollbar-hover-color: v.$scrollbar-hover-color;
 // ========== Scrollbar ========== //
 
 // ========== Selection ========== //
 // Color of the selected text
-$selection-color: rgba(53, 166, 247, 0.25) !default;
-$selection-color-dark: rgba(50, 112, 194, 0.4) !default;
+$selection-color: v.$selection-color;
+$selection-color-dark: v.$selection-color-dark;
 // ========== Selection ========== //
 
 // ========== Header ========== //
 // Height of the header
-$header-height: 3.5rem !default;
+$header-height: v.$header-height;
 
 // Color of the header background
-$header-background-color: #f6f8fa !default;
-$header-background-color-dark: #151b23 !default;
+$header-background-color: v.$header-background-color;
+$header-background-color-dark: v.$header-background-color-dark;
 
 // Font style of the header title
 $header-title-font-family: $global-font-family !default;
-$header-title-font-size: 1.375rem !default;
+$header-title-font-size: v.$header-title-font-size;
 
 // Color of the active menu item
-$menu-active-color: $global-link-color !default;
-$menu-active-color-dark: #fff !default;
+$menu-active-color: v.$menu-active-color;
+$menu-active-color-dark: v.$menu-active-color-dark;
 
 // Border color of the menu item
-$menu-border-color: #3c3c3c1f !default;
-$menu-border-color-dark: #5454547a !default;
+$menu-border-color: v.$menu-border-color;
+$menu-border-color-dark: v.$menu-border-color-dark;
 
 // Height of the submenu item of desktop header
 $submenu-height: $header-height * 0.5 !default;
 
 // Color of the search background
-$search-background-color: #e9eaed !default;
-$search-background-color-dark: #202833 !default;
+$search-background-color: v.$search-background-color;
+$search-background-color-dark: v.$search-background-color-dark;
 // ========== Header ========== //
 
 // ========== Tag Cloud ========== //
 // Color range of tag cloud
-$tag-cloud-start: $global-font-color-dark !default;
-$tag-cloud-end: $global-font-color !default;
-$tag-cloud-start-dark: #909092 !default;
-$tag-cloud-end-dark: $global-font-color-dark !default;
+$tag-cloud-start: v.$tag-cloud-start;
+$tag-cloud-end: v.$tag-cloud-end;
+$tag-cloud-start-dark: v.$tag-cloud-start-dark;
+$tag-cloud-end-dark: v.$tag-cloud-end-dark;
 // ========== Tag Cloud ========== //
 
 // ========== Single Content ========== //
 // Font size of the TOC
-$toc-title-font-size: 1rem !default;
-$toc-content-font-size: 0.875rem !default;
+$toc-title-font-size: v.$toc-title-font-size;
+$toc-content-font-size: v.$toc-content-font-size;
 
 // Font size of the Collection List
-$collection-title-font-size: 1rem !default;
-$collection-list-font-size: 0.875rem !default;
+$collection-title-font-size: v.$collection-title-font-size;
+$collection-list-font-size: v.$collection-list-font-size;
 
 // Font size of the Related Content List
-$related-title-font-size: 1rem !default;
-$related-list-font-size: 0.875rem !default;
+$related-title-font-size: v.$related-title-font-size;
+$related-list-font-size: v.$related-list-font-size;
 
 // Color of the single link
-$single-link-color: #2376b7 !default; // 花青
-$single-link-color-dark: #1781b5 !default; // 釉蓝
+$single-link-color: v.$single-link-color;
+$single-link-color-dark: v.$single-link-color-dark;
 
 // Color of the hover single link
-$single-link-hover-color: #ea517f !default; // 莲瓣红
-$single-link-hover-color-dark: #cc5595 !default; // 龙须红
+$single-link-hover-color: v.$single-link-hover-color;
+$single-link-hover-color-dark: v.$single-link-hover-color-dark;
 
 // Color of the table background
-$table-background-color: #f9fbfe !default;
-$table-background-color-dark: #26303a !default;
+$table-background-color: v.$table-background-color;
+$table-background-color-dark: v.$table-background-color-dark;
 
 // Color of the table thead
-$table-thead-color: #e3ebf4 !default;
-$table-thead-color-dark: #3a4653 !default;
+$table-thead-color: v.$table-thead-color;
+$table-thead-color-dark: v.$table-thead-color-dark;
 
 // Color of the table border
-$table-border-color: #d4dee8 !default;
-$table-border-color-dark: #4b5867 !default;
+$table-border-color: v.$table-border-color;
+$table-border-color-dark: v.$table-border-color-dark;
 
 // Color of the blockquote
-$blockquote-color: #697681 !default;
-$blockquote-color-dark: #9ba3aa !default;
+$blockquote-color: v.$blockquote-color;
+$blockquote-color-dark: v.$blockquote-color-dark;
 
 // Color of reward
-$reward-color: tomato !default;
+$reward-color: v.$reward-color;
 $reward-color-dark: color.adjust($reward-color, $lightness: -5%) !default;
 
 // Width of reward image
-$reward-img-width: 180px !default;
+$reward-img-width: v.$reward-img-width;
 // ========== Single Content ========== //
 
 // ========== Pagination ========== //
 // Color of the link in pagination
-$pagination-link-color: #bfbfbf !default;
-$pagination-link-color-dark: $global-font-color-dark !default;
+$pagination-link-color: v.$pagination-link-color;
+$pagination-link-color-dark: v.$pagination-link-color-dark;
 
 // Color of the hover link in pagination
-$pagination-link-hover-color: #000 !default;
-$pagination-link-hover-color-dark: #fff !default;
+$pagination-link-hover-color: v.$pagination-link-hover-color;
+$pagination-link-hover-color-dark: v.$pagination-link-hover-color-dark;
 // ========== Pagination ========== //
 
 // ========== Code ========== //
 // Color of the code
-$code-color: #26323d !default;
-$code-color-dark: #c5d1dc !default;
+$code-color: v.$code-color;
+$code-color-dark: v.$code-color-dark;
 
 // Color of the code header text
-$code-header-color: #70808f !default;
-$code-header-color-dark: #99a7b5 !default;
+$code-header-color: v.$code-header-color;
+$code-header-color-dark: v.$code-header-color-dark;
 
 // Color of the code header background
-$code-header-background-color: #dde6ef !default;
-$code-header-background-color-dark: #161f28 !default;
+$code-header-background-color: v.$code-header-background-color;
+$code-header-background-color-dark: v.$code-header-background-color-dark;
 
 // Color of the code background
-$code-background-color: #f3f7fb !default;
-$code-background-color-dark: #2a333d !default;
+$code-background-color: v.$code-background-color;
+$code-background-color-dark: v.$code-background-color-dark;
 
 // Color of the code error
-$code-error-color: #dc3545 !default;
+$code-error-color: v.$code-error-color;
 
 // Color of the highlight code
-$code-highlight-color: #fff2b8 !default;
-$code-highlight-color-dark: rgba(191, 144, 32, 0.28) !default;
+$code-highlight-color: v.$code-highlight-color;
+$code-highlight-color-dark: v.$code-highlight-color-dark;
 
 // Font size of the code
-$code-font-size: 0.875em !default;
-$code-block-font-size: 0.875rem !default;
+$code-font-size: v.$code-font-size;
+$code-block-font-size: v.$code-block-font-size;
 
 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
@@ -183,8 +186,8 @@ $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-
 
 // ========== GitHub Corners ========== //
 // Color of the GitHub Corners
-$github-corner-color: white !default;
-$github-corner-color-dark: black !default;
+$github-corner-color: v.$github-corner-color;
+$github-corner-color-dark: v.$github-corner-color-dark;
 
 // Color of the GitHub Corners background
 $github-corner-fill: $header-background-color-dark !default;
diff --git a/assets/scss/config.template.scss b/assets/scss/config.template.scss
deleted file mode 100644
index e1670583..00000000
--- a/assets/scss/config.template.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-{{- $logo := resources.Get "images/fixit.svg" | minify -}}
-{{- $loading := resources.Get "images/loading.svg" | minify -}}
-
-@charset "utf-8";
-
-@use "override" as *;
-
-$base: "{{ relURL "" }}" !default;
-
-:root {
-  #{$rootPrefix}base: "#{$base}";
-  #{$rootPrefix}logo-img: url("{{ $logo.RelPermalink }}");
-  #{$rootPrefix}loading-img: url("{{ $loading.RelPermalink }}");
-}
diff --git a/assets/scss/core/_root.scss b/assets/scss/core/_root.scss
index 04414388..04a59bca 100644
--- a/assets/scss/core/_root.scss
+++ b/assets/scss/core/_root.scss
@@ -2,9 +2,10 @@
 // CSS Custom Properties (CSS Variables)
 // ================================================================================
 // This file defines all CSS custom properties for the FixIt theme.
-// Variables are organized into two main categories:
-// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
-// 2. Theme-dependent variables: color values that support light/dark themes
+// Variables are organized into three main categories:
+// 1. Internal config: theme system values (base URL, logo, etc.) via hugo:vars/internal
+// 2. Theme-independent variables: fixed values (fonts, sizes, etc.)
+// 3. Theme-dependent variables: color values that support light/dark themes
 //
 // Theme-dependent variables are further categorized into:
 // - Core: Global layout and navigation colors
@@ -16,7 +17,8 @@
 @use "sass:color";
 @use "functions" as *;
 @use "mixins" as *;
-@use "override" as *;
+@use "variables" as *;
+@use "hugo:vars/internal" as i;
 
 :root {
   interpolate-size: allow-keywords;
@@ -34,6 +36,11 @@
   // Theme-Independent Variables
   // ----------------------------------------
   @include set-fi-vars((
+    // Internal config
+    base: "#{i.$base}",
+    logo-img: url("#{i.$logo-img}"),
+    loading-img: url("#{i.$loading-img}"),
+
     // Global Typography
     global-font-family: $global-font-family,
     global-font-size: $global-font-size,
diff --git a/assets/scss/core/functions/_var.scss b/assets/scss/core/functions/_var.scss
index 96927e13..afc65f6e 100644
--- a/assets/scss/core/functions/_var.scss
+++ b/assets/scss/core/functions/_var.scss
@@ -1,6 +1,6 @@
 @use "sass:meta";
 @use "sass:string";
-@use "override" as *;
+@use "variables" as *;
 
 /// Get CSS variable with prefix
 /// @param {String} $name - CSS variable name (without prefix)
diff --git a/assets/scss/core/layouts/_header.scss b/assets/scss/core/layouts/_header.scss
index 9f0b0e69..038b5490 100644
--- a/assets/scss/core/layouts/_header.scss
+++ b/assets/scss/core/layouts/_header.scss
@@ -1,6 +1,6 @@
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 $header-box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.125), rgba(255, 255, 255, 0.125));
 
diff --git a/assets/scss/core/layouts/_wrapper.scss b/assets/scss/core/layouts/_wrapper.scss
index 545c9ea4..ea688d06 100644
--- a/assets/scss/core/layouts/_wrapper.scss
+++ b/assets/scss/core/layouts/_wrapper.scss
@@ -1,5 +1,5 @@
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 // Responsive layout
 .wrapper {
diff --git a/assets/scss/core/mixins/_admonition.scss b/assets/scss/core/mixins/_admonition.scss
new file mode 100644
index 00000000..c876f156
--- /dev/null
+++ b/assets/scss/core/mixins/_admonition.scss
@@ -0,0 +1,32 @@
+@use "sass:color";
+@use "theme-vars" as *;
+
+/// Define an admonition type with CSS custom properties
+/// @param {String} $type - Admonition type name (empty string for default type)
+/// @param {Color} $color - Text/border color
+/// @param {Color} $bg - Background color
+/// @param {Color} $bg-collapsed [color.adjust($bg, $alpha: 0.15)] - Collapsed title background color
+/// @example
+///   // Define the default admonition type
+///   @include admonition('', #1677ff, rgba(22, 119, 255, 0.1));
+///
+///   // Define a custom admonition type
+///   @include admonition(custom, #9b59b6, rgba(155, 89, 182, 0.1));
+///
+///   // Define with explicit collapsed background color
+///   @include admonition(important, #e91e63, rgba(233, 30, 99, 0.1), rgba(233, 30, 99, 0.25));
+@mixin admonition($type, $color, $bg, $bg-collapsed: color.adjust($bg, $alpha: 0.15)) {
+  $vars: (
+    admonition-color: $color,
+    admonition-bg-color: $bg,
+    admonition-bg-color-collapsed: $bg-collapsed,
+  );
+
+  @if $type == '' {
+    @include set-fi-vars($vars);
+  } @else {
+    &.#{$type} {
+      @include set-fi-vars($vars);
+    }
+  }
+}
diff --git a/assets/scss/core/mixins/_index.scss b/assets/scss/core/mixins/_index.scss
index 5d768284..b4de0e29 100644
--- a/assets/scss/core/mixins/_index.scss
+++ b/assets/scss/core/mixins/_index.scss
@@ -1,3 +1,4 @@
+@forward 'admonition';
 @forward 'bold-dark';
 @forward 'border-radius';
 @forward 'box-shadow';
diff --git a/assets/scss/core/mixins/_link.scss b/assets/scss/core/mixins/_link.scss
index fc2a2a1f..9116bab7 100644
--- a/assets/scss/core/mixins/_link.scss
+++ b/assets/scss/core/mixins/_link.scss
@@ -1,4 +1,4 @@
-@use "override" as *;
+@use "variables" as *;
 
 /// Link mixin
 /// @param {Boolean} $light use global link color
diff --git a/assets/scss/core/mixins/_theme-switch.scss b/assets/scss/core/mixins/_theme-switch.scss
index ccc132a6..18d16f14 100644
--- a/assets/scss/core/mixins/_theme-switch.scss
+++ b/assets/scss/core/mixins/_theme-switch.scss
@@ -1,4 +1,4 @@
-@use "override" as *;
+@use "variables" as *;
 
 // Shared defaults for theme-switch icon motion.
 // Keep them overridable so other entries can reuse the same mixin with different pacing.
diff --git a/assets/scss/core/mixins/_theme-vars.scss b/assets/scss/core/mixins/_theme-vars.scss
index 5200f2b1..e3c948aa 100644
--- a/assets/scss/core/mixins/_theme-vars.scss
+++ b/assets/scss/core/mixins/_theme-vars.scss
@@ -3,7 +3,7 @@
 // ========================================
 @use "sass:color";
 @use "sass:map";
-@use "override" as *;
+@use "variables" as *;
 
 /// Set a single CSS variable
 /// @param {String} $name - CSS variable name (without prefix)
diff --git a/assets/scss/override.scss b/assets/scss/override.scss
deleted file mode 100644
index a25e6b9d..00000000
--- a/assets/scss/override.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// ==============================
-// Override Variables
-// 覆盖变量
-// @deprecated 1.0.0 use config params for _variables.scss
-//
-// Example:
-// @forward "variables" with (
-//   $global-font-size: 16px,
-//   $global-border-radius: 6px,
-// );
-// ==============================
-@forward "variables";
diff --git a/assets/scss/pages/_patch.scss b/assets/scss/pages/_patch.scss
index 56a33661..7f4b8986 100644
--- a/assets/scss/pages/_patch.scss
+++ b/assets/scss/pages/_patch.scss
@@ -1,5 +1,5 @@
 // Resolve style conflicts between third-party plugins
-@use "override" as *;
+@use "variables" as *;
 
 @keyframes #{$prefix}pulse {
   from {
diff --git a/assets/scss/pages/archives/_tags.scss b/assets/scss/pages/archives/_tags.scss
index 3f8f6ee1..55aec518 100644
--- a/assets/scss/pages/archives/_tags.scss
+++ b/assets/scss/pages/archives/_tags.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 .tags {
   margin: 10px 0;
diff --git a/assets/scss/pages/single/_base.scss b/assets/scss/pages/single/_base.scss
index 2b2fb5a3..25492ea3 100644
--- a/assets/scss/pages/single/_base.scss
+++ b/assets/scss/pages/single/_base.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 .single {
   .single-title {
diff --git a/assets/scss/pages/single/_code.scss b/assets/scss/pages/single/_code.scss
index c0d665d1..b9bcc898 100644
--- a/assets/scss/pages/single/_code.scss
+++ b/assets/scss/pages/single/_code.scss
@@ -3,7 +3,7 @@
 @use "sass:string";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 @use "code-syntax";
 @use "copy-icon-btn";
 
diff --git a/assets/scss/pages/single/_collections.scss b/assets/scss/pages/single/_collections.scss
index ecdbc416..a9f4ed93 100644
--- a/assets/scss/pages/single/_collections.scss
+++ b/assets/scss/pages/single/_collections.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 // Collection Navigation
 .single .collection-card {
diff --git a/assets/scss/pages/single/_fixit-decryptor.scss b/assets/scss/pages/single/_fixit-decryptor.scss
index fdb510d8..6efa534a 100644
--- a/assets/scss/pages/single/_fixit-decryptor.scss
+++ b/assets/scss/pages/single/_fixit-decryptor.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 .fixit-decryptor-container {
   font-family: fi-var(global-font-family);
diff --git a/assets/scss/pages/single/_reward.scss b/assets/scss/pages/single/_reward.scss
index e863cfdc..2c407973 100644
--- a/assets/scss/pages/single/_reward.scss
+++ b/assets/scss/pages/single/_reward.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 .single .post-reward {
   padding: 1rem;
diff --git a/assets/scss/pages/single/_toc.scss b/assets/scss/pages/single/_toc.scss
index 1373cbac..c9067deb 100644
--- a/assets/scss/pages/single/_toc.scss
+++ b/assets/scss/pages/single/_toc.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 // Common styles for all TOC types
 .toc {
diff --git a/assets/scss/pages/single/code-syntax/_dark.scss b/assets/scss/pages/single/code-syntax/_dark.scss
index ab3e84ce..324664b4 100644
--- a/assets/scss/pages/single/code-syntax/_dark.scss
+++ b/assets/scss/pages/single/code-syntax/_dark.scss
@@ -1,4 +1,4 @@
-@use "override" as *;
+@use "variables" as *;
 
 /* Maintained by @Lruihao for FixIt theme */
 
diff --git a/assets/scss/pages/single/code-syntax/_light.scss b/assets/scss/pages/single/code-syntax/_light.scss
index f8a7f6a2..766439dc 100644
--- a/assets/scss/pages/single/code-syntax/_light.scss
+++ b/assets/scss/pages/single/code-syntax/_light.scss
@@ -1,4 +1,4 @@
-@use "override" as *;
+@use "variables" as *;
 
 /* Maintained by @Lruihao for FixIt theme */
 
diff --git a/assets/scss/pages/single/shortcodes/_admonition.scss b/assets/scss/pages/single/shortcodes/_admonition.scss
index 94b2bd3e..ca3bd459 100644
--- a/assets/scss/pages/single/shortcodes/_admonition.scss
+++ b/assets/scss/pages/single/shortcodes/_admonition.scss
@@ -56,7 +56,7 @@
 
   .admonition-content {
     padding: 0.5rem 0;
-    
+
     // for extended alert syntax
     > p {
       margin: 0;
@@ -84,24 +84,14 @@
     translate: 50% -50%;
   }
 
-  // default admonition type is note
-  @include set-fi-vars((
-    admonition-color: map.get(map.get(maps.$admonition-color-map, note), color),
-    admonition-bg-color: map.get(map.get(maps.$admonition-color-map, note), bg-color),
-    admonition-bg-color-collapsed: color.adjust(map.get(map.get(maps.$admonition-color-map, note), bg-color), $alpha: 0.15),
-  ));
-
   // set color for each admonition type
+  $default-type: note;
   @each $type, $item in maps.$admonition-color-map {
-    @if $type != 'note' {
-      &.#{$type} {
-         @include set-fi-vars((
-          admonition-color: map.get($item, color),
-          admonition-bg-color: map.get($item, bg-color),
-          admonition-bg-color-collapsed: color.adjust(map.get($item, bg-color), $alpha: 0.15),
-        ));
-      }
+    $admonition-type: $type;
+    @if $type == $default-type {
+      $admonition-type: '';
     }
+    @include admonition($admonition-type, map.get($item, color), map.get($item, bg-color));
   }
 
   &:last-child {
diff --git a/assets/scss/pages/single/shortcodes/_tabs.scss b/assets/scss/pages/single/shortcodes/_tabs.scss
index 46bd899b..0c2207cb 100644
--- a/assets/scss/pages/single/shortcodes/_tabs.scss
+++ b/assets/scss/pages/single/shortcodes/_tabs.scss
@@ -3,7 +3,7 @@
 // ========================================
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 @mixin tab-button-size($padding-inline: 1.25rem, $padding-block: 0.75rem) {
   @if $padding-inline != 0 {
diff --git a/assets/scss/pages/single/shortcodes/_timeline.scss b/assets/scss/pages/single/shortcodes/_timeline.scss
index 5ad0f89d..5425a70b 100644
--- a/assets/scss/pages/single/shortcodes/_timeline.scss
+++ b/assets/scss/pages/single/shortcodes/_timeline.scss
@@ -1,6 +1,6 @@
 @use "core/functions" as *;
 @use "core/mixins" as *;
-@use "override" as *;
+@use "variables" as *;
 
 .single ul.#{$prefix}timeline {
   list-style: none;
diff --git a/hugo.toml b/hugo.toml
index 65a802a5..d05242d5 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1269,6 +1269,19 @@ postContentAfter = []
 postFooterBefore = []
 postFooterAfter = []
 
+# FixIt 1.0.0 | NEW SCSS variables customization via config
+# All SCSS variables from _variables.scss can be configured here.
+# Use the SCSS variable name (without $ prefix, snake_case) as the key.
+# Note:
+# - Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported.
+# - Values used in compile-time operations (color.adjust, arithmetic)
+#   will use the SCSS default for derived values. You can override derived values directly.
+[params.appearance]
+# global_border_radius = "6px"
+# global_font_size = "16px"
+# global_font_color = "#1f2328"
+# global_font_color_dark = "#b3bdcb"
+
 # FixIt 0.2.15 | NEW Developer options
 # select the scope named `public_repo` to generate personal access token,
 # configure with environment variable `HUGO_PARAMS_GHTOKEN=xxx`, see https://gohugo.io/functions/os/getenv/#examples
diff --git a/i18n/ko.toml b/i18n/ko.toml
index 52ee5f86..aaea491d 100644
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@@ -4,9 +4,9 @@
 
 # === Init ===
 [init]
-hugoVersionError = "Hugo 버전이 너무 낮습니다.\n\n현재 Hugo 버전은 {{ .Current }}이며, FixIt의 최소 지원 버전은 {{ .Minimal }}입니다.\n\n자신의 컴퓨터에서 Hugo를 실행 중이라면 https://gohugo.io/getting-started/installing/#upgrade-hugo에서 업그레이드 가이드를 확인하세요.\n\n타사 플랫폼에 배포 중이라면 Hugo 버전을 적절히 설정해 주세요."
+hugoVersionError = "Hugo 버전이 너무 낮습니다.\n\n현재 Hugo 버전은 {{ .Current }}이며, FixIt의 최소 지원 버전은 {{ .Minimal }}입니다.\n\n자신의 컴퓨터에서 Hugo를 실행 중이라면 https://gohugo.io/getting-started/installing/#upgrade-hugo 에서 업그레이드 가이드를 확인하세요.\n\n타사 플랫폼에 배포 중이라면 Hugo 버전을 적절히 설정해 주세요."
 hugoExtendedWarn = "SCSS 지원을 위해 Hugo Extended 버전이 필요합니다."
-configurationError = "구성 파일 오류\n아직 FixIt의 버전 매개변수를 올바르게 구성하지 않았습니다. https://fixit.lruihao.cn/ko/documentation/basics/#theme-configuration을 참조하세요."
+configurationError = "구성 파일 오류\n아직 FixIt의 버전 매개변수를 올바르게 구성하지 않았습니다. https://fixit.lruihao.cn/ko/documentation/basics/#theme-configuration 을 참조하세요."
 compatibilityError = "호환성 오류 ({{ .From }} -> {{ .To }}):\n비호환 업데이트를 수행했습니다. https://github.com/hugo-fixit/FixIt/releases를 참조하세요."
 devVersionWarn = "현재 개발 버전의 FixIt을 사용 중입니다. 안정적인 버전을 사용하는 것이 좋습니다.\n자세한 내용은 https://github.com/hugo-fixit/FixIt/releases를 참조하세요."
 devEnvWarn = "현재 실행 환경이 'development'입니다. '댓글 시스템', 'PWA', 'CDN', '지문 인식' 및 '통계'가 활성화되지 않습니다."
diff --git a/layouts/_partials/base/head/index.html b/layouts/_partials/base/head/index.html
index da1d2dc2..5b94ba7b 100644
--- a/layouts/_partials/base/head/index.html
+++ b/layouts/_partials/base/head/index.html
@@ -113,20 +113,24 @@
   <link rel="alternate" type="application/feed+json" href="{{ .Permalink }}" title="{{ $title }}" />
 {{- end -}}
 
-{{- /* Config CSS */ -}}
-{{- dict
-  "Source" "scss/config.template.scss"
-  "Template" "scss/config.scss"
-  "ToCSS" (dict "enableSourceMap" false)
-  "Fingerprint" $fingerprint
-  "Context" .
-  | partial "plugin/style.html"
+{{- /* SCSS vars: internal (theme config) + appearance (user-configurable) */ -}}
+{{- $logo := resources.Get "images/fixit.svg" | minify -}}
+{{- $loading := resources.Get "images/loading.svg" | minify -}}
+{{- $internal := dict
+  "base" (relURL "")
+  "logo_img" $logo.RelPermalink
+  "loading_img" $loading.RelPermalink
+-}}
+{{- $scssVars :=
+  dict "internal" $internal
+  | merge (.Site.Params.appearance | default dict)
+  | merge (partialCached "function/scss-vars.html" .)
 -}}
 
 {{- /* Theme main CSS */ -}}
 {{- $mainCSS := dict
   "Resource" (resources.Get "scss/main.scss")
-  "ToCSS" true
+  "ToCSS" (dict "vars" $scssVars)
   "Fingerprint" $fingerprint
   | partial "function/to-css.html"
 -}}
diff --git a/layouts/_partials/function/scss-vars.html b/layouts/_partials/function/scss-vars.html
new file mode 100644
index 00000000..7dc21177
--- /dev/null
+++ b/layouts/_partials/function/scss-vars.html
@@ -0,0 +1,89 @@
+{{- /*
+  SCSS variables default values.
+  Merged with user config ([params.appearance]) and passed to toCSS as hugo:vars.
+  Values from: assets/scss/_variables.scss
+  Note: Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported
+  because Hugo's isTypedCSSValue only recognizes hex colors, CSS functions, and CSS units.
+*/ -}}
+{{- /* Base defaults — independent values */ -}}
+{{- $defaults := dict
+  "global_font_family" "system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
+  "global_font_size" "16px"
+  "global_font_weight" "400"
+  "global_line_height" "1.5rem"
+  "global_border_radius" "6px"
+  "global_background_color" "#ffffff"
+  "global_background_color_dark" "#1f252d"
+  "global_font_color" "#1f2328"
+  "global_font_color_dark" "#b3bdcb"
+  "global_font_secondary_color" "#8b949e"
+  "global_font_secondary_color_dark" "#7d8792"
+  "global_link_color" "#161209"
+  "global_link_color_dark" "#b3bdcb"
+  "global_link_hover_color" "#2983bb"
+  "global_link_hover_color_dark" "#fff"
+  "global_border_color" "#d7dee4"
+  "global_border_color_dark" "#383f47"
+  "scrollbar_color" "#a6a6a6"
+  "scrollbar_hover_color" "#7d7d7d"
+  "selection_color" "rgba(53, 166, 247, 0.25)"
+  "selection_color_dark" "rgba(50, 112, 194, 0.4)"
+  "header_height" "3.5rem"
+  "header_background_color" "#f6f8fa"
+  "header_background_color_dark" "#151b23"
+  "header_title_font_size" "1.375rem"
+  "menu_active_color_dark" "#fff"
+  "menu_border_color" "#3c3c3c1f"
+  "menu_border_color_dark" "#5454547a"
+  "search_background_color" "#e9eaed"
+  "search_background_color_dark" "#202833"
+  "tag_cloud_start_dark" "#909092"
+  "toc_title_font_size" "1rem"
+  "toc_content_font_size" "0.875rem"
+  "collection_title_font_size" "1rem"
+  "collection_list_font_size" "0.875rem"
+  "related_title_font_size" "1rem"
+  "related_list_font_size" "0.875rem"
+  "single_link_color" "#2376b7"
+  "single_link_color_dark" "#1781b5"
+  "single_link_hover_color" "#ea517f"
+  "single_link_hover_color_dark" "#cc5595"
+  "table_background_color" "#f9fbfe"
+  "table_background_color_dark" "#26303a"
+  "table_thead_color" "#e3ebf4"
+  "table_thead_color_dark" "#3a4653"
+  "table_border_color" "#d4dee8"
+  "table_border_color_dark" "#4b5867"
+  "blockquote_color" "#697681"
+  "blockquote_color_dark" "#9ba3aa"
+  "reward_color" "#ff6347"
+  "reward_img_width" "180px"
+  "pagination_link_color" "#bfbfbf"
+  "pagination_link_hover_color" "#000"
+  "pagination_link_hover_color_dark" "#fff"
+  "code_color" "#26323d"
+  "code_color_dark" "#c5d1dc"
+  "code_header_color" "#70808f"
+  "code_header_color_dark" "#99a7b5"
+  "code_header_background_color" "#dde6ef"
+  "code_header_background_color_dark" "#161f28"
+  "code_background_color" "#f3f7fb"
+  "code_background_color_dark" "#2a333d"
+  "code_error_color" "#dc3545"
+  "code_highlight_color" "#fff2b8"
+  "code_highlight_color_dark" "rgba(191, 144, 32, 0.28)"
+  "code_font_size" "0.875em"
+  "code_block_font_size" "0.875rem"
+  "github_corner_color" "#ffffff"
+  "github_corner_color_dark" "#000000"
+-}}
+{{- /* Derived defaults — values that follow other keys (see _variables.scss) */ -}}
+{{- $derived := dict
+  "menu_active_color" (index $defaults "global_link_color")
+  "tag_cloud_start" (index $defaults "global_font_color_dark")
+  "tag_cloud_end" (index $defaults "global_font_color")
+  "tag_cloud_end_dark" (index $defaults "global_font_color_dark")
+  "pagination_link_color_dark" (index $defaults "global_font_color_dark")
+-}}
+{{- $defaults = merge $defaults $derived -}}
+{{- return $defaults -}}
diff --git a/layouts/_partials/init/detection-deprecated.html b/layouts/_partials/init/detection-deprecated.html
index ebb1b97f..d9f32636 100644
--- a/layouts/_partials/init/detection-deprecated.html
+++ b/layouts/_partials/init/detection-deprecated.html
@@ -6,26 +6,30 @@
   {{- $warns = $warns | append "The parameter `params.externalIcon` is deprecated since v1.0.0, use `params.link.external_icon` instead." -}}
 {{- end -}}
 
-{{- with resources.Get "css/_custom.scss" -}}
+{{- if fileExists "assets/css/_custom.scss" -}}
   {{- $warns = $warns | append "The file `assets/css/_custom.scss` is deprecated. Please move your custom styles to `assets/scss/custom.scss`." -}}
 {{- end -}}
 
-{{- with resources.Get "css/_override.scss" -}}
-  {{- $warns = $warns | append "The file `assets/css/_override.scss` is deprecated. Please move your custom styles to `assets/scss/override.scss`." -}}
+{{- if fileExists "assets/css/_override.scss" -}}
+  {{- $warns = $warns | append "The file `assets/css/_override.scss` is deprecated. Use `[params.appearance]` in your site configuration instead." -}}
 {{- end -}}
 
-{{- with resources.Get "css/_variables.scss" -}}
+{{- if fileExists "assets/scss/override.scss" -}}
+  {{- $warns = $warns | append "The file `assets/scss/override.scss` is deprecated. Use `[params.appearance]` in your site configuration instead." -}}
+{{- end -}}
+
+{{- if fileExists "assets/css/_variables.scss" -}}
   {{- $warns = $warns | append "The file `assets/css/_variables.scss` is deprecated. Please move your variables to `assets/scss/_variables.scss`." -}}
 {{- end -}}
 
-{{- with resources.Get "js/_custom.js" -}}
+{{- if fileExists "assets/js/_custom.js" -}}
   {{- $warns = $warns | append "The file `assets/js/_custom.js` is deprecated. Please move your custom scripts to `assets/js/custom.ts` or `assets/js/custom.js`." -}}
 {{- end -}}
 
 {{- if len $warns -}}
-  {{- warnf "FixIt deprecation warnings (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $warns "\n • ") -}}
+  {{- warnf "[FixIt] deprecation warnings (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $warns "\n • ") -}}
 {{- end -}}
 
 {{- if len $errors -}}
-  {{- errorf "FixIt deprecation errors (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $errors "\n • ") -}}
+  {{- errorf "[FixIt] deprecation errors (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $errors "\n • ") -}}
 {{- end -}}