diff --git a/book.toml b/book.toml
index a8462479a..00b48f026 100644
--- a/book.toml
+++ b/book.toml
@@ -11,8 +11,12 @@ extra-watch-dirs = ["po"]
 [preprocessor.gettext]
 after = ["links"]
 
+[preprocessor.catppuccin]
+assets_version = "2.0.1" # DO NOT EDIT: Managed by `mdbook-catppuccin install`
+
 [output.html]
 git-repository-url = "https://github.com/starknet-edu/starknetbook"
+additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
 
 [output.html.fold]
 enable = true
diff --git a/theme/catppuccin-admonish.css b/theme/catppuccin-admonish.css
new file mode 100644
index 000000000..2a30e9f43
--- /dev/null
+++ b/theme/catppuccin-admonish.css
@@ -0,0 +1,363 @@
+.mocha :is(.admonition):is(.admonish-hint, .admonish-important, .admonish-tip) {
+  border-color: #f9e2af;
+}
+.mocha :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(249, 226, 175, 0.2);
+}
+.mocha :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f9e2af;
+}
+.mocha :is(.admonition):is(.admonish-abstract, .admonish-summary, .admonish-tldr) {
+  border-color: #f2cdcd;
+}
+.mocha :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(242, 205, 205, 0.2);
+}
+.mocha :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f2cdcd;
+}
+.mocha :is(.admonition):is(.admonish-example) {
+  border-color: #cba6f7;
+}
+.mocha :is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(203, 166, 247, 0.2);
+}
+.mocha :is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #cba6f7;
+}
+.mocha :is(.admonition):is(.admonish-info, .admonish-todo) {
+  border-color: #89dceb;
+}
+.mocha :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(137, 220, 235, 0.2);
+}
+.mocha :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #89dceb;
+}
+.mocha :is(.admonition):is(.admonish-check, .admonish-done, .admonish-success) {
+  border-color: #a6e3a1;
+}
+.mocha :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 227, 161, 0.2);
+}
+.mocha :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6e3a1;
+}
+.mocha :is(.admonition):is(.admonish-note) {
+  border-color: #89b4fa;
+}
+.mocha :is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(137, 180, 250, 0.2);
+}
+.mocha :is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #89b4fa;
+}
+.mocha :is(.admonition):is(.admonish-attention, .admonish-caution, .admonish-warning) {
+  border-color: #fab387;
+}
+.mocha :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(250, 179, 135, 0.2);
+}
+.mocha :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #fab387;
+}
+.mocha :is(.admonition):is(.admonish-faq, .admonish-help, .admonish-question) {
+  border-color: #94e2d5;
+}
+.mocha :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(148, 226, 213, 0.2);
+}
+.mocha :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #94e2d5;
+}
+.mocha :is(.admonition):is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) {
+  border-color: #f38ba8;
+}
+.mocha :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(243, 139, 168, 0.2);
+}
+.mocha :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f38ba8;
+}
+.mocha :is(.admonition):is(.admonish-cite, .admonish-quote) {
+  border-color: #f5c2e7;
+}
+.mocha :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 194, 231, 0.2);
+}
+.mocha :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5c2e7;
+}
+
+.macchiato :is(.admonition):is(.admonish-hint, .admonish-important, .admonish-tip) {
+  border-color: #eed49f;
+}
+.macchiato :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(238, 212, 159, 0.2);
+}
+.macchiato :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #eed49f;
+}
+.macchiato :is(.admonition):is(.admonish-abstract, .admonish-summary, .admonish-tldr) {
+  border-color: #f0c6c6;
+}
+.macchiato :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(240, 198, 198, 0.2);
+}
+.macchiato :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f0c6c6;
+}
+.macchiato :is(.admonition):is(.admonish-example) {
+  border-color: #c6a0f6;
+}
+.macchiato :is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(198, 160, 246, 0.2);
+}
+.macchiato :is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #c6a0f6;
+}
+.macchiato :is(.admonition):is(.admonish-info, .admonish-todo) {
+  border-color: #91d7e3;
+}
+.macchiato :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(145, 215, 227, 0.2);
+}
+.macchiato :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #91d7e3;
+}
+.macchiato :is(.admonition):is(.admonish-check, .admonish-done, .admonish-success) {
+  border-color: #a6da95;
+}
+.macchiato :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 218, 149, 0.2);
+}
+.macchiato :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6da95;
+}
+.macchiato :is(.admonition):is(.admonish-note) {
+  border-color: #8aadf4;
+}
+.macchiato :is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(138, 173, 244, 0.2);
+}
+.macchiato :is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8aadf4;
+}
+.macchiato :is(.admonition):is(.admonish-attention, .admonish-caution, .admonish-warning) {
+  border-color: #f5a97f;
+}
+.macchiato :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 169, 127, 0.2);
+}
+.macchiato :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5a97f;
+}
+.macchiato :is(.admonition):is(.admonish-faq, .admonish-help, .admonish-question) {
+  border-color: #8bd5ca;
+}
+.macchiato :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(139, 213, 202, 0.2);
+}
+.macchiato :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8bd5ca;
+}
+.macchiato :is(.admonition):is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) {
+  border-color: #ed8796;
+}
+.macchiato :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(237, 135, 150, 0.2);
+}
+.macchiato :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ed8796;
+}
+.macchiato :is(.admonition):is(.admonish-cite, .admonish-quote) {
+  border-color: #f5bde6;
+}
+.macchiato :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 189, 230, 0.2);
+}
+.macchiato :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5bde6;
+}
+
+.frappe :is(.admonition):is(.admonish-hint, .admonish-important, .admonish-tip) {
+  border-color: #e5c890;
+}
+.frappe :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(229, 200, 144, 0.2);
+}
+.frappe :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #e5c890;
+}
+.frappe :is(.admonition):is(.admonish-abstract, .admonish-summary, .admonish-tldr) {
+  border-color: #eebebe;
+}
+.frappe :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(238, 190, 190, 0.2);
+}
+.frappe :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #eebebe;
+}
+.frappe :is(.admonition):is(.admonish-example) {
+  border-color: #ca9ee6;
+}
+.frappe :is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(202, 158, 230, 0.2);
+}
+.frappe :is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ca9ee6;
+}
+.frappe :is(.admonition):is(.admonish-info, .admonish-todo) {
+  border-color: #99d1db;
+}
+.frappe :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(153, 209, 219, 0.2);
+}
+.frappe :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #99d1db;
+}
+.frappe :is(.admonition):is(.admonish-check, .admonish-done, .admonish-success) {
+  border-color: #a6d189;
+}
+.frappe :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 209, 137, 0.2);
+}
+.frappe :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6d189;
+}
+.frappe :is(.admonition):is(.admonish-note) {
+  border-color: #8caaee;
+}
+.frappe :is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(140, 170, 238, 0.2);
+}
+.frappe :is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8caaee;
+}
+.frappe :is(.admonition):is(.admonish-attention, .admonish-caution, .admonish-warning) {
+  border-color: #ef9f76;
+}
+.frappe :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(239, 159, 118, 0.2);
+}
+.frappe :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ef9f76;
+}
+.frappe :is(.admonition):is(.admonish-faq, .admonish-help, .admonish-question) {
+  border-color: #81c8be;
+}
+.frappe :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(129, 200, 190, 0.2);
+}
+.frappe :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #81c8be;
+}
+.frappe :is(.admonition):is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) {
+  border-color: #e78284;
+}
+.frappe :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(231, 130, 132, 0.2);
+}
+.frappe :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #e78284;
+}
+.frappe :is(.admonition):is(.admonish-cite, .admonish-quote) {
+  border-color: #f4b8e4;
+}
+.frappe :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(244, 184, 228, 0.2);
+}
+.frappe :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f4b8e4;
+}
+
+.latte :is(.admonition):is(.admonish-hint, .admonish-important, .admonish-tip) {
+  border-color: #df8e1d;
+}
+.latte :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(223, 142, 29, 0.2);
+}
+.latte :is(.admonish-hint, .admonish-important, .admonish-tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #df8e1d;
+}
+.latte :is(.admonition):is(.admonish-abstract, .admonish-summary, .admonish-tldr) {
+  border-color: #dd7878;
+}
+.latte :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(221, 120, 120, 0.2);
+}
+.latte :is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #dd7878;
+}
+.latte :is(.admonition):is(.admonish-example) {
+  border-color: #8839ef;
+}
+.latte :is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(136, 57, 239, 0.2);
+}
+.latte :is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8839ef;
+}
+.latte :is(.admonition):is(.admonish-info, .admonish-todo) {
+  border-color: #04a5e5;
+}
+.latte :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(4, 165, 229, 0.2);
+}
+.latte :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #04a5e5;
+}
+.latte :is(.admonition):is(.admonish-check, .admonish-done, .admonish-success) {
+  border-color: #40a02b;
+}
+.latte :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(64, 160, 43, 0.2);
+}
+.latte :is(.admonish-check, .admonish-done, .admonish-success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #40a02b;
+}
+.latte :is(.admonition):is(.admonish-note) {
+  border-color: #1e66f5;
+}
+.latte :is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(30, 102, 245, 0.2);
+}
+.latte :is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #1e66f5;
+}
+.latte :is(.admonition):is(.admonish-attention, .admonish-caution, .admonish-warning) {
+  border-color: #fe640b;
+}
+.latte :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(254, 100, 11, 0.2);
+}
+.latte :is(.admonish-attention, .admonish-caution, .admonish-warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #fe640b;
+}
+.latte :is(.admonition):is(.admonish-faq, .admonish-help, .admonish-question) {
+  border-color: #179299;
+}
+.latte :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(23, 146, 153, 0.2);
+}
+.latte :is(.admonish-faq, .admonish-help, .admonish-question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #179299;
+}
+.latte :is(.admonition):is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) {
+  border-color: #d20f39;
+}
+.latte :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(210, 15, 57, 0.2);
+}
+.latte :is(.admonish-bug, .admonish-danger, .admonish-error, .admonish-fail, .admonish-failure, .admonish-missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #d20f39;
+}
+.latte :is(.admonition):is(.admonish-cite, .admonish-quote) {
+  border-color: #ea76cb;
+}
+.latte :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(234, 118, 203, 0.2);
+}
+.latte :is(.admonish-cite, .admonish-quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ea76cb;
+}
diff --git a/theme/catppuccin.css b/theme/catppuccin.css
new file mode 100644
index 000000000..9b53ac9f6
--- /dev/null
+++ b/theme/catppuccin.css
@@ -0,0 +1,783 @@
+.mocha.hljs {
+  color: #cdd6f4;
+  background: #1e1e2e;
+}
+.mocha .hljs-keyword {
+  color: #cba6f7;
+}
+.mocha .hljs-built_in {
+  color: #f38ba8;
+}
+.mocha .hljs-type {
+  color: #f9e2af;
+}
+.mocha .hljs-literal {
+  color: #fab387;
+}
+.mocha .hljs-number {
+  color: #fab387;
+}
+.mocha .hljs-operator {
+  color: #94e2d5;
+}
+.mocha .hljs-punctuation {
+  color: #bac2de;
+}
+.mocha .hljs-property {
+  color: #94e2d5;
+}
+.mocha .hljs-regexp {
+  color: #f5c2e7;
+}
+.mocha .hljs-string {
+  color: #a6e3a1;
+}
+.mocha .hljs-char.escape_ {
+  color: #a6e3a1;
+}
+.mocha .hljs-subst {
+  color: #a6adc8;
+}
+.mocha .hljs-symbol {
+  color: #f2cdcd;
+}
+.mocha .hljs-variable {
+  color: #cba6f7;
+}
+.mocha .hljs-variable.language_ {
+  color: #cba6f7;
+}
+.mocha .hljs-variable.constant_ {
+  color: #fab387;
+}
+.mocha .hljs-title {
+  color: #89b4fa;
+}
+.mocha .hljs-title.class_ {
+  color: #f9e2af;
+}
+.mocha .hljs-title.function_ {
+  color: #89b4fa;
+}
+.mocha .hljs-params {
+  color: #cdd6f4;
+}
+.mocha .hljs-comment {
+  color: #585b70;
+}
+.mocha .hljs-doctag {
+  color: #f38ba8;
+}
+.mocha .hljs-meta {
+  color: #fab387;
+}
+.mocha .hljs-section {
+  color: #89b4fa;
+}
+.mocha .hljs-tag {
+  color: #a6adc8;
+}
+.mocha .hljs-name {
+  color: #cba6f7;
+}
+.mocha .hljs-attr {
+  color: #89b4fa;
+}
+.mocha .hljs-attribute {
+  color: #a6e3a1;
+}
+.mocha .hljs-bullet {
+  color: #94e2d5;
+}
+.mocha .hljs-code {
+  color: #a6e3a1;
+}
+.mocha .hljs-emphasis {
+  color: #f38ba8;
+  font-style: italic;
+}
+.mocha .hljs-strong {
+  color: #f38ba8;
+  font-weight: bold;
+}
+.mocha .hljs-formula {
+  color: #94e2d5;
+}
+.mocha .hljs-link {
+  color: #74c7ec;
+  font-style: italic;
+}
+.mocha .hljs-quote {
+  color: #a6e3a1;
+  font-style: italic;
+}
+.mocha .hljs-selector-tag {
+  color: #f9e2af;
+}
+.mocha .hljs-selector-id {
+  color: #89b4fa;
+}
+.mocha .hljs-selector-class {
+  color: #94e2d5;
+}
+.mocha .hljs-selector-attr {
+  color: #cba6f7;
+}
+.mocha .hljs-selector-pseudo {
+  color: #94e2d5;
+}
+.mocha .hljs-template-tag {
+  color: #f2cdcd;
+}
+.mocha .hljs-template-variable {
+  color: #f2cdcd;
+}
+.mocha .hljs-addition {
+  color: #a6e3a1;
+  background: rgba(166, 227, 161, 0.15);
+}
+.mocha .hljs-deletion {
+  color: #f38ba8;
+  background: rgba(243, 139, 168, 0.15);
+}
+.mocha code {
+  color: #cdd6f4;
+  background: #181825;
+}
+.mocha blockquote blockquote {
+  border-top: 0.1em solid #585b70;
+  border-bottom: 0.1em solid #585b70;
+}
+.mocha hr {
+  color: #585b70;
+}
+.mocha del {
+  color: #9399b2;
+}
+.mocha .ace_gutter {
+  color: #7f849c;
+  background: #181825;
+}
+.mocha .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5c2e7;
+  background: #181825;
+}
+
+.macchiato.hljs {
+  color: #cad3f5;
+  background: #24273a;
+}
+.macchiato .hljs-keyword {
+  color: #c6a0f6;
+}
+.macchiato .hljs-built_in {
+  color: #ed8796;
+}
+.macchiato .hljs-type {
+  color: #eed49f;
+}
+.macchiato .hljs-literal {
+  color: #f5a97f;
+}
+.macchiato .hljs-number {
+  color: #f5a97f;
+}
+.macchiato .hljs-operator {
+  color: #8bd5ca;
+}
+.macchiato .hljs-punctuation {
+  color: #b8c0e0;
+}
+.macchiato .hljs-property {
+  color: #8bd5ca;
+}
+.macchiato .hljs-regexp {
+  color: #f5bde6;
+}
+.macchiato .hljs-string {
+  color: #a6da95;
+}
+.macchiato .hljs-char.escape_ {
+  color: #a6da95;
+}
+.macchiato .hljs-subst {
+  color: #a5adcb;
+}
+.macchiato .hljs-symbol {
+  color: #f0c6c6;
+}
+.macchiato .hljs-variable {
+  color: #c6a0f6;
+}
+.macchiato .hljs-variable.language_ {
+  color: #c6a0f6;
+}
+.macchiato .hljs-variable.constant_ {
+  color: #f5a97f;
+}
+.macchiato .hljs-title {
+  color: #8aadf4;
+}
+.macchiato .hljs-title.class_ {
+  color: #eed49f;
+}
+.macchiato .hljs-title.function_ {
+  color: #8aadf4;
+}
+.macchiato .hljs-params {
+  color: #cad3f5;
+}
+.macchiato .hljs-comment {
+  color: #5b6078;
+}
+.macchiato .hljs-doctag {
+  color: #ed8796;
+}
+.macchiato .hljs-meta {
+  color: #f5a97f;
+}
+.macchiato .hljs-section {
+  color: #8aadf4;
+}
+.macchiato .hljs-tag {
+  color: #a5adcb;
+}
+.macchiato .hljs-name {
+  color: #c6a0f6;
+}
+.macchiato .hljs-attr {
+  color: #8aadf4;
+}
+.macchiato .hljs-attribute {
+  color: #a6da95;
+}
+.macchiato .hljs-bullet {
+  color: #8bd5ca;
+}
+.macchiato .hljs-code {
+  color: #a6da95;
+}
+.macchiato .hljs-emphasis {
+  color: #ed8796;
+  font-style: italic;
+}
+.macchiato .hljs-strong {
+  color: #ed8796;
+  font-weight: bold;
+}
+.macchiato .hljs-formula {
+  color: #8bd5ca;
+}
+.macchiato .hljs-link {
+  color: #7dc4e4;
+  font-style: italic;
+}
+.macchiato .hljs-quote {
+  color: #a6da95;
+  font-style: italic;
+}
+.macchiato .hljs-selector-tag {
+  color: #eed49f;
+}
+.macchiato .hljs-selector-id {
+  color: #8aadf4;
+}
+.macchiato .hljs-selector-class {
+  color: #8bd5ca;
+}
+.macchiato .hljs-selector-attr {
+  color: #c6a0f6;
+}
+.macchiato .hljs-selector-pseudo {
+  color: #8bd5ca;
+}
+.macchiato .hljs-template-tag {
+  color: #f0c6c6;
+}
+.macchiato .hljs-template-variable {
+  color: #f0c6c6;
+}
+.macchiato .hljs-addition {
+  color: #a6da95;
+  background: rgba(166, 218, 149, 0.15);
+}
+.macchiato .hljs-deletion {
+  color: #ed8796;
+  background: rgba(237, 135, 150, 0.15);
+}
+.macchiato code {
+  color: #cad3f5;
+  background: #1e2030;
+}
+.macchiato blockquote blockquote {
+  border-top: 0.1em solid #5b6078;
+  border-bottom: 0.1em solid #5b6078;
+}
+.macchiato hr {
+  color: #5b6078;
+}
+.macchiato del {
+  color: #939ab7;
+}
+.macchiato .ace_gutter {
+  color: #8087a2;
+  background: #1e2030;
+}
+.macchiato .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5bde6;
+  background: #1e2030;
+}
+
+.frappe.hljs {
+  color: #c6d0f5;
+  background: #303446;
+}
+.frappe .hljs-keyword {
+  color: #ca9ee6;
+}
+.frappe .hljs-built_in {
+  color: #e78284;
+}
+.frappe .hljs-type {
+  color: #e5c890;
+}
+.frappe .hljs-literal {
+  color: #ef9f76;
+}
+.frappe .hljs-number {
+  color: #ef9f76;
+}
+.frappe .hljs-operator {
+  color: #81c8be;
+}
+.frappe .hljs-punctuation {
+  color: #b5bfe2;
+}
+.frappe .hljs-property {
+  color: #81c8be;
+}
+.frappe .hljs-regexp {
+  color: #f4b8e4;
+}
+.frappe .hljs-string {
+  color: #a6d189;
+}
+.frappe .hljs-char.escape_ {
+  color: #a6d189;
+}
+.frappe .hljs-subst {
+  color: #a5adce;
+}
+.frappe .hljs-symbol {
+  color: #eebebe;
+}
+.frappe .hljs-variable {
+  color: #ca9ee6;
+}
+.frappe .hljs-variable.language_ {
+  color: #ca9ee6;
+}
+.frappe .hljs-variable.constant_ {
+  color: #ef9f76;
+}
+.frappe .hljs-title {
+  color: #8caaee;
+}
+.frappe .hljs-title.class_ {
+  color: #e5c890;
+}
+.frappe .hljs-title.function_ {
+  color: #8caaee;
+}
+.frappe .hljs-params {
+  color: #c6d0f5;
+}
+.frappe .hljs-comment {
+  color: #626880;
+}
+.frappe .hljs-doctag {
+  color: #e78284;
+}
+.frappe .hljs-meta {
+  color: #ef9f76;
+}
+.frappe .hljs-section {
+  color: #8caaee;
+}
+.frappe .hljs-tag {
+  color: #a5adce;
+}
+.frappe .hljs-name {
+  color: #ca9ee6;
+}
+.frappe .hljs-attr {
+  color: #8caaee;
+}
+.frappe .hljs-attribute {
+  color: #a6d189;
+}
+.frappe .hljs-bullet {
+  color: #81c8be;
+}
+.frappe .hljs-code {
+  color: #a6d189;
+}
+.frappe .hljs-emphasis {
+  color: #e78284;
+  font-style: italic;
+}
+.frappe .hljs-strong {
+  color: #e78284;
+  font-weight: bold;
+}
+.frappe .hljs-formula {
+  color: #81c8be;
+}
+.frappe .hljs-link {
+  color: #85c1dc;
+  font-style: italic;
+}
+.frappe .hljs-quote {
+  color: #a6d189;
+  font-style: italic;
+}
+.frappe .hljs-selector-tag {
+  color: #e5c890;
+}
+.frappe .hljs-selector-id {
+  color: #8caaee;
+}
+.frappe .hljs-selector-class {
+  color: #81c8be;
+}
+.frappe .hljs-selector-attr {
+  color: #ca9ee6;
+}
+.frappe .hljs-selector-pseudo {
+  color: #81c8be;
+}
+.frappe .hljs-template-tag {
+  color: #eebebe;
+}
+.frappe .hljs-template-variable {
+  color: #eebebe;
+}
+.frappe .hljs-addition {
+  color: #a6d189;
+  background: rgba(166, 209, 137, 0.15);
+}
+.frappe .hljs-deletion {
+  color: #e78284;
+  background: rgba(231, 130, 132, 0.15);
+}
+.frappe code {
+  color: #c6d0f5;
+  background: #292c3c;
+}
+.frappe blockquote blockquote {
+  border-top: 0.1em solid #626880;
+  border-bottom: 0.1em solid #626880;
+}
+.frappe hr {
+  color: #626880;
+}
+.frappe del {
+  color: #949cbb;
+}
+.frappe .ace_gutter {
+  color: #838ba7;
+  background: #292c3c;
+}
+.frappe .ace_gutter-active-line.ace_gutter-cell {
+  color: #f4b8e4;
+  background: #292c3c;
+}
+
+.latte.hljs {
+  color: #4c4f69;
+  background: #eff1f5;
+}
+.latte .hljs-keyword {
+  color: #8839ef;
+}
+.latte .hljs-built_in {
+  color: #d20f39;
+}
+.latte .hljs-type {
+  color: #df8e1d;
+}
+.latte .hljs-literal {
+  color: #fe640b;
+}
+.latte .hljs-number {
+  color: #fe640b;
+}
+.latte .hljs-operator {
+  color: #179299;
+}
+.latte .hljs-punctuation {
+  color: #5c5f77;
+}
+.latte .hljs-property {
+  color: #179299;
+}
+.latte .hljs-regexp {
+  color: #ea76cb;
+}
+.latte .hljs-string {
+  color: #40a02b;
+}
+.latte .hljs-char.escape_ {
+  color: #40a02b;
+}
+.latte .hljs-subst {
+  color: #6c6f85;
+}
+.latte .hljs-symbol {
+  color: #dd7878;
+}
+.latte .hljs-variable {
+  color: #8839ef;
+}
+.latte .hljs-variable.language_ {
+  color: #8839ef;
+}
+.latte .hljs-variable.constant_ {
+  color: #fe640b;
+}
+.latte .hljs-title {
+  color: #1e66f5;
+}
+.latte .hljs-title.class_ {
+  color: #df8e1d;
+}
+.latte .hljs-title.function_ {
+  color: #1e66f5;
+}
+.latte .hljs-params {
+  color: #4c4f69;
+}
+.latte .hljs-comment {
+  color: #acb0be;
+}
+.latte .hljs-doctag {
+  color: #d20f39;
+}
+.latte .hljs-meta {
+  color: #fe640b;
+}
+.latte .hljs-section {
+  color: #1e66f5;
+}
+.latte .hljs-tag {
+  color: #6c6f85;
+}
+.latte .hljs-name {
+  color: #8839ef;
+}
+.latte .hljs-attr {
+  color: #1e66f5;
+}
+.latte .hljs-attribute {
+  color: #40a02b;
+}
+.latte .hljs-bullet {
+  color: #179299;
+}
+.latte .hljs-code {
+  color: #40a02b;
+}
+.latte .hljs-emphasis {
+  color: #d20f39;
+  font-style: italic;
+}
+.latte .hljs-strong {
+  color: #d20f39;
+  font-weight: bold;
+}
+.latte .hljs-formula {
+  color: #179299;
+}
+.latte .hljs-link {
+  color: #209fb5;
+  font-style: italic;
+}
+.latte .hljs-quote {
+  color: #40a02b;
+  font-style: italic;
+}
+.latte .hljs-selector-tag {
+  color: #df8e1d;
+}
+.latte .hljs-selector-id {
+  color: #1e66f5;
+}
+.latte .hljs-selector-class {
+  color: #179299;
+}
+.latte .hljs-selector-attr {
+  color: #8839ef;
+}
+.latte .hljs-selector-pseudo {
+  color: #179299;
+}
+.latte .hljs-template-tag {
+  color: #dd7878;
+}
+.latte .hljs-template-variable {
+  color: #dd7878;
+}
+.latte .hljs-addition {
+  color: #40a02b;
+  background: rgba(64, 160, 43, 0.15);
+}
+.latte .hljs-deletion {
+  color: #d20f39;
+  background: rgba(210, 15, 57, 0.15);
+}
+.latte code {
+  color: #4c4f69;
+  background: #e6e9ef;
+}
+.latte blockquote blockquote {
+  border-top: 0.1em solid #acb0be;
+  border-bottom: 0.1em solid #acb0be;
+}
+.latte hr {
+  color: #acb0be;
+}
+.latte del {
+  color: #7c7f93;
+}
+.latte .ace_gutter {
+  color: #8c8fa1;
+  background: #e6e9ef;
+}
+.latte .ace_gutter-active-line.ace_gutter-cell {
+  color: #ea76cb;
+  background: #e6e9ef;
+}
+
+.mocha {
+  --bg: #1e1e2e;
+  --fg: #cdd6f4;
+  --sidebar-bg: #181825;
+  --sidebar-fg: #cdd6f4;
+  --sidebar-non-existant: #6c7086;
+  --sidebar-active: #89b4fa;
+  --sidebar-spacer: #6c7086;
+  --scrollbar: #6c7086;
+  --icons: #6c7086;
+  --icons-hover: #7f849c;
+  --links: #89b4fa;
+  --inline-code-color: #fab387;
+  --theme-popup-bg: #181825;
+  --theme-popup-border: #6c7086;
+  --theme-hover: #6c7086;
+  --quote-bg: #181825;
+  --quote-border: #11111b;
+  --table-border-color: #11111b;
+  --table-header-bg: #181825;
+  --table-alternate-bg: #181825;
+  --searchbar-border-color: #11111b;
+  --searchbar-bg: #181825;
+  --searchbar-fg: #cdd6f4;
+  --searchbar-shadow-color: #11111b;
+  --searchresults-header-fg: #cdd6f4;
+  --searchresults-border-color: #11111b;
+  --searchresults-li-bg: #1e1e2e;
+  --search-mark-bg: #fab387;
+}
+
+.macchiato {
+  --bg: #24273a;
+  --fg: #cad3f5;
+  --sidebar-bg: #1e2030;
+  --sidebar-fg: #cad3f5;
+  --sidebar-non-existant: #6e738d;
+  --sidebar-active: #8aadf4;
+  --sidebar-spacer: #6e738d;
+  --scrollbar: #6e738d;
+  --icons: #6e738d;
+  --icons-hover: #8087a2;
+  --links: #8aadf4;
+  --inline-code-color: #f5a97f;
+  --theme-popup-bg: #1e2030;
+  --theme-popup-border: #6e738d;
+  --theme-hover: #6e738d;
+  --quote-bg: #1e2030;
+  --quote-border: #181926;
+  --table-border-color: #181926;
+  --table-header-bg: #1e2030;
+  --table-alternate-bg: #1e2030;
+  --searchbar-border-color: #181926;
+  --searchbar-bg: #1e2030;
+  --searchbar-fg: #cad3f5;
+  --searchbar-shadow-color: #181926;
+  --searchresults-header-fg: #cad3f5;
+  --searchresults-border-color: #181926;
+  --searchresults-li-bg: #24273a;
+  --search-mark-bg: #f5a97f;
+}
+
+.frappe {
+  --bg: #303446;
+  --fg: #c6d0f5;
+  --sidebar-bg: #292c3c;
+  --sidebar-fg: #c6d0f5;
+  --sidebar-non-existant: #737994;
+  --sidebar-active: #8caaee;
+  --sidebar-spacer: #737994;
+  --scrollbar: #737994;
+  --icons: #737994;
+  --icons-hover: #838ba7;
+  --links: #8caaee;
+  --inline-code-color: #ef9f76;
+  --theme-popup-bg: #292c3c;
+  --theme-popup-border: #737994;
+  --theme-hover: #737994;
+  --quote-bg: #292c3c;
+  --quote-border: #232634;
+  --table-border-color: #232634;
+  --table-header-bg: #292c3c;
+  --table-alternate-bg: #292c3c;
+  --searchbar-border-color: #232634;
+  --searchbar-bg: #292c3c;
+  --searchbar-fg: #c6d0f5;
+  --searchbar-shadow-color: #232634;
+  --searchresults-header-fg: #c6d0f5;
+  --searchresults-border-color: #232634;
+  --searchresults-li-bg: #303446;
+  --search-mark-bg: #ef9f76;
+}
+
+.latte {
+  --bg: #eff1f5;
+  --fg: #4c4f69;
+  --sidebar-bg: #e6e9ef;
+  --sidebar-fg: #4c4f69;
+  --sidebar-non-existant: #9ca0b0;
+  --sidebar-active: #1e66f5;
+  --sidebar-spacer: #9ca0b0;
+  --scrollbar: #9ca0b0;
+  --icons: #9ca0b0;
+  --icons-hover: #8c8fa1;
+  --links: #1e66f5;
+  --inline-code-color: #fe640b;
+  --theme-popup-bg: #e6e9ef;
+  --theme-popup-border: #9ca0b0;
+  --theme-hover: #9ca0b0;
+  --quote-bg: #e6e9ef;
+  --quote-border: #dce0e8;
+  --table-border-color: #dce0e8;
+  --table-header-bg: #e6e9ef;
+  --table-alternate-bg: #e6e9ef;
+  --searchbar-border-color: #dce0e8;
+  --searchbar-bg: #e6e9ef;
+  --searchbar-fg: #4c4f69;
+  --searchbar-shadow-color: #dce0e8;
+  --searchresults-header-fg: #4c4f69;
+  --searchresults-border-color: #dce0e8;
+  --searchresults-li-bg: #eff1f5;
+  --search-mark-bg: #fe640b;
+}
diff --git a/theme/index.hbs b/theme/index.hbs
index d65d6eb6a..9c90cd6dd 100644
--- a/theme/index.hbs
+++ b/theme/index.hbs
@@ -151,11 +151,11 @@
                             <i class="fa fa-paint-brush"></i>
                         </button>
                         <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
-                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="latte">Latte</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="frappe">Frappé</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="macchiato">Macchiato</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mocha">Mocha</button></li>                            
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">