diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
new file mode 100644
index 000000000..dd21909ab
--- /dev/null
+++ b/docs/.vuepress/styles/index.scss
@@ -0,0 +1,44 @@
+.home .hero img {
+  max-width: 500px !important;
+  min-width: 300px;
+  width: 100%;
+  height: 100%;
+}
+
+.center {
+  margin: 0 auto;
+  width: 80%;
+  .demo-video {
+    width: 100%;
+    margin: 50px 0;
+    border-radius: 6px;
+  }
+}
+
+.hero {
+  margin: 150px 25px 70px;
+}
+
+.action-button {
+  background-color: #dd0b78 !important;
+  border: none !important;
+  color: #fff !important;
+}
+
+@font-face {
+  font-family: 'Nerd Font';
+  src: url("/nerd-font.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+:root {
+  --c-brand: #DD0B78;
+  --c-brand-light: #DD0B78CC;
+  --font-family-code: 'Nerd Font', source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+html.dark {
+  --c-brand: #ff33b8;
+  --c-brand-light: #ff33b8cc;
+}
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index 0497ece25..000000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,38 +0,0 @@
-.home .hero img
-  max-width: 500px !important
-  min-width: 300px
-  width: 100%
-
-.center
-  margin 0 auto;
-  width: 80%
-  .demo-video
-    width: 100%
-    margin: 50px 0
-    border-radius: 6px
-
-.hero
-  margin: 150px 25px 70px
-
-.action-button
-  background-color: #dd0b78 !important
-  border-bottom: #c6096b !important
-
-@font-face
-  font-family: 'Nerd Font';
-  src: url("/nerd-font.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal
-
-code
-  font-family: 'Nerd Font', source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  overflow-wrap: break-word
-
-@media (prefers-color-scheme: light)
-  :root
-    --languageTextColor: rgba(255,255,255,0.4)
-
-.code-copy
-  position: absolute
-  right: 0
-  bottom: 1px
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
deleted file mode 100644
index 39ebb762f..000000000
--- a/docs/.vuepress/styles/palette.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-$accentColor = #DD0B78
-$accentDarkColor = #ff33b8
-$textColor = #2c3e50
-$borderColor = #eaecef
-$codeBgLightColor = #282c34
-$preTextLightColor = #fff