diff --git a/theme/frappe/blue.css b/theme/frappe/blue.css
new file mode 100644
index 0000000..be875b6
--- /dev/null
+++ b/theme/frappe/blue.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #1e66f5;
+  --vp-c-brand-2: #1e66f5;
+  --vp-c-brand-3: #1e66f5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #8caaee;
+  --vp-c-brand-2: #8caaee;
+  --vp-c-brand-3: #8caaee;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/flamingo.css b/theme/frappe/flamingo.css
new file mode 100644
index 0000000..8499783
--- /dev/null
+++ b/theme/frappe/flamingo.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dd7878;
+  --vp-c-brand-2: #dd7878;
+  --vp-c-brand-3: #dd7878;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #eebebe;
+  --vp-c-brand-2: #eebebe;
+  --vp-c-brand-3: #eebebe;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/green.css b/theme/frappe/green.css
new file mode 100644
index 0000000..83dbf7f
--- /dev/null
+++ b/theme/frappe/green.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #40a02b;
+  --vp-c-brand-2: #40a02b;
+  --vp-c-brand-3: #40a02b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #a6d189;
+  --vp-c-brand-2: #a6d189;
+  --vp-c-brand-3: #a6d189;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/lavender.css b/theme/frappe/lavender.css
new file mode 100644
index 0000000..00152de
--- /dev/null
+++ b/theme/frappe/lavender.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #7287fd;
+  --vp-c-brand-2: #7287fd;
+  --vp-c-brand-3: #7287fd;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #babbf1;
+  --vp-c-brand-2: #babbf1;
+  --vp-c-brand-3: #babbf1;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/maroon.css b/theme/frappe/maroon.css
new file mode 100644
index 0000000..1a4cb8b
--- /dev/null
+++ b/theme/frappe/maroon.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #e64553;
+  --vp-c-brand-2: #e64553;
+  --vp-c-brand-3: #e64553;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #ea999c;
+  --vp-c-brand-2: #ea999c;
+  --vp-c-brand-3: #ea999c;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/mauve.css b/theme/frappe/mauve.css
new file mode 100644
index 0000000..28b129a
--- /dev/null
+++ b/theme/frappe/mauve.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #8839ef;
+  --vp-c-brand-2: #8839ef;
+  --vp-c-brand-3: #8839ef;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #ca9ee6;
+  --vp-c-brand-2: #ca9ee6;
+  --vp-c-brand-3: #ca9ee6;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/peach.css b/theme/frappe/peach.css
new file mode 100644
index 0000000..5559151
--- /dev/null
+++ b/theme/frappe/peach.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #fe640b;
+  --vp-c-brand-2: #fe640b;
+  --vp-c-brand-3: #fe640b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #ef9f76;
+  --vp-c-brand-2: #ef9f76;
+  --vp-c-brand-3: #ef9f76;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/pink.css b/theme/frappe/pink.css
new file mode 100644
index 0000000..5527aa3
--- /dev/null
+++ b/theme/frappe/pink.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #ea76cb;
+  --vp-c-brand-2: #ea76cb;
+  --vp-c-brand-3: #ea76cb;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f4b8e4;
+  --vp-c-brand-2: #f4b8e4;
+  --vp-c-brand-3: #f4b8e4;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/red.css b/theme/frappe/red.css
new file mode 100644
index 0000000..5516c45
--- /dev/null
+++ b/theme/frappe/red.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #d20f39;
+  --vp-c-brand-2: #d20f39;
+  --vp-c-brand-3: #d20f39;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #e78284;
+  --vp-c-brand-2: #e78284;
+  --vp-c-brand-3: #e78284;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/rosewater.css b/theme/frappe/rosewater.css
new file mode 100644
index 0000000..0beb0be
--- /dev/null
+++ b/theme/frappe/rosewater.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dc8a78;
+  --vp-c-brand-2: #dc8a78;
+  --vp-c-brand-3: #dc8a78;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f2d5cf;
+  --vp-c-brand-2: #f2d5cf;
+  --vp-c-brand-3: #f2d5cf;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/sapphire.css b/theme/frappe/sapphire.css
new file mode 100644
index 0000000..2b9832b
--- /dev/null
+++ b/theme/frappe/sapphire.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #209fb5;
+  --vp-c-brand-2: #209fb5;
+  --vp-c-brand-3: #209fb5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #85c1dc;
+  --vp-c-brand-2: #85c1dc;
+  --vp-c-brand-3: #85c1dc;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/sky.css b/theme/frappe/sky.css
new file mode 100644
index 0000000..80e2d99
--- /dev/null
+++ b/theme/frappe/sky.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #04a5e5;
+  --vp-c-brand-2: #04a5e5;
+  --vp-c-brand-3: #04a5e5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #99d1db;
+  --vp-c-brand-2: #99d1db;
+  --vp-c-brand-3: #99d1db;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/teal.css b/theme/frappe/teal.css
new file mode 100644
index 0000000..0cf4fc1
--- /dev/null
+++ b/theme/frappe/teal.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #179299;
+  --vp-c-brand-2: #179299;
+  --vp-c-brand-3: #179299;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #81c8be;
+  --vp-c-brand-2: #81c8be;
+  --vp-c-brand-3: #81c8be;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/frappe/yellow.css b/theme/frappe/yellow.css
new file mode 100644
index 0000000..e9001c9
--- /dev/null
+++ b/theme/frappe/yellow.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #df8e1d;
+  --vp-c-brand-2: #df8e1d;
+  --vp-c-brand-3: #df8e1d;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(39, 77, 158);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(92, 55, 155);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(56, 106, 57);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(136, 97, 50);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(129, 34, 64);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-frappe-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #e5c890;
+  --vp-c-brand-2: #e5c890;
+  --vp-c-brand-3: #e5c890;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #c6d0f5;
+  --vp-c-black: #303446;
+  --vp-c-sponsor: #e78284;
+
+  /* Background Colors */
+  --vp-c-bg: #303446;
+  --vp-c-bg-alt: #292c3c;
+  --vp-c-bg-elv: #232634;
+  --vp-c-bg-soft: #414559;
+
+  /* Border Colors */
+  --vp-c-border: #414559;
+  --vp-c-divider: #414559;
+  --vp-c-gutter: #51576d;
+
+  /* Text Colors */
+  --vp-c-text-1: #c6d0f5;
+  --vp-c-text-2: #b5bfe2;
+  --vp-c-text-3: #a5adce;
+
+  /* Catppuccin Accents */
+  --ctp-frappe-rosewater: #f2d5cf;
+  --ctp-frappe-flamingo: #eebebe;
+  --ctp-frappe-pink: #f4b8e4;
+  --ctp-frappe-mauve: #ca9ee6;
+  --ctp-frappe-red: #e78284;
+  --ctp-frappe-maroon: #ea999c;
+  --ctp-frappe-peach: #ef9f76;
+  --ctp-frappe-yellow: #e5c890;
+  --ctp-frappe-green: #a6d189;
+  --ctp-frappe-teal: #81c8be;
+  --ctp-frappe-sky: #99d1db;
+  --ctp-frappe-sapphire: #85c1dc;
+  --ctp-frappe-blue: #8caaee;
+  --ctp-frappe-lavender: #babbf1;
+  --ctp-frappe-text: #c6d0f5;
+  --ctp-frappe-subtext1: #b5bfe2;
+  --ctp-frappe-subtext0: #a5adce;
+  --ctp-frappe-overlay2: #949cbb;
+  --ctp-frappe-overlay1: #838ba7;
+  --ctp-frappe-overlay0: #737994;
+  --ctp-frappe-surface2: #626880;
+  --ctp-frappe-surface1: #51576d;
+  --ctp-frappe-surface0: #414559;
+  --ctp-frappe-base: #303446;
+  --ctp-frappe-mantle: #292c3c;
+  --ctp-frappe-crust: #232634;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(81, 87, 109);
+  --vp-c-gray-2: rgb(65, 69, 89);
+  --vp-c-gray-3: rgb(48, 52, 70);
+  --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
+
+  --vp-c-indigo-1: rgb(140, 170, 238);
+  --vp-c-indigo-2: rgb(133, 167, 245);
+  --vp-c-indigo-3: rgb(94, 111, 154);
+  --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14);
+
+  --vp-c-purple-1: rgb(202, 158, 230);
+  --vp-c-purple-2: rgb(204, 152, 236);
+  --vp-c-purple-3: rgb(125, 105, 150);
+  --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14);
+
+  --vp-c-green-1: rgb(166, 209, 137);
+  --vp-c-green-2: rgb(164, 217, 129);
+  --vp-c-green-3: rgb(107, 131, 104);
+  --vp-c-green-soft: hsla(96, 44%, 48%, 0.14);
+
+  --vp-c-yellow-1: rgb(229, 200, 144);
+  --vp-c-yellow-2: rgb(236, 203, 138);
+  --vp-c-yellow-3: rgb(139, 126, 107);
+  --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14);
+
+  --vp-c-red-1: rgb(231, 130, 132);
+  --vp-c-red-2: rgb(239, 123, 125);
+  --vp-c-red-3: rgb(140, 91, 101);
+  --vp-c-red-soft: hsla(359, 68%, 51%, 0.14);
+}
diff --git a/theme/macchiato/blue.css b/theme/macchiato/blue.css
new file mode 100644
index 0000000..42f2a5b
--- /dev/null
+++ b/theme/macchiato/blue.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #1e66f5;
+  --vp-c-brand-2: #1e66f5;
+  --vp-c-brand-3: #1e66f5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #8aadf4;
+  --vp-c-brand-2: #8aadf4;
+  --vp-c-brand-3: #8aadf4;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/flamingo.css b/theme/macchiato/flamingo.css
new file mode 100644
index 0000000..508c9a1
--- /dev/null
+++ b/theme/macchiato/flamingo.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dd7878;
+  --vp-c-brand-2: #dd7878;
+  --vp-c-brand-3: #dd7878;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f0c6c6;
+  --vp-c-brand-2: #f0c6c6;
+  --vp-c-brand-3: #f0c6c6;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/green.css b/theme/macchiato/green.css
new file mode 100644
index 0000000..47e7d01
--- /dev/null
+++ b/theme/macchiato/green.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #40a02b;
+  --vp-c-brand-2: #40a02b;
+  --vp-c-brand-3: #40a02b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #a6da95;
+  --vp-c-brand-2: #a6da95;
+  --vp-c-brand-3: #a6da95;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/lavender.css b/theme/macchiato/lavender.css
new file mode 100644
index 0000000..78ce9b5
--- /dev/null
+++ b/theme/macchiato/lavender.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #7287fd;
+  --vp-c-brand-2: #7287fd;
+  --vp-c-brand-3: #7287fd;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #b7bdf8;
+  --vp-c-brand-2: #b7bdf8;
+  --vp-c-brand-3: #b7bdf8;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/maroon.css b/theme/macchiato/maroon.css
new file mode 100644
index 0000000..fb58896
--- /dev/null
+++ b/theme/macchiato/maroon.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #e64553;
+  --vp-c-brand-2: #e64553;
+  --vp-c-brand-3: #e64553;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #ee99a0;
+  --vp-c-brand-2: #ee99a0;
+  --vp-c-brand-3: #ee99a0;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/mauve.css b/theme/macchiato/mauve.css
new file mode 100644
index 0000000..9e1dc9d
--- /dev/null
+++ b/theme/macchiato/mauve.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #8839ef;
+  --vp-c-brand-2: #8839ef;
+  --vp-c-brand-3: #8839ef;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #c6a0f6;
+  --vp-c-brand-2: #c6a0f6;
+  --vp-c-brand-3: #c6a0f6;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/peach.css b/theme/macchiato/peach.css
new file mode 100644
index 0000000..1b72f76
--- /dev/null
+++ b/theme/macchiato/peach.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #fe640b;
+  --vp-c-brand-2: #fe640b;
+  --vp-c-brand-3: #fe640b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f5a97f;
+  --vp-c-brand-2: #f5a97f;
+  --vp-c-brand-3: #f5a97f;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/pink.css b/theme/macchiato/pink.css
new file mode 100644
index 0000000..101602d
--- /dev/null
+++ b/theme/macchiato/pink.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #ea76cb;
+  --vp-c-brand-2: #ea76cb;
+  --vp-c-brand-3: #ea76cb;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f5bde6;
+  --vp-c-brand-2: #f5bde6;
+  --vp-c-brand-3: #f5bde6;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/red.css b/theme/macchiato/red.css
new file mode 100644
index 0000000..c41b9f7
--- /dev/null
+++ b/theme/macchiato/red.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #d20f39;
+  --vp-c-brand-2: #d20f39;
+  --vp-c-brand-3: #d20f39;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #ed8796;
+  --vp-c-brand-2: #ed8796;
+  --vp-c-brand-3: #ed8796;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/rosewater.css b/theme/macchiato/rosewater.css
new file mode 100644
index 0000000..0d53535
--- /dev/null
+++ b/theme/macchiato/rosewater.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dc8a78;
+  --vp-c-brand-2: #dc8a78;
+  --vp-c-brand-3: #dc8a78;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f4dbd6;
+  --vp-c-brand-2: #f4dbd6;
+  --vp-c-brand-3: #f4dbd6;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/sapphire.css b/theme/macchiato/sapphire.css
new file mode 100644
index 0000000..44b829f
--- /dev/null
+++ b/theme/macchiato/sapphire.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #209fb5;
+  --vp-c-brand-2: #209fb5;
+  --vp-c-brand-3: #209fb5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #7dc4e4;
+  --vp-c-brand-2: #7dc4e4;
+  --vp-c-brand-3: #7dc4e4;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/sky.css b/theme/macchiato/sky.css
new file mode 100644
index 0000000..98b9baf
--- /dev/null
+++ b/theme/macchiato/sky.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #04a5e5;
+  --vp-c-brand-2: #04a5e5;
+  --vp-c-brand-3: #04a5e5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #91d7e3;
+  --vp-c-brand-2: #91d7e3;
+  --vp-c-brand-3: #91d7e3;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/teal.css b/theme/macchiato/teal.css
new file mode 100644
index 0000000..749ce21
--- /dev/null
+++ b/theme/macchiato/teal.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #179299;
+  --vp-c-brand-2: #179299;
+  --vp-c-brand-3: #179299;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #8bd5ca;
+  --vp-c-brand-2: #8bd5ca;
+  --vp-c-brand-3: #8bd5ca;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/macchiato/yellow.css b/theme/macchiato/yellow.css
new file mode 100644
index 0000000..68e2b66
--- /dev/null
+++ b/theme/macchiato/yellow.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #df8e1d;
+  --vp-c-brand-2: #df8e1d;
+  --vp-c-brand-3: #df8e1d;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(33, 70, 152);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(86, 48, 149);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(50, 99, 51);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(130, 90, 44);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(123, 27, 58);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-macchiato-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-macchiato-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #eed49f;
+  --vp-c-brand-2: #eed49f;
+  --vp-c-brand-3: #eed49f;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cad3f5;
+  --vp-c-black: #24273a;
+  --vp-c-sponsor: #ed8796;
+
+  /* Background Colors */
+  --vp-c-bg: #24273a;
+  --vp-c-bg-alt: #1e2030;
+  --vp-c-bg-elv: #181926;
+  --vp-c-bg-soft: #363a4f;
+
+  /* Border Colors */
+  --vp-c-border: #363a4f;
+  --vp-c-divider: #363a4f;
+  --vp-c-gutter: #494d64;
+
+  /* Text Colors */
+  --vp-c-text-1: #cad3f5;
+  --vp-c-text-2: #b8c0e0;
+  --vp-c-text-3: #a5adcb;
+
+  /* Catppuccin Accents */
+  --ctp-macchiato-rosewater: #f4dbd6;
+  --ctp-macchiato-flamingo: #f0c6c6;
+  --ctp-macchiato-pink: #f5bde6;
+  --ctp-macchiato-mauve: #c6a0f6;
+  --ctp-macchiato-red: #ed8796;
+  --ctp-macchiato-maroon: #ee99a0;
+  --ctp-macchiato-peach: #f5a97f;
+  --ctp-macchiato-yellow: #eed49f;
+  --ctp-macchiato-green: #a6da95;
+  --ctp-macchiato-teal: #8bd5ca;
+  --ctp-macchiato-sky: #91d7e3;
+  --ctp-macchiato-sapphire: #7dc4e4;
+  --ctp-macchiato-blue: #8aadf4;
+  --ctp-macchiato-lavender: #b7bdf8;
+  --ctp-macchiato-text: #cad3f5;
+  --ctp-macchiato-subtext1: #b8c0e0;
+  --ctp-macchiato-subtext0: #a5adcb;
+  --ctp-macchiato-overlay2: #939ab7;
+  --ctp-macchiato-overlay1: #8087a2;
+  --ctp-macchiato-overlay0: #6e738d;
+  --ctp-macchiato-surface2: #5b6078;
+  --ctp-macchiato-surface1: #494d64;
+  --ctp-macchiato-surface0: #363a4f;
+  --ctp-macchiato-base: #24273a;
+  --ctp-macchiato-mantle: #1e2030;
+  --ctp-macchiato-crust: #181926;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(73, 77, 100);
+  --vp-c-gray-2: rgb(54, 58, 79);
+  --vp-c-gray-3: rgb(36, 39, 58);
+  --vp-c-gray-soft: hsla(232, 24%, 49%, 0.14);
+
+  --vp-c-indigo-1: rgb(138, 173, 244);
+  --vp-c-indigo-2: rgb(132, 171, 250);
+  --vp-c-indigo-3: rgb(87, 106, 151);
+  --vp-c-indigo-soft: hsla(220, 83%, 55%, 0.14);
+
+  --vp-c-purple-1: rgb(198, 160, 246);
+  --vp-c-purple-2: rgb(198, 155, 251);
+  --vp-c-purple-3: rgb(117, 99, 152);
+  --vp-c-purple-soft: hsla(267, 83%, 60%, 0.14);
+
+  --vp-c-green-1: rgb(166, 218, 149);
+  --vp-c-green-2: rgb(163, 225, 143);
+  --vp-c-green-3: rgb(101, 128, 104);
+  --vp-c-green-soft: hsla(105, 48%, 52%, 0.14);
+
+  --vp-c-yellow-1: rgb(238, 212, 159);
+  --vp-c-yellow-2: rgb(244, 214, 154);
+  --vp-c-yellow-3: rgb(137, 125, 109);
+  --vp-c-yellow-soft: hsla(40, 70%, 58%, 0.14);
+
+  --vp-c-red-1: rgb(237, 135, 150);
+  --vp-c-red-2: rgb(244, 128, 145);
+  --vp-c-red-3: rgb(137, 87, 104);
+  --vp-c-red-soft: hsla(351, 74%, 53%, 0.14);
+}
diff --git a/theme/mocha/blue.css b/theme/mocha/blue.css
new file mode 100644
index 0000000..086bb8e
--- /dev/null
+++ b/theme/mocha/blue.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #1e66f5;
+  --vp-c-brand-2: #1e66f5;
+  --vp-c-brand-3: #1e66f5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #89b4fa;
+  --vp-c-brand-2: #89b4fa;
+  --vp-c-brand-3: #89b4fa;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/flamingo.css b/theme/mocha/flamingo.css
new file mode 100644
index 0000000..b39041a
--- /dev/null
+++ b/theme/mocha/flamingo.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dd7878;
+  --vp-c-brand-2: #dd7878;
+  --vp-c-brand-3: #dd7878;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f2cdcd;
+  --vp-c-brand-2: #f2cdcd;
+  --vp-c-brand-3: #f2cdcd;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/green.css b/theme/mocha/green.css
new file mode 100644
index 0000000..dcd255e
--- /dev/null
+++ b/theme/mocha/green.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #40a02b;
+  --vp-c-brand-2: #40a02b;
+  --vp-c-brand-3: #40a02b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #a6e3a1;
+  --vp-c-brand-2: #a6e3a1;
+  --vp-c-brand-3: #a6e3a1;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/lavender.css b/theme/mocha/lavender.css
new file mode 100644
index 0000000..acf1e1c
--- /dev/null
+++ b/theme/mocha/lavender.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #7287fd;
+  --vp-c-brand-2: #7287fd;
+  --vp-c-brand-3: #7287fd;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #b4befe;
+  --vp-c-brand-2: #b4befe;
+  --vp-c-brand-3: #b4befe;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/maroon.css b/theme/mocha/maroon.css
new file mode 100644
index 0000000..a6a3844
--- /dev/null
+++ b/theme/mocha/maroon.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #e64553;
+  --vp-c-brand-2: #e64553;
+  --vp-c-brand-3: #e64553;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #eba0ac;
+  --vp-c-brand-2: #eba0ac;
+  --vp-c-brand-3: #eba0ac;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/mauve.css b/theme/mocha/mauve.css
new file mode 100644
index 0000000..ca20da9
--- /dev/null
+++ b/theme/mocha/mauve.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #8839ef;
+  --vp-c-brand-2: #8839ef;
+  --vp-c-brand-3: #8839ef;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #cba6f7;
+  --vp-c-brand-2: #cba6f7;
+  --vp-c-brand-3: #cba6f7;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/peach.css b/theme/mocha/peach.css
new file mode 100644
index 0000000..ab62538
--- /dev/null
+++ b/theme/mocha/peach.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #fe640b;
+  --vp-c-brand-2: #fe640b;
+  --vp-c-brand-3: #fe640b;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #fab387;
+  --vp-c-brand-2: #fab387;
+  --vp-c-brand-3: #fab387;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/pink.css b/theme/mocha/pink.css
new file mode 100644
index 0000000..8048f54
--- /dev/null
+++ b/theme/mocha/pink.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #ea76cb;
+  --vp-c-brand-2: #ea76cb;
+  --vp-c-brand-3: #ea76cb;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f5c2e7;
+  --vp-c-brand-2: #f5c2e7;
+  --vp-c-brand-3: #f5c2e7;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/red.css b/theme/mocha/red.css
new file mode 100644
index 0000000..aa01b42
--- /dev/null
+++ b/theme/mocha/red.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #d20f39;
+  --vp-c-brand-2: #d20f39;
+  --vp-c-brand-3: #d20f39;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f38ba8;
+  --vp-c-brand-2: #f38ba8;
+  --vp-c-brand-3: #f38ba8;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/rosewater.css b/theme/mocha/rosewater.css
new file mode 100644
index 0000000..1af3711
--- /dev/null
+++ b/theme/mocha/rosewater.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #dc8a78;
+  --vp-c-brand-2: #dc8a78;
+  --vp-c-brand-3: #dc8a78;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f5e0dc;
+  --vp-c-brand-2: #f5e0dc;
+  --vp-c-brand-3: #f5e0dc;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/sapphire.css b/theme/mocha/sapphire.css
new file mode 100644
index 0000000..6f96094
--- /dev/null
+++ b/theme/mocha/sapphire.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #209fb5;
+  --vp-c-brand-2: #209fb5;
+  --vp-c-brand-3: #209fb5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #74c7ec;
+  --vp-c-brand-2: #74c7ec;
+  --vp-c-brand-3: #74c7ec;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/sky.css b/theme/mocha/sky.css
new file mode 100644
index 0000000..0ea531c
--- /dev/null
+++ b/theme/mocha/sky.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #04a5e5;
+  --vp-c-brand-2: #04a5e5;
+  --vp-c-brand-3: #04a5e5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #89dceb;
+  --vp-c-brand-2: #89dceb;
+  --vp-c-brand-3: #89dceb;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/teal.css b/theme/mocha/teal.css
new file mode 100644
index 0000000..8997224
--- /dev/null
+++ b/theme/mocha/teal.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #179299;
+  --vp-c-brand-2: #179299;
+  --vp-c-brand-3: #179299;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #94e2d5;
+  --vp-c-brand-2: #94e2d5;
+  --vp-c-brand-3: #94e2d5;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/theme/mocha/yellow.css b/theme/mocha/yellow.css
new file mode 100644
index 0000000..e3833e4
--- /dev/null
+++ b/theme/mocha/yellow.css
@@ -0,0 +1,180 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* https://catppuccin.com/palette */
+
+
+:root {
+  /* Accent Color */
+  --vp-c-brand-1: #df8e1d;
+  --vp-c-brand-2: #df8e1d;
+  --vp-c-brand-3: #df8e1d;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #eff1f5;
+  --vp-c-black: #4c4f69;
+  --vp-c-sponsor: #d20f39;
+
+  /* Background Colors */
+  --vp-c-bg: #eff1f5;
+  --vp-c-bg-alt: #e6e9ef;
+  --vp-c-bg-elv: #dce0e8;
+  --vp-c-bg-soft: #ccd0da;
+
+  /* Border Colors */
+  --vp-c-border: #ccd0da;
+  --vp-c-divider: #ccd0da;
+  --vp-c-gutter: #bcc0cc;
+
+  /* Text Colors */
+  --vp-c-text-1: #4c4f69;
+  --vp-c-text-2: #5c5f77;
+  --vp-c-text-3: #6c6f85;
+
+  /* Catppuccin Accents */
+  --ctp-latte-rosewater: #dc8a78;
+  --ctp-latte-flamingo: #dd7878;
+  --ctp-latte-pink: #ea76cb;
+  --ctp-latte-mauve: #8839ef;
+  --ctp-latte-red: #d20f39;
+  --ctp-latte-maroon: #e64553;
+  --ctp-latte-peach: #fe640b;
+  --ctp-latte-yellow: #df8e1d;
+  --ctp-latte-green: #40a02b;
+  --ctp-latte-teal: #179299;
+  --ctp-latte-sky: #04a5e5;
+  --ctp-latte-sapphire: #209fb5;
+  --ctp-latte-blue: #1e66f5;
+  --ctp-latte-lavender: #7287fd;
+  --ctp-latte-text: #4c4f69;
+  --ctp-latte-subtext1: #5c5f77;
+  --ctp-latte-subtext0: #6c6f85;
+  --ctp-latte-overlay2: #7c7f93;
+  --ctp-latte-overlay1: #8c8fa1;
+  --ctp-latte-overlay0: #9ca0b0;
+  --ctp-latte-surface2: #acb0be;
+  --ctp-latte-surface1: #bcc0cc;
+  --ctp-latte-surface0: #ccd0da;
+  --ctp-latte-base: #eff1f5;
+  --ctp-latte-mantle: #e6e9ef;
+  --ctp-latte-crust: #dce0e8;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(188, 192, 204);
+  --vp-c-gray-2: rgb(204, 208, 218);
+  --vp-c-gray-3: rgb(239, 241, 245);
+  --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
+
+  --vp-c-indigo-1: rgb(30, 102, 245);
+  --vp-c-indigo-2: rgb(21, 99, 255);
+  --vp-c-indigo-3: rgb(30, 66, 146);
+  --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14);
+
+  --vp-c-purple-1: rgb(136, 57, 239);
+  --vp-c-purple-2: rgb(134, 46, 250);
+  --vp-c-purple-3: rgb(83, 44, 143);
+  --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14);
+
+  --vp-c-green-1: rgb(64, 160, 43);
+  --vp-c-green-2: rgb(58, 171, 33);
+  --vp-c-green-3: rgb(47, 95, 45);
+  --vp-c-green-soft: hsla(109, 58%, 20%, 0.14);
+
+  --vp-c-yellow-1: rgb(223, 142, 29);
+  --vp-c-yellow-2: rgb(236, 144, 16);
+  --vp-c-yellow-3: rgb(127, 86, 38);
+  --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14);
+
+  --vp-c-red-1: rgb(210, 15, 57);
+  --vp-c-red-2: rgb(222, 4, 51);
+  --vp-c-red-3: rgb(120, 23, 52);
+  --vp-c-red-soft: hsla(347, 87%, 24%, 0.14);
+}
+.dark {
+  /* Fix button text color */
+  --vp-button-brand-text: var(--ctp-mocha-crust) !important;
+  --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important;
+
+  /* Accent Color */
+  --vp-c-brand-1: #f9e2af;
+  --vp-c-brand-2: #f9e2af;
+  --vp-c-brand-3: #f9e2af;
+
+  /* Solid Colors and Sponsor Color */
+  --vp-c-white: #cdd6f4;
+  --vp-c-black: #1e1e2e;
+  --vp-c-sponsor: #f38ba8;
+
+  /* Background Colors */
+  --vp-c-bg: #1e1e2e;
+  --vp-c-bg-alt: #181825;
+  --vp-c-bg-elv: #11111b;
+  --vp-c-bg-soft: #313244;
+
+  /* Border Colors */
+  --vp-c-border: #313244;
+  --vp-c-divider: #313244;
+  --vp-c-gutter: #45475a;
+
+  /* Text Colors */
+  --vp-c-text-1: #cdd6f4;
+  --vp-c-text-2: #bac2de;
+  --vp-c-text-3: #a6adc8;
+
+  /* Catppuccin Accents */
+  --ctp-mocha-rosewater: #f5e0dc;
+  --ctp-mocha-flamingo: #f2cdcd;
+  --ctp-mocha-pink: #f5c2e7;
+  --ctp-mocha-mauve: #cba6f7;
+  --ctp-mocha-red: #f38ba8;
+  --ctp-mocha-maroon: #eba0ac;
+  --ctp-mocha-peach: #fab387;
+  --ctp-mocha-yellow: #f9e2af;
+  --ctp-mocha-green: #a6e3a1;
+  --ctp-mocha-teal: #94e2d5;
+  --ctp-mocha-sky: #89dceb;
+  --ctp-mocha-sapphire: #74c7ec;
+  --ctp-mocha-blue: #89b4fa;
+  --ctp-mocha-lavender: #b4befe;
+  --ctp-mocha-text: #cdd6f4;
+  --ctp-mocha-subtext1: #bac2de;
+  --ctp-mocha-subtext0: #a6adc8;
+  --ctp-mocha-overlay2: #9399b2;
+  --ctp-mocha-overlay1: #7f849c;
+  --ctp-mocha-overlay0: #6c7086;
+  --ctp-mocha-surface2: #585b70;
+  --ctp-mocha-surface1: #45475a;
+  --ctp-mocha-surface0: #313244;
+  --ctp-mocha-base: #1e1e2e;
+  --ctp-mocha-mantle: #181825;
+  --ctp-mocha-crust: #11111b;
+  
+  /* Color Palette */
+  --vp-c-gray-1: rgb(69, 71, 90);
+  --vp-c-gray-2: rgb(49, 50, 68);
+  --vp-c-gray-3: rgb(30, 30, 46);
+  --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14);
+
+  --vp-c-indigo-1: rgb(137, 180, 250);
+  --vp-c-indigo-2: rgb(133, 180, 255);
+  --vp-c-indigo-3: rgb(84, 105, 148);
+  --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14);
+
+  --vp-c-purple-1: rgb(203, 166, 247);
+  --vp-c-purple-2: rgb(203, 162, 252);
+  --vp-c-purple-3: rgb(117, 98, 147);
+  --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14);
+
+  --vp-c-green-1: rgb(166, 227, 161);
+  --vp-c-green-2: rgb(161, 233, 155);
+  --vp-c-green-3: rgb(98, 129, 104);
+  --vp-c-green-soft: hsla(115, 54%, 56%, 0.14);
+
+  --vp-c-yellow-1: rgb(249, 226, 175);
+  --vp-c-yellow-2: rgb(253, 227, 171);
+  --vp-c-yellow-3: rgb(140, 128, 111);
+  --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14);
+
+  --vp-c-red-1: rgb(243, 139, 168);
+  --vp-c-red-2: rgb(249, 133, 166);
+  --vp-c-red-3: rgb(137, 85, 107);
+  --vp-c-red-soft: hsla(343, 81%, 55%, 0.14);
+}
diff --git a/vitepress.tera b/vitepress.tera
index f378de9..7f95694 100644
--- a/vitepress.tera
+++ b/vitepress.tera
@@ -3,31 +3,14 @@ whiskers:
   version: 2.3.0
   matrix:
     - flavor: ["frappe", "macchiato", "mocha"]
