You can click on the tag to bring up the associated chapters.

This only changes the cards width on bigger screens, the look is the same for phones:

You can still override the color palette while keeping the Kanagawa layout.

Create your-book/src/assets/dracula.css:

/* src/assets/dracula.css */

:root.coal,
.coal,
html.coal,
body.coal {
  /* Core page colors */
  --bg: #282a36;
  --bg-alt: #44475a;
  --fg: #f8f8f2;
  --fg-light: #cfcfd9;

  --code-bg: #363a4f;

  /* Waves / accent palette */
  --wave-1: #282a36;
  --wave-2: #343746;
  --wave-3: #44475a;

  --accent: #bd93f9; /* main accent (purple) */
  --red: #ff5555;
  --blue: #8be9fd;

  /* Sidebar */
  --sidebar-bg: #282a36;
  --sidebar-fg: #f8f8f2;
  --sidebar-non-existant: #6272a4;
  --sidebar-active: #bd93f9;
  --sidebar-spacer: #44475a;

  /* Content links / headings / bold */
  --links: #8be9fd; /* cyan links */
  --heading: #bd93f9; /* purple headings */
  --sidebar-title: #bd93f9; /* purple headings */
  --bold: #ffb86c; /* warm emphasis */

  /* Optional extras */
  --quote-bg: #343746;
  --quote-border: #44475a;
  --table-header-bg: #44475a;
  --table-alternate-bg: #343746;
}

.coal pre code.hljs,
.coal code.hljs,
.coal .hljs {
  background: var(--code-bg) !important;
  color: var(--fg) !important;
}

When you run mdbook build this file will be placed in your-book/book/assets/dracula.css.

This only overrides the coal color-scheme from the dropdown. The other themes will still use the Kanagawa defaults.

Also override the code blocks with dracula syntax highlighting, create a your-book/theme/css/dracula-code.css:

/* theme/css/dracula-code.css */

/* Base code block look: distinct but still Dracula */
.hljs {
  background: #282a36 !important; /* Dracula background */
  color: #f8f8f2 !important; /* Dracula foreground */
}

pre code.hljs,
code.hljs {
  background: #282a36 !important;
  color: #f8f8f2 !important;
}

/* Tokens */
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #ff79c6 !important; /* pink */
}

.hljs-string,
.hljs-attribute,
.hljs-attr {
  color: #f1fa8c !important; /* yellow */
}

.hljs-number,
.hljs-literal {
  color: #bd93f9 !important; /* purple */
}

.hljs-variable,
.hljs-tag,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet {
  color: #8be9fd !important; /* cyan */
}

.hljs-comment {
  color: #6272a4 !important;
  font-style: italic !important;
}

/* Block code only */
pre code.hljs {
  background: var(--code-bg); /* or #24283b if you prefer */
  color: #c0caf5;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}

/* Optional: make inline highlighted code look normal */
:not(pre) > code.hljs {
  background: transparent;
  border: none;
  padding: 0;
}

And in book.toml:

[preprocessor.kanagawa-theme]
renderers = ["html"]
before = ["content-loader", "content-collections"]

landing_title = "My mdBook"
landing_subtitle = "Notes, posts, and more"

# These strings can be changed to whatever you prefer
header_latest = "Latest posts"
header_notes = "Recent notes"
header_tags = "Popular tags"

css_import = "/assets/dracula.css"
disable_builtin_css = false

[output.html]
# automatically switch to the override
default-theme = "coal"
additional-css = ["kanagawa-code.css", "dracula-code.css"]

With this setup:

• mdBook still builds the book as usual, and mdbook-kanagawa-theme generates theme/css/chrome.css with the Kanagawa layout and variable hooks.​

• The preprocessor adds an @import "/assets/dracula.css"; (from css_import) at the top of that generated chrome.css, so your Dracula file runs after the built‑in variable defaults.​

• Because dracula.css redefines the same CSS custom properties used by the Kanagawa theme (--bg, --fg, --accent, sidebar colors, etc.), the page keeps the Kanagawa layout and landing page, but all colors for the coal theme class come from your Dracula palette instead. Kanagawa provides the layout and default palette.

• The dracula theme only overrides the coal theme from the dropdown, this way you can easily switch between the normal themes with dracula and kanagawa added.

Create your-book/src/assets/tokyo-night.css:

/* src/assets/tokyo-night.css */

:root.coal,
.coal,
html.coal,
body.coal {
  /* Core page colors (Tokyo Night-ish) */
  --bg: #1a1b26;
  --bg-alt: #24283b;
  --fg: #c0caf5;
  --fg-light: #a9b1d6; /* lighter foreground */
  --code-bg: #292e42; /* slightly brighter/darker than card */

  /* Waves / accent palette */
  --wave-1: #1a1b26; /* deepest background */
  --wave-2: #24283b; /* normal background */
  --wave-3: #292e42; /* slightly raised panels */

  --accent: #7aa2f7; /* main accent (blue) */
  --red: #f7768e; /* error / destructive */
  --blue: #7dcfff; /* secondary accent / info */

  /* Sidebar */
  --sidebar-bg: #1a1b26;
  --sidebar-fg: #c0caf5;
  --sidebar-non-existant: #565f89; /* dimmed items */
  --sidebar-active: #7aa2f7;
  --sidebar-spacer: #24283b;

  /* Content links / headings / bold */
  --links: #7dcfff; /* cyan-ish links */
  --heading: #7aa2f7; /* blue headings */
  --sidebar-title: #7aa2f7; /* blue sidebar-title */
  --bold: #ff9e64; /* warm emphasis */

  /* Optional extras */
  --quote-bg: #24283b;
  --quote-border: #292e42;
  --table-header-bg: #292e42;
  --table-alternate-bg: #24283b;
}
/* Make code blocks use the dedicated code background on coal theme */
.coal pre code.hljs,
.coal code.hljs,
.coal .hljs {
  background: var(--code-bg) !important;
  color: var(--fg) !important;
}

Add tokyo-night code block syntax highlighting, create a your-book/theme/css/tokyo-night-code.css:

/* theme/css/tokyo-night-code.css */

/* Base code block look: a bit lighter than page bg */
.hljs {
  background: #24283b; /* Tokyo Night panel */
  color: #c0caf5;
}

pre code.hljs,
code.hljs {
  background: #24283b; /* Tokyo Night panel */
  color: #c0caf5;
}

/* Token colors */
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #bb9af7 !important; /* purple */
}

