Custom Themes for mdBook in `theme/css/variables.css`

variables.css

/* Themes */

/*  My favorite theme: https://github.com/rebelot/kanagawa.nvim */
.kanagawa {
    /* Using the Kanagawa color palette */
    --bg: #1F1F28; /* sumiInk1 for Default background */
    --fg: #DCD7BA; /* fujiWhite for Default foreground */

    --sidebar-bg: #2A2A37; /* sumiInk2 for a subtler sidebar background */
    --sidebar-fg: #C8C093; /* oldWhite for Dark foreground in sidebar */
    
    /* Other color assignments based on the palette */
    --sidebar-non-existant: #54546D; /* sumiInk4 */
    --sidebar-active: #FF9E3B; /* roninYellow for Diagnostic Warning */
    --sidebar-spacer: #363646; /* sumiInk3 */

    --scrollbar: var(--sidebar-fg);

    --icons: #7E9CD8; /* #98BB6C;  springGreen for Strings */
    --icons: #54546D; /* sumiInk4 for Darker foreground */
    --icons-hover: #7E9CD8; /* crystalBlue for Functions and Titles */

    --links: #7FB4CA; /* springBlue for Specials and builtin functions */

    --inline-code-color: #E82424; /* samuraiRed for Diagnostic Error */

    --theme-popup-bg: #223249; /* waveBlue1 for Popup background */
    --theme-popup-border: #2D4F67; /* waveBlue2 for Popup selection background */
    --theme-hover: #16161D; /* sumiInk0 for Dark background */

    --quote-bg: #252535; /* winterBlue for Diff Line background */
    --quote-border: #2B3328; /* winterGreen for Diff Add background */

    --table-border-color: #49443C; /* winterYellow for Diff Change background */
    --table-header-bg: #43242B; /* winterRed for Diff Deleted background */
    --table-alternate-bg: #1F1F28; /* sumiInk1 */

    --searchbar-border-color: #658594; /* dragonBlue for Diagnostic Hint */
    --searchbar-bg: #6A9589; /* waveAqua1 for Diagnostic Info */
    --searchbar-fg: #fff;
    --searchbar-shadow-color: #d4c89f;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #888;
    --searchresults-li-bg: #2A2A37; /* sumiInk2 */
    --search-mark-bg: #E6C384; /* carpYellow for Identifiers */
}

/* Override code blocks for Kanagawa theme */
.kanagawa .hljs {
    background: #2A2A37; /* sumiInk2 for a slightly lighter background */
    color: #DCD7BA; /* fujiWhite for Default foreground */
}

.kanagawa .hljs-section {
    color: #7E9CD8; /* crystalBlue for Functions and Titles */
}

/*  added a pink color theme: my daughter asked!
 * https://github.com/rose-pine/neovim
 */

.pinkrose {
    /* Base and Surface colors for background and foreground */
    --bg: #1f1d2e; /* Surface color */
    --fg: #e0def4; /* Text color */

    /* Subtler sidebar to keep focus on the content */
    --sidebar-bg: #191724; /* Base color */
    --sidebar-fg: #908caa; /* Subtle color */

    /* Additional color assignments from the palette */
    --sidebar-non-existant: #524f67; /* Highlight High */
    --sidebar-active: #eb6f92; /* Love */
    --sidebar-spacer: #403d52; /* Highlight Med */

    --scrollbar: var(--sidebar-fg);

    --icons: #31748f; /* Pine */
    --icons-hover: #c4a7e7; /* Iris */

    --links: #f6c177; /* Gold */

    --inline-code-color: #ebbcba; /* Rose */

    --theme-popup-bg: #26233a; /* Overlay */
    --theme-popup-border: #6e6a86; /* Muted */
    --theme-hover: #21202e; /* Highlight Low */

    --quote-bg: #26233a; /* Overlay */
    --quote-border: #403d52; /* Highlight Med */

    --table-border-color: #524f67; /* Highlight High */
    --table-header-bg: #403d52; /* Highlight Med */
    --table-alternate-bg: #1f1d2e; /* Surface */

    --searchbar-border-color: #6e6a86; /* Muted */
    --searchbar-bg: #26233a; /* Overlay */
    --searchbar-fg: #e0def4; /* Text */
    --searchbar-shadow-color: #eb6f92; /* Love */
    --searchresults-header-fg: #908caa; /* Subtle */
    --searchresults-border-color: #524f67; /* Highlight High */
    --searchresults-li-bg: #1f1d2e; /* Surface */
    --search-mark-bg: #f6c177; /* Gold */
}

/* Override Code Blocks for Rose Pink theme */
.pinkrose .hljs {
    background: #ffe4e1; /* Light pink background for contrast */
    color: #d26a7e; /* Darker rose color for text */
}

.pinkrose .hljs-section {
    color: #b23a48; /* Rich rose color for section titles */
}

