feat: new theme

src/styles/style.css

@@ -1,13 +1,42 @@
 :root {
-  --primary-color: #8F2447;
-  --background-color: #E1F6F9DC;
-  --sl-color-text-accent: #8F2447;
+  /* Witch color palette */
+  --witch-purple: #2B1B3D;
+  --witch-plum: #44275A;
+  --witch-rose: #A8577E;
+  --witch-mauve: #D4A5C7;
+  --witch-lavender: #E8D5E8;
+  --witch-black: #0A0009;
+  --witch-silver: #C0C0C0;
+  --witch-moon: #F5F5F5;
+  --witch-shadow: rgba(10, 0, 9, 0.7);
+
+  /* Light theme uses lighter colors for background, darker for text */
+  --primary-color: var(--witch-purple);
+  --background-color: var(--witch-lavender)DC;
+  --sl-color-text-accent: var(--witch-purple);
+
+  /* Additional Starlight overrides */
+  --sl-color-gray-1: var(--witch-moon);
+  --sl-color-gray-2: var(--witch-lavender);
+  --sl-color-gray-3: var(--witch-mauve);
+  --sl-color-gray-4: var(--witch-rose);
+  --sl-color-gray-5: var(--witch-plum);
+  --sl-color-gray-6: var(--witch-purple);
 }
 
 html[data-theme="dark"] {
-  --primary-color: #E1F6F9;
-  --background-color: #8F2447ee;
-  --sl-color-text-accent: #E1F6F9;
+  /* Dark theme uses darker colors for background, lighter for text */
+  --primary-color: var(--witch-lavender);
+  --background-color: var(--witch-purple)ee;
+  --sl-color-text-accent: var(--witch-lavender);
+
+  /* Additional Starlight overrides for dark theme */
+  --sl-color-gray-1: var(--witch-purple);
+  --sl-color-gray-2: var(--witch-plum);
+  --sl-color-gray-3: var(--witch-rose);
+  --sl-color-gray-4: var(--witch-mauve);
+  --sl-color-gray-5: var(--witch-lavender);
+  --sl-color-gray-6: var(--witch-moon);
 }
 
 .main-frame::before {
@@ -50,7 +79,7 @@ a {
 
 a[aria-current="page"] {
   color: var(--background-color) !important;
-  background-color: var(--primary-color) !important;
+  background-color: var(--witch-rose) !important;
 }
 
 header {
@@ -67,8 +96,8 @@ header {
 }
 
 .right-sidebar-panel :where(a):hover {
-  color: var(--background-color) !important;
-  background-color: var(--primary-color) !important;
+  color: var(--witch-moon) !important;
+  background-color: var(--witch-rose) !important;
 }
 
 footer > div > a,
@@ -94,13 +123,13 @@ starlight-theme-select, starlight-theme-select > label {
 }
 
 .pagination-links > a:hover {
-  color: var(--background-color) !important;
-  background-color: var(--primary-color) !important;
+  color: var(--witch-moon) !important;
+  background-color: var(--witch-plum) !important;
 }
 
 .pagination-links > a:hover > span > .link-title {
-  color: var(--background-color) !important;
-  background-color: var(--primary-color) !important;
+  color: var(--witch-moon) !important;
+  background-color: var(--witch-plum) !important;
 }
 
 #extra-footer-content {