feat: template matrix accent

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);
+}

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);
+}