/* This is made with love for my older daugher <3 */
.tokyonight {
    /* Tokyo Night color palette with more purple */
    --bg: #202330; /* A darker background for main content */
    --fg: #959cbd; /* Foreground color with a purple hue */

    --sidebar-bg: #1B2232; /* Slightly lighter than --bg for the sidebar */
    --sidebar-fg: #bdc7f0; /* Foreground color for the sidebar */

    /* Enhancing link colors */
    --links: #7a82da; /* More vibrant purple for links */
    --links-hover: #a0a8e6; /* Lighter purple for hover state */

    --sidebar-link-hover: #a0a8e6; /* Hover color for sidebar links */

    /* Other color assignments based on the palette */
    --sidebar-non-existant: #696d87; /* GitDecoration ignoredResourceForeground */
    --sidebar-active: #7a82da; /* More vibrant purple for active elements */
    --sidebar-spacer: #787c99; /* Inactive elements in activityBar */

    --scrollbar: var(--sidebar-fg);

    --icons: #959cbd; /* General icon color */
    --icons-hover: #3d59a1; /* panelTitle activeBorder color for hover state */

    --inline-code-color: #bdc7f0; /* Foreground color for inline code */

    --theme-popup-bg: #1B2232; /* Similar to sidebar background */
    --theme-popup-border: #787c99; /* Inactive elements in activityBar */
    --theme-hover: #202330; /* Background color for hover states */

    --quote-bg: #1B2232; /* Sidebar background for consistency */
    --quote-border: #787c99; /* Inactive elements in activityBar */

    --table-border-color: #1B2232; /* Sidebar background for consistency */
    --table-header-bg: #202330; /* Main background color */
    --table-alternate-bg: #1B2232; /* Sidebar background for alternate rows */

    --searchbar-border-color: #787c99; /* Inactive elements in activityBar */
    --searchbar-bg: #202330; /* Main background color */
    --searchbar-fg: #bdc7f0; /* Foreground color */
    --searchbar-shadow-color: #3d59a1; /* panelTitle activeBorder color */
    --searchresults-header-fg: #959cbd; /* General foreground color */
    --searchresults-border-color: #787c99; /* Inactive elements in activityBar */
    --searchresults-li-bg: #1B2232; /* Sidebar background for list items */
    --search-mark-bg: #bdc7f0; /* Foreground color for search highlights */
}

/* Override Code Blocks for Tokyo Night theme */
.tokyonight .hljs {
    background: #1B2232; /* A darker background, similar to sidebar-bg */
    color: #bdc7f0; /* Foreground color used in sidebar */
}

.tokyonight .hljs-section {
    color: #7a82da; /* More vibrant purple for titles and sections */
}

/* This is made with love for my wife, who was eager to have one after the kids both had one ;)  */
.burgundy {
    /* Set a unique base for the theme with a Burgundy accent */
    --bg: #FFF8F0; /* Creamy white for a unique background */
    --fg: #352839; /* Burgundy for primary text, making it the featured color */

    /* Sidebar with a distinctive look and Burgundy highlights */
    --sidebar-bg: #352839; /* Soft pinkish-white for sidebar background */
    --sidebar-fg: #FFF0F8; /* Burgundy for sidebar text */

    --sidebar-non-existant: #E8D8E0; /* Soft lavender for non-existent items */
    --sidebar-active: #DAA6B1; /* A softer, lighter shade of Burgundy */
    --sidebar-spacer: #FFFAFA; /* Very light pink for sidebar spacer */

    --scrollbar: #B8A8B0; /* Muted lavender for scrollbar */

    /* Icons and links with Burgundy as the key accent color */
    --icons: #A08088; /* Soft brownish-pink for icons */
    --icons-hover: #352839; /* Burgundy for hovered icons */

    --links: #352839; /* Burgundy for links */

    --inline-code-color: #352839; /* Burgundy for inline code */

    /* Popups and quotes with a unique and gentle appearance */
    --theme-popup-bg: #FFF8F0; /* Creamy white for popup background */
    --theme-popup-border: #E0C0C8; /* Light rosy for popup borders */
    --theme-hover: #FFF0F8; /* Soft pinkish-white for hover background */

    --quote-bg: #FFF0F0; /* Very light pink for quote background */
    --quote-border: #F0D0D8; /* Light pink for quote border */

    /* Tables with a touch of Burgundy and complementary colors */
    --table-border-color: #E8D0D8; /* Light rosy for table borders */
    --table-header-bg: #FFF0F8; /* Soft pinkish-white for table header background */
    --table-alternate-bg: #FFF8F0; /* Creamy white for alternate rows */

    /* Search bar and results with a blend of theme colors */
    --searchbar-border-color: #D8C0C8; /* Light rosy for search bar border */
    --searchbar-bg: #FFF8F0; /* Creamy white for search bar background */
    --searchbar-fg: #352839; /* Burgundy for search bar text */
    --searchbar-shadow-color: #E0C0C8; /* Light rosy for search bar shadow */
    --searchresults-header-fg: #A08088; /* Soft brownish-pink for search results header */
    --searchresults-border-color: #C8B0B8; /* Muted pink for search results border */
    --searchresults-li-bg: #FFF0F8; /* Soft pinkish-white for search results list item background */
    --search-mark-bg: #FFE0E0; /* Very light pink for search mark background */
}

.burgundy .hljs {
    background: #FFF0F8; /* A soft pinkish-white, in line with the theme */
    color: #352839; /* Burgundy for the code text, ensuring readability */
}

.burgundy .hljs-section {
    color: #A08088; /* A soft brownish-pink, for syntax highlighting */
}