Tweak theming

Author: NatKarmios

.vitepress/theme/index.ts

@@ -2,7 +2,7 @@
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import '@catppuccin/vitepress/theme/mocha/red.css'
+import '@catppuccin/vitepress/theme/mocha/sapphire.css'
 import './style.css'
 
 export default {

.vitepress/theme/style.css

@@ -1,5 +1,32 @@
 :root {
   --vp-nav-logo-height: 36px;
+  --vp-c-brand-alt-1: #d20f39;
+  --vp-c-brand-alt-2: rgb(187, 13, 51);
+  --vp-c-brand-alt-3: #d20f39;
+  /* --vp-c-brand-alt-1: #209fb5; */
+  /* --vp-c-brand-alt-2: rgb(28, 140, 160); */
+  /* --vp-c-brand-alt-3: #209fb5; */
+
+  --vp-home-hero-name-color: var(--vp-c-brand-alt-1);
+}
+
+.dark {
+  --vp-c-brand-alt-1: #f38ba8;
+  --vp-c-brand-alt-2: rgb(241, 115, 151);
+  --vp-c-brand-alt-3: #f38ba8;
+  /* --vp-c-brand-alt-1: #74c7ec; */
+  /* --vp-c-brand-alt-2: rgb(93, 189, 233); */
+  /* --vp-c-brand-alt-3: #74c7ec; */
+}
+
+.pager,
+.header-anchor,
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code,
+.VPSidebar
+{
+  --vp-c-brand-1: var(--vp-c-brand-alt-1);
+  --vp-c-brand-2: var(--vp-c-brand-alt-2);
+  --vp-c-brand-3: var(--vp-c-brand-alt-3);
 }
 
 .odoc-breadcrumbs {