Stylesheet Generrrat'r

This interactive tool may help ye t' generate yer own color variant stylesheet.

Show usage instruct'ns

T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.

Th' graph be interactive an' reflects th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.

Th' arrowed lines reflect how colors be inherited through different parts o' th' theme if th' descendant isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.

T' better understand this, select th' neon variant an' modify th' different head'n colors. There, colors fer th' head'ns h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.

Once you’ve changed a color, th' variant selector will show a “My custom variant” entry an' yer changes be stored 'n th' browser. Ye can browse t' other planks an' even close th' browser without los'n yer changes.

Once ye be satisfied, ye can download th' new variants file an' copy it into yer site’s assets/css directory.

Opt'n Afterwards, ye have t' adjust th' themeVariant opt'n 'n yer hugo.toml t' yer chosen file name. For example, if yer new variants file be named theme-my-custom-variant.css, ye have t' set themeVariant='my-custom-variant' t' use it.

See th' docs fer further configurat'n opt'ns.

Avast

Th' CODE-theme parameter can be changed 'n th' generator but th' change will not be reflected dynamically 'n th' plank preview.

--- theme: '' --- flowchart LR subgraph menu["menu"] direction TB subgraph menuheader["header"] direction LR MENU-BORDER-color:::MENU-BORDER-color MENU-HEADER-BG-color:::MENU-HEADER-BG-color --> MENU-TOPBAR-BORDER-color:::MENU-TOPBAR-BORDER-color MENU-TOPBAR-SEPARATOR-color:::MENU-TOPBAR-SEPARATOR-color MENU-HEADER-color:::MENU-HEADER-color MENU-HEADER-BG-color:::MENU-HEADER-BG-color MENU-HEADER-BG-color:::MENU-HEADER-BG-color --> MENU-HEADER-BORDER-color:::MENU-HEADER-BORDER-color MENU-SEARCH-color:::MENU-SEARCH-color MENU-SEARCH-BG-color:::MENU-SEARCH-BG-color MENU-SEARCH-BG-color:::MENU-SEARCH-BG-color --> MENU-SEARCH-BORDER-color:::MENU-SEARCH-BORDER-color end subgraph menuhome["home"] direction LR MENU-HOME-LINK-color:::MENU-HOME-LINK-color MENU-HOME-LINK-HOVER-color:::MENU-HOME-LINK-HOVER-color MENU-HOME-LINK-color:::MENU-HOME-LINK-color --> MENU-HOME-TOP-SEPARATOR-color:::MENU-HOME-TOP-SEPARATOR-color MENU-HOME-LINK-color:::MENU-HOME-LINK-color --> MENU-HOME-SEPARATOR-color:::MENU-HOME-SEPARATOR-color MENU-HOME-BOTTOM-SEPARATOR-color:::MENU-HOME-BOTTOM-SEPARATOR-color end subgraph menusections["sections"] direction LR MENU-SECTIONS-BG-color:::MENU-SECTIONS-BG-color MENU-SECTIONS-ACTIVE-BG-color:::MENU-SECTIONS-ACTIVE-BG-color MENU-SECTIONS-LINK-color:::MENU-SECTIONS-LINK-color MENU-SECTIONS-LINK-color:::MENU-SECTIONS-LINK-color --> MENU-SECTIONS-LINK-HOVER-color:::MENU-SECTIONS-LINK-HOVER-color MENU-SECTION-ACTIVE-CATEGORY-color:::MENU-SECTION-ACTIVE-CATEGORY-color MENU-SECTION-ACTIVE-CATEGORY-BG-color:::MENU-SECTION-ACTIVE-CATEGORY-BG-color MENU-SECTION-ACTIVE-CATEGORY-BORDER-color:::MENU-SECTION-ACTIVE-CATEGORY-BORDER-color MENU-SECTION-SEPARATOR-color:::MENU-SECTION-SEPARATOR-color MENU-VISITED-color:::MENU-VISITED-color end end subgraph maincontent["content"] direction TB PRIMARY-color:::PRIMARY-color MAIN-LINK-color:::MAIN-LINK-color --> SECONDARY-color:::SECONDARY-color ACCENT-color:::ACCENT-color MAIN-TOPBAR-BORDER-color:::MAIN-TOPBAR-BORDER-color SECONDARY-color:::SECONDARY-color --> MAIN-LINK-color:::MAIN-LINK-color MAIN-LINK-color:::MAIN-LINK-color --> MAIN-LINK-HOVER-color:::MAIN-LINK-HOVER-color MAIN-BG-color:::MAIN-BG-color PRIMARY-color:::PRIMARY-color --> TAG-BG-color:::TAG-BG-color MAIN-TEXT-color:::MAIN-TEXT-color MAIN-font:::MAIN-font subgraph mainheadings["headings"] direction LR MAIN-TITLES-TEXT-color:::MAIN-TITLES-TEXT-color MAIN-TITLES-H1-TEXT-color:::MAIN-TITLES-H1-TEXT-color MAIN-TITLES-TEXT-color:::MAIN-TITLES-TEXT-color --> MAIN-TITLES-H2-TEXT-color:::MAIN-TITLES-H2-TEXT-color MAIN-TITLES-H2-TEXT-color:::MAIN-TITLES-H2-TEXT-color --> MAIN-TITLES-H3-TEXT-color:::MAIN-TITLES-H3-TEXT-color MAIN-TITLES-H3-TEXT-color:::MAIN-TITLES-H3-TEXT-color --> MAIN-TITLES-H4-TEXT-color:::MAIN-TITLES-H4-TEXT-color MAIN-TITLES-H4-TEXT-color:::MAIN-TITLES-H4-TEXT-color --> MAIN-TITLES-H5-TEXT-color:::MAIN-TITLES-H5-TEXT-color MAIN-TITLES-H5-TEXT-color:::MAIN-TITLES-H5-TEXT-color --> MAIN-TITLES-H6-TEXT-color:::MAIN-TITLES-H6-TEXT-color MAIN-TITLES-font:::MAIN-TITLES-font MAIN-TITLES-H1-font:::MAIN-TITLES-H1-font MAIN-TITLES-font:::MAIN-TITLES-font --> MAIN-TITLES-H2-font:::MAIN-TITLES-H2-font MAIN-TITLES-H2-font:::MAIN-TITLES-H2-font --> MAIN-TITLES-H3-font:::MAIN-TITLES-H3-font MAIN-TITLES-H3-font:::MAIN-TITLES-H3-font --> MAIN-TITLES-H4-font:::MAIN-TITLES-H4-font MAIN-TITLES-H4-font:::MAIN-TITLES-H4-font --> MAIN-TITLES-H5-font:::MAIN-TITLES-H5-font MAIN-TITLES-H5-font:::MAIN-TITLES-H5-font --> MAIN-TITLES-H6-font:::MAIN-TITLES-H6-font end subgraph code["code"] direction TB CODE-theme:::CODE-theme CODE-font:::CODE-font subgraph inlinecode["inline code"] direction LR CODE-INLINE-color:::CODE-INLINE-color CODE-INLINE-BG-color:::CODE-INLINE-BG-color CODE-INLINE-BORDER-color:::CODE-INLINE-BORDER-color end subgraph blockcode["code blocks"] direction LR CODE-BLOCK-color:::CODE-BLOCK-color CODE-BLOCK-BG-color:::CODE-BLOCK-BG-color CODE-BLOCK-BG-color:::CODE-BLOCK-BG-color --> CODE-BLOCK-BORDER-color:::CODE-BLOCK-BORDER-color end end subgraph thirdparty["3rd party"] direction LR BROWSER-theme:::BROWSER-theme MERMAID-theme:::MERMAID-theme OPENAPI-theme:::OPENAPI-theme OPENAPI-CODE-theme:::OPENAPI-CODE-theme end subgraph coloredboxes["colored boxes"] direction LR BOX-CAPTION-color:::BOX-CAPTION-color BOX-BG-color:::BOX-BG-color BOX-TEXT-color:::BOX-TEXT-color BOX-BLUE-color:::BOX-BLUE-color BOX-BLUE-color:::BOX-BLUE-color --> BOX-INFO-color:::BOX-INFO-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-BLUE-TEXT-color:::BOX-BLUE-TEXT-color BOX-BLUE-TEXT-color:::BOX-BLUE-TEXT-color --> BOX-INFO-TEXT-color:::BOX-INFO-TEXT-color BOX-CYAN-color:::BOX-CYAN-color BOX-CYAN-color:::BOX-CYAN-color --> BOX-IMPORTANT-color:::BOX-IMPORTANT-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-CYAN-TEXT-color:::BOX-CYAN-TEXT-color BOX-CYAN-TEXT-color:::BOX-CYAN-TEXT-color --> BOX-IMPORTANT-TEXT-color:::BOX-IMPORTANT-TEXT-color BOX-GREEN-color:::BOX-GREEN-color BOX-GREEN-color:::BOX-GREEN-color --> BOX-TIP-color:::BOX-TIP-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-GREEN-TEXT-color:::BOX-GREEN-TEXT-color BOX-GREEN-TEXT-color:::BOX-GREEN-TEXT-color --> BOX-TIP-TEXT-color:::BOX-TIP-TEXT-color BOX-GREY-color:::BOX-GREY-color BOX-GREY-color:::BOX-GREY-color --> BOX-NEUTRAL-color:::BOX-NEUTRAL-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-GREY-TEXT-color:::BOX-GREY-TEXT-color BOX-GREY-TEXT-color:::BOX-GREY-TEXT-color --> BOX-NEUTRAL-TEXT-color:::BOX-NEUTRAL-TEXT-color BOX-MAGENTA-color:::BOX-MAGENTA-color BOX-MAGENTA-color:::BOX-MAGENTA-color --> BOX-CAUTION-color:::BOX-CAUTION-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-MAGENTA-TEXT-color:::BOX-MAGENTA-TEXT-color BOX-MAGENTA-TEXT-color:::BOX-MAGENTA-TEXT-color --> BOX-CAUTION-TEXT-color:::BOX-CAUTION-TEXT-color BOX-ORANGE-color:::BOX-ORANGE-color BOX-ORANGE-color:::BOX-ORANGE-color --> BOX-NOTE-color:::BOX-NOTE-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-ORANGE-TEXT-color:::BOX-ORANGE-TEXT-color BOX-ORANGE-TEXT-color:::BOX-ORANGE-TEXT-color --> BOX-NOTE-TEXT-color:::BOX-NOTE-TEXT-color BOX-RED-color:::BOX-RED-color BOX-RED-color:::BOX-RED-color --> BOX-WARNING-color:::BOX-WARNING-color BOX-TEXT-color:::BOX-TEXT-color --> BOX-RED-TEXT-color:::BOX-RED-TEXT-color BOX-RED-TEXT-color:::BOX-RED-TEXT-color --> BOX-WARNING-TEXT-color:::BOX-WARNING-TEXT-color end end MENU-HEADER-BG-color:::MENU-HEADER-BG-color --> PRIMARY-color:::PRIMARY-color MAIN-TEXT-color:::MAIN-TEXT-color --> MAIN-TITLES-TEXT-color:::MAIN-TITLES-TEXT-color MAIN-TEXT-color:::MAIN-TEXT-color --> MAIN-TITLES-H1-TEXT-color:::MAIN-TITLES-H1-TEXT-color MAIN-font:::MAIN-font --> MAIN-TITLES-font:::MAIN-TITLES-font MAIN-font:::MAIN-font --> MAIN-TITLES-H1-font:::MAIN-TITLES-H1-font MENU-SECTIONS-LINK-color:::MENU-SECTIONS-LINK-color --> MENU-HEADER-color:::MENU-HEADER-color PRIMARY-color:::PRIMARY-color --> MENU-HEADER-BG-color:::MENU-HEADER-BG-color MENU-HEADER-BORDER-color:::MENU-HEADER-BORDER-color --> MENU-HOME-BOTTOM-SEPARATOR-color:::MENU-HOME-BOTTOM-SEPARATOR-color MAIN-BG-color:::MAIN-BG-color --> MENU-SECTION-ACTIVE-CATEGORY-BG-color:::MENU-SECTION-ACTIVE-CATEGORY-BG-color SECONDARY-color:::SECONDARY-color --> MENU-VISITED-color:::MENU-VISITED-color MAIN-TEXT-color:::MAIN-TEXT-color --> BOX-TEXT-color:::BOX-TEXT-color click PRIMARY-color variants.changeColor click SECONDARY-color variants.changeColor click ACCENT-color variants.changeColor click MAIN-TOPBAR-BORDER-color variants.changeColor click MAIN-LINK-color variants.changeColor click MAIN-LINK-HOVER-color variants.changeColor click MAIN-BG-color variants.changeColor click TAG-BG-color variants.changeColor click MAIN-TEXT-color variants.changeColor click MAIN-TITLES-TEXT-color variants.changeColor click MAIN-TITLES-H1-TEXT-color variants.changeColor click MAIN-TITLES-H2-TEXT-color variants.changeColor click MAIN-TITLES-H3-TEXT-color variants.changeColor click MAIN-TITLES-H4-TEXT-color variants.changeColor click MAIN-TITLES-H5-TEXT-color variants.changeColor click MAIN-TITLES-H6-TEXT-color variants.changeColor click MAIN-font variants.changeColor click MAIN-TITLES-font variants.changeColor click MAIN-TITLES-H1-font variants.changeColor click MAIN-TITLES-H2-font variants.changeColor click MAIN-TITLES-H3-font variants.changeColor click MAIN-TITLES-H4-font variants.changeColor click MAIN-TITLES-H5-font variants.changeColor click MAIN-TITLES-H6-font variants.changeColor click CODE-theme variants.changeColor click CODE-font variants.changeColor click CODE-BLOCK-color variants.changeColor click CODE-BLOCK-BG-color variants.changeColor click CODE-BLOCK-BORDER-color variants.changeColor click CODE-INLINE-color variants.changeColor click CODE-INLINE-BG-color variants.changeColor click CODE-INLINE-BORDER-color variants.changeColor click BROWSER-theme variants.changeColor click MERMAID-theme variants.changeColor click OPENAPI-theme variants.changeColor click OPENAPI-CODE-theme variants.changeColor click MENU-BORDER-color variants.changeColor click MENU-TOPBAR-BORDER-color variants.changeColor click MENU-TOPBAR-SEPARATOR-color variants.changeColor click MENU-HEADER-color variants.changeColor click MENU-HEADER-BG-color variants.changeColor click MENU-HEADER-BORDER-color variants.changeColor click MENU-SEARCH-color variants.changeColor click MENU-SEARCH-BG-color variants.changeColor click MENU-SEARCH-BORDER-color variants.changeColor click MENU-HOME-LINK-color variants.changeColor click MENU-HOME-LINK-HOVER-color variants.changeColor click MENU-HOME-TOP-SEPARATOR-color variants.changeColor click MENU-HOME-SEPARATOR-color variants.changeColor click MENU-HOME-BOTTOM-SEPARATOR-color variants.changeColor click MENU-SECTIONS-BG-color variants.changeColor click MENU-SECTIONS-ACTIVE-BG-color variants.changeColor click MENU-SECTIONS-LINK-color variants.changeColor click MENU-SECTIONS-LINK-HOVER-color variants.changeColor click MENU-SECTION-ACTIVE-CATEGORY-color variants.changeColor click MENU-SECTION-ACTIVE-CATEGORY-BG-color variants.changeColor click MENU-SECTION-ACTIVE-CATEGORY-BORDER-color variants.changeColor click MENU-SECTION-SEPARATOR-color variants.changeColor click MENU-VISITED-color variants.changeColor click BOX-CAPTION-color variants.changeColor click BOX-BG-color variants.changeColor click BOX-TEXT-color variants.changeColor click BOX-BLUE-color variants.changeColor click BOX-INFO-color variants.changeColor click BOX-BLUE-TEXT-color variants.changeColor click BOX-INFO-TEXT-color variants.changeColor click BOX-CYAN-color variants.changeColor click BOX-IMPORTANT-color variants.changeColor click BOX-CYAN-TEXT-color variants.changeColor click BOX-IMPORTANT-TEXT-color variants.changeColor click BOX-GREEN-color variants.changeColor click BOX-TIP-color variants.changeColor click BOX-GREEN-TEXT-color variants.changeColor click BOX-TIP-TEXT-color variants.changeColor click BOX-GREY-color variants.changeColor click BOX-NEUTRAL-color variants.changeColor click BOX-GREY-TEXT-color variants.changeColor click BOX-NEUTRAL-TEXT-color variants.changeColor click BOX-MAGENTA-color variants.changeColor click BOX-CAUTION-color variants.changeColor click BOX-MAGENTA-TEXT-color variants.changeColor click BOX-CAUTION-TEXT-color variants.changeColor click BOX-ORANGE-color variants.changeColor click BOX-NOTE-color variants.changeColor click BOX-ORANGE-TEXT-color variants.changeColor click BOX-NOTE-TEXT-color variants.changeColor click BOX-RED-color variants.changeColor click BOX-WARNING-color variants.changeColor click BOX-RED-TEXT-color variants.changeColor click BOX-WARNING-TEXT-color variants.changeColor