-  filename: "theme/{{flavor.identifier}}.css"
+    - accent
+  filename: "theme/{{flavor.identifier}}/{{accent}}.css"
 ---
 /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* https://catppuccin.com/palette */
 
 {% set modes = ["light", "dark"] -%}
 
-/* Example: Brand Customization */
-/*
-{%- for mode in modes %}
-  {%- if mode == "light" -%}
-  {%- set palette = flavors["latte"].colors %}
-  {%- set paletteid = flavors["latte"].identifier %}
-:root {
-  {% else -%}
-  {%- set palette = flavor.colors %}
-  {%- set paletteid = flavor.identifier %}
-.dark {
-  {% endif -%}
-  --vp-c-brand-1: var(--ctp-{{ paletteid }}-red);
-  --vp-c-brand-2: var(--ctp-{{ paletteid }}-lavender);
-  --vp-c-brand-3: var(--ctp-{{ paletteid }}-mauve);
-}
-{%- endfor %}
-*/
 {% for mode in modes %}
   {%- if mode == "light" -%}
   {%- set palette = flavors["latte"].colors %}
@@ -42,6 +25,11 @@ whiskers:
   --vp-button-brand-hover-text: var(--ctp-{{ paletteid }}-crust) !important;
 
   {% endif -%}
+  /* Accent Color */
+  --vp-c-brand-1: #{{ palette[accent].hex }};
+  --vp-c-brand-2: #{{ palette[accent].hex }};
+  --vp-c-brand-3: #{{ palette[accent].hex }};
+
   /* Solid Colors and Sponsor Color */
   {%- if mode == "light" %}
   --vp-c-white: #{{ palette.base.hex }};