.hljs-string,
.hljs-attribute,
.hljs-attr {
  color: #9ece6a !important; /* green */
}

.hljs-number,
.hljs-literal {
  color: #ff9e64 !important; /* orange */
}

.hljs-variable,
.hljs-tag,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet {
  color: #7dcfff !important; /* cyan-ish / accent */
}

.hljs-comment {
  color: #565f89 !important;
  font-style: italic !important;
}

/* Block code only */
pre code.hljs {
  background: var(--code-bg); /* or #24283b if you prefer */
  color: #c0caf5;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}

/* Optional: make inline highlighted code look normal */
:not(pre) > code.hljs {
  background: transparent;
  border: none;
  padding: 0;
}

Add this to your book.toml along with what's been shown so far. The overrides only apply to the coal theme from the dropdown:

css_import = "/assets/tokyo-night.css"
disable_builtin_css = false

[output.html]
# automatically switch to the override
default-theme = "coal"
additional-css = ["kanagawa-code.css", "tokyo-night-code.css"]

• The other themes will still use the Kanagawa defaults.

Create your-book/src/assets/catppuccin-mocha.css

/* src/assets/catppuccin-mocha.css */

:root.coal,
.coal,
html.coal,
body.coal {
  /* Core page colors (Catppuccin Mocha-inspired) */
  --bg: #1e1e2e; /* base */
  --bg-alt: #313244; /* surface0 */
  --fg: #cdd6f4; /* text */
  --fg-light: #a6adc8; /* subtext1 */
  --code-bg: #45475a; /* code block bg */

  /* Waves / accent palette */
  --wave-1: #1e1e2e; /* base */
  --wave-2: #313244; /* surface0 */
  --wave-3: #45475a; /* surface1 */

  --accent: #89b4fa; /* blue */
  --red: #f38ba8; /* red */
  --blue: #89b4fa; /* blue */

  /* Sidebar */
  --sidebar-bg: #1e1e2e; /* base */
  --sidebar-fg: #cdd6f4; /* text */
  --sidebar-non-existant: #6c7086; /* overlay1 */
  --sidebar-active: #89b4fa; /* blue */
  --sidebar-spacer: #313244; /* surface0 */

  /* Content links / headings / bold */
  --links: #89b4fa; /* blue links */
  --heading: #cba6f7; /* mauve headings */
  --sidebar-title: #cba6f7; /* mauve sidebar-titles */
  --bold: #f9e2af; /* yellow emphasis */

  /* Optional extras */
  --quote-bg: #313244; /* surface0 */
  --quote-border: #45475a; /* surface1 */
  --table-header-bg: #45475a; /* surface1 */
  --table-alternate-bg: #313244; /* surface0 */
}

.coal pre code.hljs,
.coal code.hljs,
.coal .hljs {
  background: var(--code-bg) !important;
  color: var(--fg) !important;
}

Add this to your book.toml along with what's been shown so far. The overrides only apply to the coal theme from the dropdown:

Also apply catppuccin-mocha syntax highlighting for code blocks:

Create your-book/theme/css/catppuccin-mocha-code.css:

/* theme/css/catppuccin-mocha-code.css */

/* Base code block look: a bit lighter than page bg */
.hljs {
  background: #313244; /* surface0 */
  color: #cdd6f4;
}

pre code.hljs,
code.hljs {
  background: #313244; /* surface0 */
  color: #cdd6f4;
}

/* Tokens */
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #cba6f7 !important; /* mauve */
}

.hljs-string,
.hljs-attribute,
.hljs-attr {
  color: #a6e3a1 !important; /* green */
}

.hljs-number,
.hljs-literal {
  color: #fab387 !important; /* peach */
}

.hljs-variable,
.hljs-tag,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet {
  color: #f38ba8 !important; /* red/pink */
}

.hljs-comment {
  color: #585b70 !important;
  font-style: italic !important;
}

/* Block code only */
pre code.hljs {
  background: var(--code-bg); /* or #24283b if you prefer */
  color: #c0caf5;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}

/* Optional: make inline highlighted code look normal */
:not(pre) > code.hljs {
  background: transparent;
  border: none;
  padding: 0;
}

css_import = "/assets/catppuccin-mocha.css"
disable_builtin_css = false

[output.html]
# automatically switch to the override
default-theme = "coal"
additional-css = [
	"theme/css/kanagawa-code.css",
	"theme/css/catppuccin-mocha-code.css",
]

• "theme/css/kanagawa-code.css" isn't required.

• The other themes continue to use the Kanagawa palette.