• English
      • English

      Theme variable reference

      Generated from the theme registry: 292 variables. See the authoring guide for scope and usage. Run pnpm theme:generate after changing definitions; the documentation build checks for stale output.

      Download the JSON Schema

      . Add "$schema": "https://aino.md/schemas/appearance-theme.v2.schema.json" to the top level of a v2 theme for completion and structural checks in compatible editors. The schema checks names, types and basic literal syntax; Aino import remains authoritative for numeric ranges inside color functions, shadows and other strings. For offline use, download the schema and reference its relative path.

      Schema descriptions support all nine interface languages. English uses the default URL; other languages add their code to the filename, such as appearance-theme.v2.ja.schema.json. Codes: zh-cn, zh-tw, ja, de, fr, es, pt, ar.

      All values are strings. Examples show valid input, not default values.

      VariableGroupTypeExample
      --accent-primaryaccentcolor#abc
      --accent-secondaryaccentcolor#abc
      --accent-softaccentcolor#abc
      --accent-strongaccentcolor#abc
      --accent-tertiaryaccentcolor#abc
      --button-backgroundaino-buttoncolor#abc
      --button-background-activeaino-buttoncolor#abc
      --button-background-hoveraino-buttoncolor#abc
      --button-border-coloraino-buttoncolor#abc
      --button-border-color-hoveraino-buttoncolor#abc
      --button-coloraino-buttoncolor#abc
      --button-color-hoveraino-buttoncolor#abc
      --button-font-weightaino-buttonfont-weightnormal
      --button-radiusaino-buttonradius0
      --button-shadowaino-buttonshadownone
      --card-backgroundaino-cardcolor#abc
      --card-background-hoveraino-cardcolor#abc
      --card-border-coloraino-cardcolor#abc
      --card-border-widthaino-cardlength0
      --card-radiusaino-cardradius0
      --card-shadowaino-cardshadownone
      --input-backgroundaino-inputcolor#abc
      --input-background-hoveraino-inputcolor#abc
      --input-border-coloraino-inputcolor#abc
      --input-border-color-focusaino-inputcolor#abc
      --input-coloraino-inputcolor#abc
      --input-placeholder-coloraino-inputcolor#abc
      --input-shadowaino-inputshadownone
      --modal-backdrop-bluraino-materiallength0
      --modal-backdrop-saturationaino-materialratio0
      --toast-backdrop-bluraino-toastlength0
      --toast-backdrop-saturationaino-toastratio0
      --toast-backgroundaino-toastcolor#abc
      --toast-border-coloraino-toastcolor#abc
      --toast-border-widthaino-toastlength0
      --toast-radiusaino-toastradius0
      --toast-shadowaino-toastshadownone
      --toolbar-backdrop-bluraino-toolbarlength0
      --toolbar-backdrop-saturationaino-toolbarratio0
      --toolbar-backgroundaino-toolbarcolor#abc
      --toolbar-border-coloraino-toolbarcolor#abc
      --toolbar-shadowaino-toolbarshadownone
      --border-colorbordercolor#abc
      --border-color-strongbordercolor#abc
      --border-color-subtlebordercolor#abc
      --editor-border-coloreditorcolor#abc
      --editor-surface-primaryeditorcolor#abc
      --editor-surface-secondaryeditorcolor#abc
      --editor-surface-tertiaryeditorcolor#abc
      --focus-ring-shadoweffectsshadownone
      --shadow-gloweffectsshadownone
      --shadow-lgeffectsshadownone
      --shadow-mdeffectsshadownone
      --shadow-smeffectsshadownone
      --clickable-icon-radiusiconsradius0
      --icon-coloriconscolor#abc
      --icon-color-activeiconscolor#abc
      --icon-color-hovericonscolor#abc
      --icon-opacityiconsopacity0
      --icon-opacity-hovericonsopacity0
      --icon-sizeiconslength0
      --icon-strokeiconsratio0
      --editor-link-colorlinkcolor#abc
      --editor-link-hover-colorlinkcolor#abc
      --link-colorlinkcolor#abc
      --link-hover-colorlinkcolor#abc
      --menu-backgroundmenucolor#abc
      --menu-border-colormenucolor#abc
      --menu-item-background-hovermenucolor#abc
      --menu-item-colormenucolor#abc
      --menu-item-color-hovermenucolor#abc
      --menu-item-padding-xmenulength0
      --menu-item-padding-ymenulength0
      --menu-radiusmenuradius0
      --menu-shadowmenushadownone
      --motion-curve-emphasismotioneasinglinear
      --motion-curve-softmotioneasinglinear
      --motion-duration-fastmotionduration0ms
      --motion-duration-normalmotionduration0ms
      --motion-duration-slowmotionduration0ms
      --blockquote-background-colorobsidian-blockquotecolor#abc
      --blockquote-border-colorobsidian-blockquotecolor#abc
      --blockquote-border-thicknessobsidian-blockquotelength0
      --blockquote-colorobsidian-blockquotecolor#abc
      --blockquote-font-styleobsidian-blockquotefont-stylenormal
      --checkbox-border-colorobsidian-checkboxcolor#abc
      --checkbox-border-color-hoverobsidian-checkboxcolor#abc
      --checkbox-colorobsidian-checkboxcolor#abc
      --checkbox-color-hoverobsidian-checkboxcolor#abc
      --checkbox-marker-colorobsidian-checkboxcolor#abc
      --code-backgroundobsidian-codecolor#abc
      --code-commentobsidian-codecolor#abc
      --code-functionobsidian-codecolor#abc
      --code-importantobsidian-codecolor#abc
      --code-keywordobsidian-codecolor#abc
      --code-normalobsidian-codecolor#abc
      --code-operatorobsidian-codecolor#abc
      --code-propertyobsidian-codecolor#abc
      --code-punctuationobsidian-codecolor#abc
      --code-sizeobsidian-codefont-size18px
      --code-stringobsidian-codecolor#abc
      --code-tagobsidian-codecolor#abc
      --code-valueobsidian-codecolor#abc
      --hr-colorobsidian-editorcolor#abc
      --hr-thicknessobsidian-editorlength0
      --background-modifier-active-hoverobsidian-foundationcolor#abc
      --background-modifier-borderobsidian-foundationcolor#abc
      --background-modifier-border-focusobsidian-foundationcolor#abc
      --background-modifier-border-hoverobsidian-foundationcolor#abc
      --background-modifier-hoverobsidian-foundationcolor#abc
      --background-primaryobsidian-foundationcolor#abc
      --background-primary-altobsidian-foundationcolor#abc
      --background-secondaryobsidian-foundationcolor#abc
      --background-secondary-altobsidian-foundationcolor#abc
      --caret-colorobsidian-foundationcolor#abc
      --color-accentobsidian-foundationcolor#abc
      --color-accent-1obsidian-foundationcolor#abc
      --color-accent-2obsidian-foundationcolor#abc
      --interactive-accentobsidian-foundationcolor#abc
      --interactive-accent-hoverobsidian-foundationcolor#abc
      --interactive-hoverobsidian-foundationcolor#abc
      --interactive-normalobsidian-foundationcolor#abc
      --radius-lobsidian-foundationradius0
      --radius-mobsidian-foundationradius0
      --radius-sobsidian-foundationradius0
      --text-accentobsidian-foundationcolor#abc
      --text-accent-hoverobsidian-foundationcolor#abc
      --text-errorobsidian-foundationcolor#abc
      --text-faintobsidian-foundationcolor#abc
      --text-highlight-bgobsidian-foundationcolor#abc
      --text-normalobsidian-foundationcolor#abc
      --text-on-accentobsidian-foundationcolor#abc
      --text-on-accent-invertedobsidian-foundationcolor#abc
      --text-selectionobsidian-foundationcolor#abc
      --text-successobsidian-foundationcolor#abc
      --text-warningobsidian-foundationcolor#abc
      --h1-colorobsidian-headingcolor#abc
      --h1-sizeobsidian-headingfont-size18px
      --h1-weightobsidian-headingfont-weightnormal
      --h2-colorobsidian-headingcolor#abc
      --h2-sizeobsidian-headingfont-size18px
      --h2-weightobsidian-headingfont-weightnormal
      --h3-colorobsidian-headingcolor#abc
      --h3-sizeobsidian-headingfont-size18px
      --h3-weightobsidian-headingfont-weightnormal
      --h4-colorobsidian-headingcolor#abc
      --h4-sizeobsidian-headingfont-size18px
      --h4-weightobsidian-headingfont-weightnormal
      --h5-colorobsidian-headingcolor#abc
      --h5-sizeobsidian-headingfont-size18px
      --h5-weightobsidian-headingfont-weightnormal
      --h6-colorobsidian-headingcolor#abc
      --h6-sizeobsidian-headingfont-size18px
      --h6-weightobsidian-headingfont-weightnormal
      --heading-formattingobsidian-headingcolor#abc
      --input-border-widthobsidian-inputlength0
      --input-font-weightobsidian-inputfont-weightnormal
      --input-radiusobsidian-inputradius0
      --link-color-hoverobsidian-linkcolor#abc
      --link-external-colorobsidian-linkcolor#abc
      --link-external-color-hoverobsidian-linkcolor#abc
      --link-unresolved-colorobsidian-linkcolor#abc
      --list-indentobsidian-listlength0
      --list-marker-colorobsidian-listcolor#abc
      --list-marker-color-hoverobsidian-listcolor#abc
      --list-spacingobsidian-listlength0
      --modal-backgroundobsidian-modalcolor#abc
      --modal-border-colorobsidian-modalcolor#abc
      --modal-border-widthobsidian-modallength0
      --modal-radiusobsidian-modalradius0
      --nav-collapse-icon-colorobsidian-navigationcolor#abc
      --nav-collapse-icon-color-collapsedobsidian-navigationcolor#abc
      --nav-indentation-guide-colorobsidian-navigationcolor#abc
      --nav-indentation-guide-widthobsidian-navigationlength0
      --nav-item-background-activeobsidian-navigationcolor#abc
      --nav-item-background-hoverobsidian-navigationcolor#abc
      --nav-item-background-selectedobsidian-navigationcolor#abc
      --nav-item-colorobsidian-navigationcolor#abc
      --nav-item-color-activeobsidian-navigationcolor#abc
      --nav-item-color-highlightedobsidian-navigationcolor#abc
      --nav-item-color-hoverobsidian-navigationcolor#abc
      --nav-item-color-selectedobsidian-navigationcolor#abc
      --nav-item-weightobsidian-navigationfont-weightnormal
      --nav-item-weight-activeobsidian-navigationfont-weightnormal
      --nav-item-weight-hoverobsidian-navigationfont-weightnormal
      --color-blueobsidian-palettecolor#abc
      --color-cyanobsidian-palettecolor#abc
      --color-greenobsidian-palettecolor#abc
      --color-orangeobsidian-palettecolor#abc
      --color-pinkobsidian-palettecolor#abc
      --color-purpleobsidian-palettecolor#abc
      --color-redobsidian-palettecolor#abc
      --color-yellowobsidian-palettecolor#abc
      --table-backgroundobsidian-tablecolor#abc
      --table-border-colorobsidian-tablecolor#abc
      --table-border-widthobsidian-tablelength0
      --table-header-backgroundobsidian-tablecolor#abc
      --table-header-border-colorobsidian-tablecolor#abc
      --table-header-colorobsidian-tablecolor#abc
      --table-header-weightobsidian-tablefont-weightnormal
      --table-row-alt-backgroundobsidian-tablecolor#abc
      --table-row-background-hoverobsidian-tablecolor#abc
      --table-selectionobsidian-tablecolor#abc
      --table-text-colorobsidian-tablecolor#abc
      --tab-background-activeobsidian-tabscolor#abc
      --tab-container-backgroundobsidian-tabscolor#abc
      --tab-divider-colorobsidian-tabscolor#abc
      --tab-font-sizeobsidian-tabsfont-size18px
      --tab-font-weightobsidian-tabsfont-weightnormal
      --tab-radiusobsidian-tabsradius0
      --tab-radius-activeobsidian-tabsradius0
      --tab-text-colorobsidian-tabscolor#abc
      --tab-text-color-activeobsidian-tabscolor#abc
      --tag-backgroundobsidian-tagcolor#abc
      --tag-background-hoverobsidian-tagcolor#abc
      --tag-border-colorobsidian-tagcolor#abc
      --tag-border-color-hoverobsidian-tagcolor#abc
      --tag-border-widthobsidian-taglength0
      --tag-colorobsidian-tagcolor#abc
      --tag-color-hoverobsidian-tagcolor#abc
      --tag-radiusobsidian-tagradius0
      --tag-sizeobsidian-tagfont-size18px
      --tag-weightobsidian-tagfont-weightnormal
      --bold-colorobsidian-typographycolor#abc
      --italic-colorobsidian-typographycolor#abc
      --scrollbar-active-thumb-bgscrollbarcolor#abc
      --scrollbar-bgscrollbarcolor#abc
      --scrollbar-thumb-bgscrollbarcolor#abc
      --radius-lgshaperadius0
      --radius-mdshaperadius0
      --radius-smshaperadius0
      --radius-xlshaperadius0
      --radius-xsshaperadius0
      --sidebar-blursidebarlength0
      --sidebar-opacitysidebaropacity0
      --sidebar-panel-backgroundsidebarcolor#abc
      --sidebar-panel-background-activesidebarcolor#abc
      --sidebar-panel-background-hoversidebarcolor#abc
      --sidebar-panel-background-raisedsidebarcolor#abc
      --sidebar-panel-border-colorsidebarcolor#abc
      --sidebar-saturationsidebarratio0
      --surface-sidebarsidebarcolor#abc
      --slider-thumb-border-colorslidercolor#abc
      --slider-thumb-border-widthsliderlength0
      --slider-thumb-colorslidercolor#abc
      --slider-thumb-heightsliderlength0
      --slider-thumb-radiussliderradius0
      --slider-thumb-widthsliderlength0
      --slider-track-backgroundslidercolor#abc
      --slider-track-heightsliderlength0
      --errorstatuscolor#abc
      --successstatuscolor#abc
      --warningstatuscolor#abc
      --surface-accent-softsurfacecolor#abc
      --surface-accent-soft-strongsurfacecolor#abc
      --surface-canvassurfacecolor#abc
      --surface-danger-softsurfacecolor#abc
      --surface-elevatedsurfacecolor#abc
      --surface-mutedsurfacecolor#abc
      --surface-muted-strongsurfacecolor#abc
      --surface-panelsurfacecolor#abc
      --surface-success-softsurfacecolor#abc
      --surface-toolbarsurfacecolor#abc
      --surface-warning-softsurfacecolor#abc
      --text-inversetextcolor#abc
      --text-mutedtextcolor#abc
      --text-primarytextcolor#abc
      --text-secondarytextcolor#abc
      --toggle-backgroundtogglecolor#abc
      --toggle-background-activetogglecolor#abc
      --toggle-radiustoggleradius0
      --toggle-thumb-colortogglecolor#abc
      --toggle-thumb-heighttogglelength0
      --toggle-thumb-radiustoggleradius0
      --toggle-thumb-widthtogglelength0
      --toggle-widthtogglelength0
      --tooltip-backgroundtooltipcolor#abc
      --tooltip-colortooltipcolor#abc
      --tooltip-font-sizetooltipfont-size18px
      --tooltip-radiustooltipradius0
      --tooltip-shadowtooltipshadownone
      --font-interface-themetypographyfont-family'Noto Serif SC', Georgia, serif
      --font-monospace-themetypographyfont-family'Noto Serif SC', Georgia, serif
      --font-text-sizetypographyfont-size18px
      --font-text-themetypographyfont-family'Noto Serif SC', Georgia, serif
      --font-ui-largetypographyfont-size18px
      --font-ui-mediumtypographyfont-size18px
      --font-ui-smalltypographyfont-size18px
      --heading-spacingtypographylength0
      --line-height-normaltypographyline-height1
      --line-height-tighttypographyline-height1
      --p-spacingtypographylength0

      Value constraints

      These constraints and the in-app AI prompt use the same definitions. Length bounds apply separately to each unit.

      TypeConstraints
      colorColor: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, transparent, or comma-separated rgb()/rgba()/hsl()/hsla(). Normalized to six- or eight-digit hexadecimal, preserving alpha.
      radiusCorner radius: 0 or a nonnegative length. Maximum by unit: 32px / 2rem / 2em.
      lengthLength: 0 or a nonnegative length. Maximum by unit: 256px / 16rem / 16em.
      font-sizeFont size: 0 or a nonnegative length. Maximum by unit: 64px / 4rem / 4em.
      font-weightFont weight: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.
      font-styleFont style: normal, italic, oblique.
      font-familyFont stack: at most 8 installed fonts and 500 characters. Font files are not included or downloaded.
      opacityOpacity: a unitless number from 0 to 1.
      ratioRatio: a unitless number from 0 to 3.
      line-heightLine height: a unitless number from 1 to 3.
      durationDuration: a nonnegative value in ms or s, at most 2000 ms.
      easingEasing: linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(x1, y1, x2, y2). x range: 0–1; y range: -3–3.
      shadowShadow: none or up to 4 layers and 500 characters. Each layer: optional inset, x, y, optional blur, optional spread, color. Maximum absolute length by unit: 256px / 16rem / 16em. Blur must be nonnegative.