General
variables
prefix
$prefix: fi- !default;Description
CSS variable prefix for all custom properties.
Type
String
Used by
- [mixin]
theme-switch-mode - [mixin]
theme-switch-keyframes
rootPrefix
$rootPrefix: --#{$prefix} !default;Description
Root prefix for CSS custom properties (derived from $prefix).
Type
String
Used by
- [function]
fi-var - [function]
fi-var - [mixin]
set-fi-var - [mixin]
set-fi-vars - [mixin]
set-theme-colors - [mixin]
define-theme-vars
header-height
$header-height: 3.5rem !default;Description
Default header height.
Type
Length
admonition-color-map
$admonition-color-map: (
note: (
color: #448aff,
bg-color: rgba(68, 138, 255, 0.1),
),
abstract: (
color: #00b0ff,
bg-color: rgba(0, 176, 255, 0.1),
),
info: (
color: #00b8d4,
bg-color: rgba(0, 184, 212, 0.1),
),
todo: (
color: #5e9aff,
bg-color: rgba(94, 154, 255, 0.1),
),
tip: (
color: #00bfa5,
bg-color: rgba(0, 191, 165, 0.1),
),
success: (
color: #00c853,
bg-color: rgba(0, 200, 83, 0.1),
),
question: (
color: #ffbd67,
bg-color: rgba(255, 190, 0, 0.1),
),
warning: (
color: #ff9100,
bg-color: rgba(255, 145, 0, 0.1),
),
failure: (
color: #ff5252,
bg-color: rgba(255, 82, 82, 0.1),
),
danger: (
color: #ff1744,
bg-color: rgba(255, 23, 68, 0.1),
),
bug: (
color: #f50057,
bg-color: rgba(245, 0, 87, 0.1),
),
example: (
color: #651fff,
bg-color: rgba(101, 31, 255, 0.1),
),
quote: (
color: #9e9e9e,
bg-color: rgba(159, 159, 159, 0.1),
),
) !default;Description
Color map of admonitions.
Type
Map
alert-color-map
$alert-color-map: (
note: (
border-color: #0969da,
color: #0969da,
),
tip: (
border-color: #1a7f37,
color: #1a7f37,
),
important: (
border-color: #8250df,
color: #8250df,
),
warning: (
border-color: #bf8700,
color: #9a6700,
),
caution: (
border-color: #cf222e,
color: #d1242f,
),
) !default;Description
Color map of GitHub-style alerts (light theme).
Type
Map
alert-color-map-dark
$alert-color-map-dark: (
note: (
border-color: #316dca,
color: #478be6,
),
tip: (
border-color: #347d39,
color: #57ab5a,
),
important: (
border-color: #8256d0,
color: #986ee2,
),
warning: (
border-color: #966600,
color: #c69026,
),
caution: (
border-color: #c93c37,
color: #e5534b,
),
) !default;Description
Color map of GitHub-style alerts (dark theme).
Type
Map
chroma-lexers
$chroma-lexers: (
"🔥": "Mojo",
"1s": "OnesEnterprise",
"1s\\:enterprise": "OnesEnterprise",
"abap": "ABAP",
"abl": "OpenEdge ABL",
"abnf": "ABNF",
"aconf": "ApacheConf",
"actionscript": "ActionScript",
"actionscript3": "ActionScript 3",
"ada": "Ada",
"ada2005": "Ada",
"ada95": "Ada",
"agda": "Agda",
"ahk": "AutoHotkey",
"al": "AL",
"alloy": "Alloy",
"ampl": "AMPL",
"ansible": "YAML+Jinja",
"antlr": "ANTLR",
"apache": "ApacheConf",
"apacheconf": "ApacheConf",
"apl": "APL",
"applescript": "AppleScript",
"aql": "ArangoDB AQL",
"arduino": "Arduino",
"arexx": "Rexx",
"armasm": "ArmAsm",
"art": "Arturo",
"arturo": "Arturo",
"as": "ActionScript",
"as3": "ActionScript 3",
"asm": "GAS",
"astro": "Astro",
"atl": "ATL",
"autohotkey": "AutoHotkey",
"autoit": "AutoIt",
"awk": "Awk",
"b3d": "BlitzBasic",
"ballerina": "Ballerina",
"bash": "Bash",
"bash-session": "Bash Session",
"basic": "QBasic",
"bat": "Batchfile",
"batch": "Batchfile",
"beef": "Beef",
"bf": "Brainfuck",
"bib": "BibTeX",
"bibtex": "BibTeX",
"bicep": "Bicep",
"bind": "Dns",
"blitzbasic": "BlitzBasic",
"bnf": "BNF",
"bplus": "BlitzBasic",
"bqn": "BQN",
"brainfuck": "Brainfuck",
"bsdmake": "Makefile",
"c": "C",
"c\\#": "C#",
"c\\+\\+": "C++",
"c3": "C3",
"caddy": "Caddyfile",
"caddy-d": "Caddyfile Directives",
"caddyfile": "Caddyfile",
"caddyfile-d": "Caddyfile Directives",
"caddyfile-directives": "Caddyfile Directives",
"capnp": "Cap'n Proto",
"cassandra": "Cassandra CQL",
"cassette": "VHS",
"ceylon": "Ceylon",
"cf3": "CFEngine3",
"cfengine3": "CFEngine3",
"cfg": "INI",
"cfs": "Cfstatement",
"chai": "ChaiScript",
"chaiscript": "ChaiScript",
"chapel": "Chapel",
"cheetah": "Cheetah",
"chpl": "Chapel",
"cl": "Common Lisp",
"clj": "Clojure",
"clojure": "Clojure",
"cmake": "CMake",
"cobol": "COBOL",
"coffee": "CoffeeScript",
"coffee-script": "CoffeeScript",
"coffeescript": "CoffeeScript",
"common-lisp": "Common Lisp",
"console": "Bash Session",
"containerfile": "Docker",
"coq": "Coq",
"core": "Core",
"cpp": "C++",
"cql": "Cassandra CQL",
"cr": "Crystal",
"crystal": "Crystal",
"csh": "Tcsh",
"csharp": "C#",
"css": "CSS",
"csv": "CSV",
"cucumber": "Gherkin",
"cue": "CUE",
"cython": "Cython",
"d": "D",
"dart": "Dart",
"dax": "Dax",
"desktop": "Desktop file",
"desktop_entry": "Desktop file",
"devicetree": "Devicetree",
"diff": "Diff",
"django": "Django/Jinja",
"docker": "Docker",
"dockerfile": "Docker",
"dosbatch": "Batchfile",
"dosini": "INI",
"dtd": "DTD",
"dts": "Devicetree",
"duby": "Ruby",
"dylan": "Dylan",
"ebnf": "EBNF",
"edn": "Clojure",
"elisp": "EmacsLisp",
"elixir": "Elixir",
"elm": "Elm",
"emacs": "EmacsLisp",
"emacs-lisp": "EmacsLisp",
"erb": "ERB",
"erlang": "Erlang",
"ex": "Elixir",
"exs": "Elixir",
"f90": "Fortran",
"factor": "Factor",
"fennel": "Fennel",
"fish": "Fish",
"fishshell": "Fish",
"fnl": "Fennel",
"forth": "Forth",
"fortran": "Fortran",
"fortranfixed": "FortranFixed",
"fsharp": "FSharp",
"gas": "GAS",
"gawk": "Awk",
"gd": "GDScript",
"gd3": "GDScript3",
"gdscript": "GDScript",
"gdscript3": "GDScript3",
"gemfile-lock": "Gemfile.lock",
"gemfilelock": "Gemfile.lock",
"gemini": "Gemtext",
"gemtext": "Gemtext",
"genshi": "Genshi",
"genshitext": "Genshi Text",
"gherkin": "Gherkin",
"gleam": "Gleam",
"glsl": "GLSL",
"gmi": "Gemtext",
"gmni": "Gemtext",
"gnuplot": "Gnuplot",
"go": "Go",
"go-template": "Go Template",
"golang": "Go",
"gql": "GraphQL",
"graphql": "GraphQL",
"graphqls": "GraphQL",
"groff": "Groff",
"groovy": "Groovy",
"gsed": "Sed",
"handlebars": "Handlebars",
"hare": "Hare",
"haskell": "Haskell",
"haxe": "Haxe",
"hbs": "Handlebars",
"hcl": "Terraform",
"hexdump": "Hexdump",
"hlb": "HLB",
"hlsl": "HLSL",
"holyc": "HolyC",
"hs": "Haskell",
"html": "HTML",
"html\\+erb": "ERB",
"html\\+genshi": "Genshi HTML",
"html\\+kid": "Genshi HTML",
"html\\+ruby": "ERB",
"http": "HTTP",
"hurl": "Hurl",
"hx": "Haxe",
"hxsl": "Haxe",
"hylang": "Hy",
"hypr": "Hyprlang",
"hyprlang": "Hyprlang",
"idr": "Idris",
"idris": "Idris",
"igor": "Igor",
"igorpro": "Igor",
"ini": "INI",
"io": "Io",
"iscdhcpd": "ISCdhcpd",
"j": "J",
"janet": "Janet",
"java": "Java",
"java-properties": "Properties",
"javascript": "JavaScript",
"jinja": "Django/Jinja",
"jl": "Julia",
"jq": "JQ",
"js": "JavaScript",
"json": "JSON",
"jsonata": "JSONata",
"jsonl": "JSON",
"jsonnet": "Jsonnet",
"jsx": "React",
"julia": "Julia",
"jungle": "Jungle",
"kak": "Kakoune",
"kakoune": "Kakoune",
"kakrc": "Kakoune",
"kakscript": "Kakoune",
"kdl": "KDL",
"kid": "Genshi",
"kotlin": "Kotlin",
"ksh": "Bash",
"lateralus": "Lateralus",
"latex": "TeX",
"lean": "Lean4",
"lean4": "Lean4",
"lighttpd": "Lighttpd configuration file",
"lighty": "Lighttpd configuration file",
"lilypond": "LilyPond",
"lisp": "Common Lisp",
"llvm": "LLVM",
"ltl": "Lateralus",
"lua": "Lua",
"luau": "Luau",
"m2": "Modula-2",
"make": "Makefile",
"makefile": "Makefile",
"mako": "Mako",
"man": "Groff",
"mariadb": "MySQL",
"mason": "Mason",
"materialize": "Materialize SQL dialect",
"mathematica": "Mathematica",
"matlab": "Matlab",
"mawk": "Awk",
"mbt": "MoonBit",
"mcf": "MCFunction",
"mcfunction": "MCFunction",
"md": "Markdown",
"meson": "Meson",
"meson\\.build": "Meson",
"mess": "Markless",
"metal": "Metal",
"mf": "Makefile",
"minizinc": "MiniZinc",
"mkd": "Markdown",
"mlir": "MLIR",
"mma": "Mathematica",
"modelica": "Modelica",
"modula2": "Modula-2",
"mojo": "Mojo",
"monkeyc": "MonkeyC",
"moon": "MoonScript",
"moonbit": "MoonBit",
"moonscript": "MoonScript",
"morrowind": "MorrowindScript",
"mwscript": "MorrowindScript",
"myghty": "Myghty",
"mysql": "MySQL",
"mzn": "MiniZinc",
"mzsql": "Materialize SQL dialect",
"nasm": "NASM",
"natural": "Natural",
"nawk": "Awk",
"nb": "Mathematica",
"ndisasm": "NDISASM",
"newspeak": "Newspeak",
"ng2": "Angular2",
"nginx": "Nginx configuration file",
"nim": "Nim",
"nimrod": "Nim",
"nix": "Nix",
"nixos": "Nix",
"no-highlight": "Plaintext",
"nroff": "Groff",
"nsh": "NSIS",
"nsi": "NSIS",
"nsis": "NSIS",
"nu": "Nu",
"obj-c": "Objective-C",
"objc": "Objective-C",
"objective-c": "Objective-C",
"objectivec": "Objective-C",
"objectpascal": "ObjectPascal",
"ocaml": "OCaml",
"octave": "Octave",
"odin": "Odin",
"ones": "OnesEnterprise",
"onesenterprise": "OnesEnterprise",
"openedge": "OpenEdge ABL",
"openedgeabl": "OpenEdge ABL",
"openscad": "OpenSCAD",
"org": "Org Mode",
"orgmode": "Org Mode",
"pacmanconf": "PacmanConf",
"perl": "Perl",
"perl6": "Raku",
"php": "PHP",
"php3": "PHP",
"php4": "PHP",
"php5": "PHP",
"phtml": "PHTML",
"pig": "Pig",
"pkgconfig": "PkgConfig",
"pl": "Perl",
"pl6": "Raku",
"plain": "Plaintext",
"plc": "Plutus Core",
"plpgsql": "PL/pgSQL",
"plutus-core": "Plutus Core",
"po": "Gettext",
"pony": "Pony",
"posh": "PowerShell",
"postgres": "PostgreSQL SQL dialect",
"postgresql": "PostgreSQL SQL dialect",
"postscr": "PostScript",
"postscript": "PostScript",
"pot": "Gettext",
"pov": "POVRay",
"powerquery": "PowerQuery",
"powershell": "PowerShell",
"pq": "PowerQuery",
"progress": "OpenEdge ABL",
"prolog": "Prolog",
"promela": "Promela",
"promql": "PromQL",
"proto": "Protocol Buffer",
"protobuf": "Protocol Buffer",
"prql": "PRQL",
"ps1": "PowerShell",
"psd1": "PowerShell",
"psl": "PSL",
"psm1": "PowerShell",
"puppet": "Puppet",
"pwsh": "PowerShell",
"py": "Python",
"py2": "Python 2",
"py3": "Python",
"pyrex": "Cython",
"python": "Python",
"python2": "Python 2",
"python3": "Python",
"pyx": "Cython",
"qbasic": "QBasic",
"qbs": "QML",
"qml": "QML",
"r": "R",
"racket": "Racket",
"ragel": "Ragel",
"raku": "Raku",
"rb": "Ruby",
"react": "React",
"reason": "ReasonML",
"reasonml": "ReasonML",
"registry": "Reg",
"rego": "Rego",
"rest": "ReStructuredText",
"restructuredtext": "ReStructuredText",
"rexx": "Rexx",
"rgbasm": "RGBDS Assembly",
"rhtml": "ERB",
"ring": "Ring",
"rkt": "Racket",
"rs": "Rust",
"rst": "ReStructuredText",
"ruby": "Ruby",
"rust": "Rust",
"s": "R",
"sage": "Python",
"salt": "YAML+Jinja",
"sas": "SAS",
"sass": "Sass",
"scala": "Scala",
"scdoc": "Scdoc",
"scheme": "Scheme",
"scilab": "Scilab",
"scm": "Scheme",
"scss": "SCSS",
"sed": "Sed",
"sh": "Bash",
"shell": "Bash",
"shell-session": "Bash Session",
"sieve": "Sieve",
"sls": "YAML+Jinja",
"smali": "Smali",
"smalltalk": "Smalltalk",
"smarty": "Smarty",
"sml": "Standard ML",
"snbt": "SNBT",
"snobol": "Snobol",
"sol": "Solidity",
"solidity": "Solidity",
"sp": "SourcePawn",
"spade": "Spade",
"sparql": "SPARQL",
"spec": "RPMSpec",
"spitfire": "Cheetah",
"splus": "R",
"sql": "SQL",
"sqlrpgle": "RPGLE",
"squeak": "Smalltalk",
"squid": "SquidConf",
"squid\\.conf": "SquidConf",
"squidconf": "SquidConf",
"ssed": "Sed",
"st": "Smalltalk",
"starlark": "Python",
"stylus": "Stylus",
"sv": "Systemverilog",
"svelte": "Svelte",
"swift": "Swift",
"systemd": "SYSTEMD",
"systemverilog": "Systemverilog",
"t-sql": "Transact-SQL",
"tablegen": "TableGen",
"tal": "Tal",
"tape": "VHS",
"tasm": "TASM",
"tcl": "Tcl",
"tcsh": "Tcsh",
"templ": "Templ",
"termcap": "Termcap",
"terminfo": "Terminfo",
"terraform": "Terraform",
"tex": "TeX",
"text": "Plaintext",
"tf": "Terraform",
"thrift": "Thrift",
"toml": "TOML",
"tradingview": "TradingView",
"ts": "TypeScript",
"tsql": "Transact-SQL",
"tsx": "TypeScript",
"turing": "Turing",
"turtle": "Turtle",
"tv": "TradingView",
"twig": "Twig",
"txtpb": "Protocol Buffer Text Format",
"typescript": "TypeScript",
"typoscript": "TypoScript",
"typoscriptcssdata": "TypoScriptCssData",
"typoscripthtmldata": "TypoScriptHtmlData",
"typst": "Typst",
"udiff": "Diff",
"uxntal": "Tal",
"v": "V",
"vala": "Vala",
"vapi": "Vala",
"vb\\.net": "VB.net",
"vbnet": "VB.net",
"verilog": "Verilog",
"vhdl": "VHDL",
"vhs": "VHS",
"vim": "VimL",
"vlang": "V",
"vsh": "V shell",
"vshell": "V shell",
"vtt": "WebVTT",
"vue": "Vue",
"vuejs": "Vue",
"wast": "WebAssembly Text Format",
"wat": "WebAssembly Text Format",
"wgsl": "WebGPU Shading Language",
"whiley": "Whiley",
"winbatch": "Batchfile",
"xml": "XML",
"xml\\+genshi": "Genshi",
"xml\\+kid": "Genshi",
"xorg\\.conf": "Xorg",
"yaml": "YAML",
"yaml\\+jinja": "YAML+Jinja",
"yang": "YANG",
"z80": "Z80 Assembly",
"zed": "Zed",
"zig": "Zig",
"zone": "Dns",
"zsh": "Bash",
"µcad": "Microcad",
// Custom code type
"go-html-template": "Go HTML Template",
"markdown": "Markdown",
"yml": "YAML"
) !default;Description
Map of code identifiers/languages to Chroma supported languages. This file is auto-generated by pnpm gen:lexers, do not edit manually. See: https://github.com/hugo-fixit/FixIt/tree/main/packages/chroma-lexers
theme-colors
$theme-colors: (
'primary': #1677ff,
'secondary': #8b949e,
'success': #52c41a,
'info': #13c2c2,
'warning': #faad14,
'danger': #ff4d4f
) !default;Description
Theme semantic color tokens.
Type
Map
Used by
- [mixin]
set-theme-colors
breakpoints
$breakpoints: (
'xs': null,
'sm': 680px,
'md': 960px,
'lg': 1200px,
'xl': 1440px,
) !default;Description
Responsive breakpoints map for the media mixin.
Type
Map
Used by
theme-switch-animation-duration
$theme-switch-animation-duration: 0.5s !default;Description
Duration of the theme-switch icon animation.
Type
Time
Used by
- [mixin]
theme-switch-mode
theme-switch-animation-easing
$theme-switch-animation-easing: cubic-bezier(0.22, 1, 0.36, 1) !default;Description
Easing function for the theme-switch icon animation.
Type
String
Used by
- [mixin]
theme-switch-mode
z-indexes
$z-indexes: (
"hide": -1,
"auto": auto,
"base": 1,
"loading": 10,
"sticky": 100,
"fixed": 200
) !default;Description
Z-index scale for consistent layering across the theme.
Type
Map
Used by
- [mixin]
z-index
functions
fi-rgba
@function fi-rgba($color, $alpha: 1) { ... }Description
Build an rgba-like color from any source color expression.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Source color, supports CSS vars such as fi-var(secondary). | Color or String | — none |
$alpha | Alpha channel value in range 0..1. | Number | 1 |
Example
color: fi-rgba(fi-var(secondary), 0.2);fi-var
@function fi-var($name, $fallback) { ... }Description
Get CSS variable with prefix
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | CSS variable name (without prefix) | String | — none |
$fallback | Optional fallback value | Any | — none |
Returns
String —Complete CSS variable reference
Example
color: fi-var(global-font-color);
background: fi-var(custom-bg, #fff);Requires
- [variable]
rootPrefix - [variable]
rootPrefix
Used by
- [mixin]
box-shadow - [mixin]
inline-code - [mixin]
inline-code - [mixin]
inline-code - [mixin]
inline-code - [mixin]
inline-code - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
loading - [mixin]
sticky-top-offset - [mixin]
sticky-top-offset - [mixin]
sticky-top-offset
mixins
admonition
@mixin admonition($type, $color, $bg, $bg-collapsed: color.adjust($bg, $alpha: 0.15)) { ... }Description
Define an admonition type with CSS custom properties
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$type | Admonition type name (empty string for default type) | String | — none |
$color | Text/border color | Color | — none |
$bg | Background color | Color | — none |
$bg-collapsed | Collapsed title background color | Color | color.adjust($bg, $alpha: 0.15) |
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));Requires
- [mixin]
set-fi-vars - [mixin]
set-fi-vars
bold-dark
@mixin bold-dark($color) { ... }Description
Make text bold and apply an extra text color in dark mode. The light theme keeps its original inherited color.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Bold text color used in dark mode | Color | — none |
border-radius
@mixin border-radius($value, $radius) { ... }Description
Mixin to set border-radius
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$value | The value of the border-radius, position (top, bottom, start, end) or keyword (full) | String or Number or List | — none |
$radius | The radius of the border (only for position) | Number | — none |
Example
@include border-radius;
@include border-radius(full);
@include border-radius(top);
@include border-radius(start);
@include border-radius(top, 10px);
@include border-radius(10px 20px 10px 20px);Used by
- [mixin]
inline-code - [mixin]
link-guard-content - [mixin]
link-guard-content - [mixin]
link-guard-content
box-shadow
@mixin box-shadow($when, $shadow) { ... }Description
Mixin to apply box-shadow with timing control
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$when | When to show shadow: always | hover | never (default: always) | String | — none |
$shadow | The box-shadow value | List | — none |
Example
@include box-shadow;
@include box-shadow(hover);
@include box-shadow(never);
@include box-shadow(always, 0 4px 8px rgba(0, 0, 0, 0.15));Requires
- [function]
fi-var
overflow-wrap
@mixin overflow-wrap($value) { ... }Description
Apply word-wrap and overflow-wrap for cross-browser compatibility. TODO Superseded by text-wrap: wrap; in modern browsers.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$value | Wrap value (e.g. | String | — none |
Used by
- [mixin]
inline-code
scroll-state-query
@mixin scroll-state-query($container-name, $container-condition, $fallback-selector) { ... }Description
Apply styles only when scroll-state container queries are supported. Unsupported browsers skip the container branch, and can optionally reuse the same styles through a fallback selector.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$container-name | Optional container name | String or Null | — none |
$container-condition | Container query condition (without outer parentheses) | String | — none |
$fallback-selector | Optional selector used as a fallback | String or Null | — none |
Example
@include scroll-state-query('scroller', 'scroll-state(scrollable: top)') {
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
@include scroll-state-query('scroller', 'scroll-state(scrollable: top)', '&') {
backdrop-filter: saturate(1.2) blur(10px);
}focus-visible-ring
@mixin focus-visible-ring($size: $size: 1.3em, $offset: $offset: 0.2rem) { ... }Description
Apply a focus-visible ring outline using a pseudo-element.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$size | Size of the focus ring | Length | $size: 1.3em |
$offset | Offset from the element | Length | $offset: 0.2rem |
inline-code
@mixin inline-code() { ... }Description
Shared inline code styles using theme CSS variables.
Parameters
None.
Requires
- [mixin]
border-radius - [mixin]
overflow-wrap - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var
link-guard-content
@mixin link-guard-content() { ... }Description
Shared styles for link guard content blocks. Keep this as the single source of truth for both link page card and guard dialog body.
Parameters
None.
Requires
- [mixin]
border-radius - [mixin]
border-radius - [mixin]
border-radius - [mixin]
media - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var - [function]
fi-var
link
@mixin link($light, $dark, $decoration) { ... }Description
Link mixin
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$light | use global link color | Boolean | — none |
$dark | use global link color dark | Boolean | — none |
$decoration | text-decoration, default none | String | — none |
loading
@mixin loading() { ... }Description
Loading pseudo-element styles for async content.
Parameters
None.
Requires
media
@mixin media($target, $direction) { ... }Description
Apply styles within a named media target.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$target | Target name: xs | sm | md | lg | xl | print | reduce-motion | String | — none |
$direction | Range direction: only | up | down [default: only] | String | — none |
Example
// xs: < 680px
@include media('xs') { ... }
// sm: 680px – 959.9px
@include media('sm') { ... }
// md and above: ≥ 960px
@include media('md', 'up') { ... }
// lg and below: ≤ 1199.9px
@include media('lg', 'down') { ... }
// print media
@include media('print') { ... }
// reduced motion
@include media('reduce-motion') { ... }Requires
- [variable]
breakpoints - [variable]
breakpoints
Used by
- [mixin]
link-guard-content - [mixin]
page-style - [mixin]
page-style - [mixin]
page-style - [mixin]
page-style - [mixin]
page-style - [mixin]
sticky-top-offset - [mixin]
sticky-top-offset - [mixin]
sticky-top-offset - [mixin]
sticky-top-offset
page-style
@mixin page-style($variant) { ... }Description
Page style helper for setting responsive content width.
This mixin has two modes: 1) Default mode (no arguments): emits the base page-style rules for all built-in targets. 2) Variant mode (pass $variant): emits rules under [data-page-style='$variant'] for the same targets.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$variant | Variant name (e.g. wide/narrow/custom). When null, emit defaults. | String or Null | — none |
Example
// Theme internal: emit default rules
@include page-style;
// Theme internal: emit a built-in variant
@include page-style('wide') { ... }
@include page-style('narrow') { ... }
// User custom: add a custom variant without caring about internal selectors
@include page-style('custom') {
@include media('xl') { width: ROUND(70%, 2px); }
}Requires
scrollbar-width
@mixin scrollbar-width($width: $width: thin, $widthLegacy: $widthLegacy: 12px) { ... }Description
Set scrollbar width CSS custom properties.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$width | Scrollbar width value | String | $width: thin |
$widthLegacy | Legacy scrollbar width | Length | $widthLegacy: 12px |
Requires
- [mixin]
set-fi-vars
sticky-top-offset
@mixin sticky-top-offset($transition) { ... }Description
Apply the shared sticky top offset used by TOC, collections, and code headers.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$transition | Whether to include the transition for top changes (default: true). Top offset rules:
| Boolean | — none |
Requires
task-icon
@mixin task-icon($color) { ... }Description
Set task list icon color and allow custom styles via @content
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Icon color (optional) Usage: @include task-icon(fi-var(secondary)) { opacity: 0.8; } | Color or Null | — none |
Requires
- [mixin]
set-fi-var
task-text
@mixin task-text($color) { ... }Description
Set task list text color and allow custom styles via @content
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Text color (optional) Usage: @include task-text(fi-var(secondary)) { text-decoration: line-through fi-var(secondary); } | Color or Null | — none |
Requires
- [mixin]
set-fi-var
theme-switch-mode
@mixin theme-switch-mode($mode, $icon) { ... }Description
Bind a theme mode selector to an icon glyph and its matching animation.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$mode | Theme mode name: auto | light | dark | String | — none |
$icon | Optional Font Awesome glyph code assigned to --fa | String or Null | — none |
Example
@include theme-switch-mode('auto');
@include theme-switch-mode('light', '\f185');Requires
- [variable]
prefix - [variable]
theme-switch-animation-duration - [variable]
theme-switch-animation-easing
theme-switch-keyframes
@mixin theme-switch-keyframes($name, $from-rotate, $from-scale, $from-opacity, $mid-step, $mid-rotate, $mid-scale) { ... }Description
Generate one theme-switch keyframes block from a compact parameter list. The final state is intentionally shared so all modes settle on the same resting pose.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | Animation suffix used in the generated keyframes name | String | — none |
$from-rotate | Initial rotation angle | Angle | — none |
$from-scale | Initial icon scale | Number | — none |
$from-opacity | Initial icon opacity | Number | — none |
$mid-step | Intermediate keyframe percentage such as 55% or 60% | String | — none |
$mid-rotate | Intermediate rotation angle | Angle | — none |
$mid-scale | Intermediate icon scale | Number | — none |
Requires
- [variable]
prefix
set-fi-var
@mixin set-fi-var($name, $value) { ... }Description
Set a single CSS variable
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | CSS variable name (without prefix) | String | — none |
$value | Variable value | Any | — none |
Example
@include set-fi-var(custom-color, #ff0000);Requires
- [variable]
rootPrefix
Used by
set-fi-vars
@mixin set-fi-vars($vars) { ... }Description
Batch set CSS variables
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$vars | Variable map, key is CSS variable name (without prefix), value is variable value | Map | — none |
Example
@include set-fi-vars((
custom-color: #ff0000,
custom-bg: #00ff00,
));Requires
- [variable]
rootPrefix
Used by
- [mixin]
admonition - [mixin]
admonition - [mixin]
scrollbar-width
light-mode
@mixin light-mode() { ... }Description
Light mode content wrapper
- Explicit light mode: [data-theme-mode='light']
- Auto mode with system light preference: [data-theme-mode='auto'] + prefers-color-scheme
Parameters
None.
dark-mode
@mixin dark-mode() { ... }Description
Dark mode content wrapper
- Explicit dark mode: [data-theme-mode='dark']
- Auto mode with system dark preference: [data-theme-mode='auto'] + prefers-color-scheme
Parameters
None.
set-theme-colors
@mixin set-theme-colors() { ... }Description
Batch set theme color variables using global $theme-colors Values are emitted via light-dark() and switched by CSS color-scheme.
Parameters
None.
Requires
- [variable]
theme-colors - [variable]
rootPrefix
define-theme-vars
@mixin define-theme-vars($vars) { ... }Description
Define dual-theme variables with light-dark()
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$vars | Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val) | Map | — none |
Example
@include define-theme-vars((
global-background-color: (light: $global-background-color, dark: $global-background-color-dark)
));Requires
- [variable]
rootPrefix
z-index
@mixin z-index($key, $diff) { ... }Description
Mixin to set z-index
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$key | The key of the z-index map or a raw number | String or Number | — none |
$diff | The difference to add to the z-index | Number | — none |
Example
@include z-index(base);
@include z-index(base, 1);Requires
- [variable]
z-indexes
Used by
- [mixin]
loading