diff --git a/src/assets/images/moon.svg b/src/assets/images/moon.svg
new file mode 100644
index 0000000..68f2353
--- /dev/null
+++ b/src/assets/images/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+</svg>
diff --git a/src/assets/images/sun.svg b/src/assets/images/sun.svg
new file mode 100644
index 0000000..16fcaaf
--- /dev/null
+++ b/src/assets/images/sun.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+  </svg
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
deleted file mode 100644
index f503135..0000000
--- a/src/assets/scss/style.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "@/assets/scss/variables.scss";
-// @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap");
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: #213547;
-  background-color: #ffffff;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  background-color: white;
-  // min-height: 100vh;
-  a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-    &:hover {
-      color: #535bf2;
-    }
-  }
-}
-
-#app {
-  // min-height: 100vh;
-  width: 1280px;
-  max-width: 1280px;
-  margin: 0 auto;
-  // padding: 2em 2em 0;
-  // text-align: center;
-}
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
deleted file mode 100644
index 43b70bf..0000000
--- a/src/assets/scss/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// $navHeight: 170px;
-// $topbarHeight: 80px;
-// $bottombarHeight: 60px;
-// // $navbarHeight-tablet: 100px;
-// $navbarHeight-desktop: 130px;
-// $contentFont: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
-// $headerFont: "Roboto Slab", serif;
diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
new file mode 100644
index 0000000..01fb38f
--- /dev/null
+++ b/src/assets/styles/base.scss
@@ -0,0 +1,172 @@
+@import "./vars.css";
+// @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap");
+
+:root {
+  // font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  // line-height: 1.5;
+  // font-weight: 400;
+
+  // color-scheme: light dark;
+  // color: #213547;
+  // background-color: #ffffff;
+
+  // font-synthesis: none;
+  // text-rendering: optimizeLegibility;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+  // -webkit-text-size-adjust: 100%;
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.4;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+body {
+  // margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  // background-color: white;
+  // min-height: 100vh;
+  margin: 0;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: 24px;
+  font-family: var(--vp-font-family-base);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg);
+  direction: ltr;
+  font-synthesis: style;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  // font-weight: 500;
+  // color: #646cff;
+  color: inherit;
+  text-decoration: inherit;
+  transition: color .25s;
+  // &:hover {
+  //   color: #535bf2;
+  // }
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  border: 0;
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+button {
+  padding: 0;
+  font-family: inherit;
+  background-color: transparent;
+  background-image: none;
+}
+
+button:enabled,
+[role='button']:enabled {
+  cursor: pointer;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 1px dotted;
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+input, textarea {
+  background-color: transparent;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+select {
+  -webkit-appearance: none;
+}
+
+#app {
+  // min-height: 100vh;
+  width: 1280px;
+  max-width: 1280px;
+  margin: 0 auto;
+  // padding: 2em 2em 0;
+  // text-align: center;
+}
diff --git a/src/assets/styles/vars.css b/src/assets/styles/vars.css
new file mode 100644
index 0000000..166cb12
--- /dev/null
+++ b/src/assets/styles/vars.css
@@ -0,0 +1,520 @@
+/**
+ * Colors: Solid
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-white: #ffffff;
+  --vp-c-black: #000000;
+
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
+
+.dark {
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+}
+
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-gray-1: #dddde3;
+  --vp-c-gray-2: #e4e4e9;
+  --vp-c-gray-3: #ebebef;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+  --vp-c-indigo-1: #3451b2;
+  --vp-c-indigo-2: #3a5ccc;
+  --vp-c-indigo-3: #5672cd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+  --vp-c-green-1: #18794e;
+  --vp-c-green-2: #299764;
+  --vp-c-green-3: #30a46c;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+  --vp-c-yellow-1: #915930;
+  --vp-c-yellow-2: #946300;
+  --vp-c-yellow-3: #9f6a00;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+  --vp-c-red-1: #b8272c;
+  --vp-c-red-2: #d5393e;
+  --vp-c-red-3: #e0575b;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.14);
+
+  --vp-c-sponsor: #db2777;
+}
+
+.dark {
+  --vp-c-gray-1: #515c67;
+  --vp-c-gray-2: #414853;
+  --vp-c-gray-3: #32363f;
+  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+  --vp-c-indigo-1: #a8b1ff;
+  --vp-c-indigo-2: #5c73e7;
+  --vp-c-indigo-3: #3e63dd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+  --vp-c-green-1: #3dd68c;
+  --vp-c-green-2: #30a46c;
+  --vp-c-green-3: #298459;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+  --vp-c-yellow-1: #f9b44e;
+  --vp-c-yellow-2: #da8b17;
+  --vp-c-yellow-3: #a46a0a;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+  --vp-c-red-1: #f66f81;
+  --vp-c-red-2: #f14158;
+  --vp-c-red-3: #b62a3c;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+}
+
+/**
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+}
+
+.dark {
+  --vp-c-bg: #1b1b1f;
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+}
+
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #e2e2e3;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #2e2e32;
+  --vp-c-gutter: #000000;
+}
+
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
+}
+
+.dark {
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+}
+
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+  --vp-c-brand: var(--vp-c-brand-1);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/**
+ * Z-indexes
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-z-index-footer: 10;
+  --vp-z-index-local-nav: 20;
+  --vp-z-index-nav: 30;
+  --vp-z-index-layout-top: 40;
+  --vp-z-index-backdrop: 50;
+  --vp-z-index-sidebar: 60;
+}
+
+/**
+ * Icons
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
+}
+
+/**
+ * Layouts
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-layout-max-width: 1440px;
+}
+
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-header-anchor-symbol: '#';
+}
+
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-code-line-height: 1.7;
+  --vp-code-font-size: 0.875em;
+  --vp-code-color: var(--vp-c-brand-1);
+  --vp-code-link-color: var(--vp-c-brand-1);
+  --vp-code-link-hover-color: var(--vp-c-brand-2);
+  --vp-code-bg: var(--vp-c-default-soft);
+
+  --vp-code-block-color: var(--vp-c-text-2);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-divider-color: var(--vp-c-gutter);
+
+  --vp-code-lang-color: var(--vp-c-text-3);
+
+  --vp-code-line-highlight-color: var(--vp-c-default-soft);
+  --vp-code-line-number-color: var(--vp-c-text-3);
+
+  --vp-code-line-diff-add-color: var(--vp-c-green-soft);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
+
+  --vp-code-line-diff-remove-color: var(--vp-c-red-soft);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
+
+  --vp-code-line-warning-color: var(--vp-c-yellow-soft);
+  --vp-code-line-error-color: var(--vp-c-red-soft);
+
+  --vp-code-copy-code-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
+  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-code-copy-copied-text-content: 'Copied';
+
+  --vp-code-tab-divider: var(--vp-code-block-divider-color);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-bg: var(--vp-code-block-bg);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: var(--vp-c-default-3);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: var(--vp-c-default-2);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
+
+  --vp-button-sponsor-border: var(--vp-c-text-2);
+  --vp-button-sponsor-text: var(--vp-c-text-2);
+  --vp-button-sponsor-bg: transparent;
+  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-bg: transparent;
+  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-bg: transparent;
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-font-size: 14px;
+  --vp-custom-block-code-font-size: 13px;
+
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-default-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
+
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+
+  --vp-custom-block-warning-border: transparent;
+  --vp-custom-block-warning-text: var(--vp-c-text-1);
+  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
+
+  --vp-custom-block-danger-border: transparent;
+  --vp-custom-block-danger-text: var(--vp-c-text-1);
+  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
+
+  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
+  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
+  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
+}
+
+/**
+ * Component: Input
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-input-border-color: var(--vp-c-border);
+  --vp-input-bg-color: var(--vp-c-bg-alt);
+
+  --vp-input-switch-bg-color: var(--vp-c-gray-soft);
+}
+
+/**
+ * Component: Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-nav-height: 64px;
+  --vp-nav-bg-color: var(--vp-c-bg);
+  --vp-nav-screen-bg-color: var(--vp-c-bg);
+  --vp-nav-logo-height: 24px;
+}
+
+.hide-nav {
+  --vp-nav-height: 0px;
+}
+
+.hide-nav .VPSidebar {
+  --vp-nav-height: 22px;
+}
+
+/**
+ * Component: Local Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-nav-bg-color: var(--vp-c-bg);
+}
+
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-sidebar-width: 272px;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+}
+
+/**
+ * Colors Backdrop
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
+  --vp-home-hero-name-background: transparent;
+
+  --vp-home-hero-image-background-image: none;
+  --vp-home-hero-image-filter: none;
+}
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-badge-info-border: transparent;
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-default-soft);
+
+  --vp-badge-tip-border: transparent;
+  --vp-badge-tip-text: var(--vp-c-brand-1);
+  --vp-badge-tip-bg: var(--vp-c-brand-soft);
+
+  --vp-badge-warning-border: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
+
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
+}
+
+/**
+ * Component: Carbon Ads
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-carbon-ads-text-color: var(--vp-c-text-1);
+  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
+  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
+  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
+  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
+}
+
+/**
+  * Component: Local Search
+  * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-search-bg: var(--vp-c-bg);
+  --vp-local-search-result-bg: var(--vp-c-bg);
+  --vp-local-search-result-border: var(--vp-c-divider);
+  --vp-local-search-result-selected-bg: var(--vp-c-bg);
+  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
+  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
+}
diff --git a/src/components/SectionHeader.vue b/src/components/SectionHeader.vue
index 3d45c1f..456649e 100644
--- a/src/components/SectionHeader.vue
+++ b/src/components/SectionHeader.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 </template>
 
 <style lang="scss" scoped>
-@import "@/assets/scss/variables.scss";
+// @import "@/assets/scss/variables.scss";
 .section-header-container {
   min-height: 100px;
   position: relative;
diff --git a/src/components/drawers/SimpleDrawer.vue b/src/components/drawers/SimpleDrawer.vue
index bf8519c..94e77cd 100644
--- a/src/components/drawers/SimpleDrawer.vue
+++ b/src/components/drawers/SimpleDrawer.vue
@@ -20,11 +20,15 @@ const isDrawerOpen = defineModel<boolean>();
   // top: 0;
   left: 0;
   height: 100%;
-  width: 270px;
+  min-height: 500px;
+  // min-width: 270px;
   translate: -300px 0;
-  transition: all 0.2s ease;
+  transition: translate 0.2s ease;
   // background-color: #eee;
-  background-color: white;
+  // background-color: white;
+  // background-color: var(--vp-sidebar-bg-color);
+  border-bottom: var(--vp-c-border) 1px solid;
+  border-right: 1px solid var(--vp-c-divider);
   .notebook &,
   .desktop & {
     position: initial;
diff --git a/src/components/drawers/TouchSlideoutDrawer.vue b/src/components/drawers/TouchSlideoutDrawer.vue
index 2032801..4b8d8a9 100644
--- a/src/components/drawers/TouchSlideoutDrawer.vue
+++ b/src/components/drawers/TouchSlideoutDrawer.vue
@@ -243,11 +243,12 @@ onUnmounted(() => {
     position: absolute;
     top: 0;
     left: 0;
-    background-color: #eee;
+    background-color: var(--vp-sidebar-bg-color);
     .notebook &,
     .desktop & {
       position: initial;
-      background-color: white;
+      // background-color: white;
+      background-color: var(--vp-sidebar-bg-color);
     }
     .touch-slideout-drawer {
       display: block;
diff --git a/src/components/footers/DistributedFooter.vue b/src/components/footers/DistributedFooter.vue
index 5878bbb..d800097 100644
--- a/src/components/footers/DistributedFooter.vue
+++ b/src/components/footers/DistributedFooter.vue
@@ -44,13 +44,6 @@
 </template>
 
 <style lang="scss" scoped>
-/* Footer left */
-/* The company logo */
-/* Footer links */
-/* Footer social icons */
-/* Footer Right */
-/* The contact form */
-/* If you don't want the footer to be responsive, remove these media queries */
 .footer {
   // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
   border-top: 1px solid #999;
@@ -64,15 +57,15 @@
     float: left;
   }
   h3 {
-    color: #333;
-    font: normal 36px "Roboto", cursive;
+    color: var(--vp-c-text-1);
+    font-size: 36px;
     margin: 0 0 10px;
     span {
       color: #5383d3;
     }
   }
   .footer-links {
-    color: #555;
+    color: var(--vp-c-text-2);
     margin: 0 0 10px;
     padding: 0;
     a {
@@ -83,7 +76,7 @@
     }
   }
   .footer-company-name {
-    color: #8f9296;
+    color: var(--vp-c-text-3);
     font-size: 14px;
     font-weight: normal;
     margin: 0;
@@ -94,8 +87,8 @@
       display: inline-block;
       width: 35px;
       height: 35px;
-      cursor: pointer;
-      background-color: #eee;
+      // cursor: pointer;
+      background-color: var(--vp-c-bg-alt);
       border-radius: 2px;
       font-size: 20px;
       color: #777;
@@ -111,7 +104,7 @@
       display: inline-block;
       vertical-align: top;
       margin: 15px 42px 0 0;
-      color: #ffffff;
+      color: var(--vp-c-text-2);
     }
   }
   form {
@@ -119,15 +112,15 @@
     input {
       display: block;
       border-radius: 3px;
-      box-sizing: border-box;
-      background-color: #d6d6d6;
-      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
-      border: none;
+      // box-sizing: border-box;
+      // background-color: #d6d6d6;
+      // box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
+      // border: none;
       resize: none;
       font: inherit;
-      font-size: 14px;
+      // font-size: 14px;
       font-weight: normal;
-      color: #d1d2d2;
+      // color: #d1d2d2;
       width: 400px;
       padding: 18px;
       height: 55px;
@@ -136,15 +129,15 @@
     textarea {
       display: block;
       border-radius: 3px;
-      box-sizing: border-box;
-      background-color: #d6d6d6;
+      // box-sizing: border-box;
+      // background-color: hsl(0, 0%, 84%);
       box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
-      border: none;
+      // border: none;
       resize: none;
       font: inherit;
       font-size: 14px;
       font-weight: normal;
-      color: #d1d2d2;
+      // color: #d1d2d2;
       width: 400px;
       padding: 18px;
       height: 100px;
@@ -152,34 +145,15 @@
     }
     button {
       border-radius: 3px;
-      background-color: #d6d6d6;
-      color: #555;
-      border: 0;
+      background-color: var(--vp-c-bg-alt);
+      // color: #555;
+      // border: 0;
       padding: 15px 50px;
       font-weight: bold;
       float: right;
     }
   }
-  &::-webkit-input-placeholder {
-    color: #5c666b;
-  }
-  &::-moz-placeholder {
-    color: #5c666b;
-    opacity: 1;
-  }
-  &:-ms-input-placeholder {
-    color: #5c666b;
-  }
-}
-section {
-  width: 100%;
-  display: inline-block;
-  background: #ccc;
-  height: 60vh;
-  text-align: center;
-  font-size: 22px;
-  font-weight: 700;
-  text-decoration: underline;
+
 }
 @media (max-width: 1000px) {
   .footer-distributed {
diff --git a/src/components/footers/MantineRichFooter.vue b/src/components/footers/MantineRichFooter.vue
index 0ccfbde..6e3674f 100644
--- a/src/components/footers/MantineRichFooter.vue
+++ b/src/components/footers/MantineRichFooter.vue
@@ -82,20 +82,20 @@ const socials = [
 .footer {
   padding: 1em;
   margin-top: 1rem;
-  border-top: 1px solid #e9ecef;
-  background-color: #f8f9fa;
+  border-top: 1px solid var(--vp-c-border);
+  background-color: var(--vp-c-bg-alt);
 
   .footer-header {
     display: flex;
     justify-content: space-between;
 
     .logo-wrapper {
-      color: rgb(0, 0, 0);
+      color: var(--vp-c-text-2);
       max-width: 200px;
 
       .logo {
         // height: 1.75rem;
-        color: rgb(0, 0, 0);
+        // color: rgb(0, 0, 0);
         max-width: 200px;
         display: flex;
         align-items: center;
@@ -104,7 +104,7 @@ const socials = [
           margin-left: 0.6rem;
           font-size: 1.2rem;
           font-weight: 700;
-          color: #555;
+          color: var(--vp-c-text-1);
         }
       }
 
@@ -128,17 +128,12 @@ const socials = [
         .link {
           display: block;
           appearance: none;
-          background-color: rgba(0, 0, 0, 0);
-          border: 0px none rgb(134, 142, 150);
-          color: #868e96;
-          cursor: pointer;
+          color: var(--vp-c-text-2);
           margin: 5px 0;
-          text-decoration: none;
-          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+          -webkit-tap-highlight-color: var(--vp-c-bg);
           font-size: 0.8rem;
-
           &:hover {
-            text-decoration: underline;
+            color: var(--vp-c-text-1);
           }
         }
       }
@@ -150,9 +145,8 @@ const socials = [
     justify-content: space-between;
     align-items: center;
     margin-top: 2em;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    border-top: 1px solid #777;
+    padding: 1em 0;
+    border-top: 1px solid var(--vp-c-divider);
 
     .title {
       font-size: 0.8em;
@@ -166,24 +160,22 @@ const socials = [
     flex-wrap: nowrap;
     gap: 10px;
     justify-content: flex-end;
-    box-sizing: border-box;
     align-items: center;
 
     button {
       appearance: none;
-      background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
-      border: 1px solid rgb(206, 212, 218);
+      background: var(--vp-c-bg) none repeat scroll 0% 0% / auto padding-box border-box;
+      border: 1px solid var(--vp-c-border);
       border-radius: 42px;
-      color: #777;
+      color: var(--vp-c-text-2);
       cursor: pointer;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      background-color: rgb(255, 255, 255);
+      // background-color: var(--vp-c-bg);
       padding: 7px;
       touch-action: manipulation;
-      box-sizing: border-box;
 
       &:hover {
-        background-color: #f8f9fa;
+        background-color: var(--vp-c-bg-soft);
       }
     }
   }
diff --git a/src/components/footers/MantineSimpleFooter.vue b/src/components/footers/MantineSimpleFooter.vue
index 69de076..c5c956a 100644
--- a/src/components/footers/MantineSimpleFooter.vue
+++ b/src/components/footers/MantineSimpleFooter.vue
@@ -69,7 +69,7 @@ const socials = [
 <style lang="scss" scoped>
 .footer {
   margin-top: 1rem;
-  border-top: 1px solid #e9ecef;
+  border-top: 1px solid var(--vp-c-border);
   // .footer-inner {
   align-items: none;
   display: flex;
@@ -79,15 +79,16 @@ const socials = [
 
   .logo {
     // height: 1.75rem;
-    color: rgb(0, 0, 0);
+    // color: rgb(0, 0, 0);
     max-width: 200px;
     display: flex;
     align-items: center;
+
     .title {
       margin-left: 0.6rem;
       font-size: 1.2rem;
       font-weight: 700;
-      color: #555;
+      color: var(--vp-c-text-1);
     }
   }
 
@@ -100,18 +101,15 @@ const socials = [
     align-items: center;
 
     .link {
+      display: block;
       appearance: none;
-      background-color: rgba(0, 0, 0, 0);
-      border: 0px none rgb(134, 142, 150);
-      color: #868e96;
-      cursor: pointer;
-      margin: 5px;
-      text-decoration: none;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      color: var(--vp-c-text-2);
+      margin: 5px 10px;
+      -webkit-tap-highlight-color: var(--vp-c-bg);
       font-size: 0.8rem;
 
       &:hover {
-        text-decoration: underline;
+        color: var(--vp-c-text-1);
       }
     }
   }
@@ -123,30 +121,29 @@ const socials = [
     flex-wrap: nowrap;
     gap: 10px;
     justify-content: flex-end;
-    box-sizing: border-box;
     align-items: center;
 
     button {
       appearance: none;
-      background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
-      border: 1px solid rgb(206, 212, 218);
+      background: var(--vp-c-bg) none repeat scroll 0% 0% / auto padding-box border-box;
+      border: 1px solid var(--vp-c-border);
       border-radius: 42px;
-      color: #777;
+      color: var(--vp-c-text-2);
       cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      background-color: rgb(255, 255, 255);
+      -webkit-tap-highlight-color: var(--vp-c-bg);
+      // background-color: var(--vp-c-bg);
       padding: 7px;
       touch-action: manipulation;
-      box-sizing: border-box;
 
       &:hover {
-        background-color: #f8f9fa;
+        background-color: var(--vp-c-bg-soft);
       }
     }
   }
 }
 
-.mobile, .tablet {
+.mobile,
+.tablet {
   .footer {
     flex-direction: column;
 
diff --git a/src/components/footers/RichFooter.vue b/src/components/footers/RichFooter.vue
index 251996d..9c7a2ed 100644
--- a/src/components/footers/RichFooter.vue
+++ b/src/components/footers/RichFooter.vue
@@ -105,9 +105,9 @@
   display: flex;
   flex-flow: row wrap;
   padding: 30px 30px 20px 30px;
-  color: #2f2f2f;
-  background-color: #fff;
-  border-top: 1px solid #e5e5e5;
+  // color: #2f2f2f;
+  background-color: var(--vp-c-bg-alt);
+  border-top: 1px solid var(--vp-c-border);
 
   >* {
     flex: 1 100%;
@@ -115,7 +115,7 @@
 
   address {
     font-style: normal;
-    color: #999;
+    color: var(--vp-c-text-3);
   }
 
   ul {
@@ -151,7 +151,7 @@
 }
 
 .nav__title {
-  font-weight: 400;
+  font-weight: 600;
   font-size: 15px;
 }
 
@@ -163,7 +163,7 @@
   max-width: max-content;
   // background-color: rgb(33, 33, 33, 0.07);
   // border-radius: 100px;
-  color: #2f2f2f;
+  color: var(--vp-c-text-2);
   line-height: 0;
   margin: 0.6em 0;
   font-size: 1rem;
@@ -182,7 +182,7 @@
 
 .nav__ul {
   a {
-    color: #999;
+    color: var(--vp-c-text-2);
     font-weight: 400;
   }
 }
@@ -195,7 +195,7 @@
 .legal {
   display: flex;
   flex-wrap: wrap;
-  color: #999;
+  // color: #999;
 }
 
 .legal__links {
@@ -204,7 +204,7 @@
 }
 
 .heart {
-  color: #2f2f2f;
+  // color: #2f2f2f;
 }
 
 @media screen and (min-width: 24.375em) {
diff --git a/src/components/footers/SimpleFooter.vue b/src/components/footers/SimpleFooter.vue
index b26b3d4..9057e80 100644
--- a/src/components/footers/SimpleFooter.vue
+++ b/src/components/footers/SimpleFooter.vue
@@ -9,10 +9,10 @@
 <style lang="scss" scoped>
 .footer {
   padding: 1.5em 0 0.5em;
-  border-top: 1px solid #d8d8d8;
+  border-top: 1px solid var(--vp-c-divider);
   margin: 2em auto 0;
   // width: 90vw;
-  color: #9b9b9b;
+  color: var(--vp-c-text-3);
   text-align: center;
 
   p {
diff --git a/src/components/headers/MantineLayeredHeader.vue b/src/components/headers/MantineLayeredHeader.vue
index 9b45961..036ac7a 100644
--- a/src/components/headers/MantineLayeredHeader.vue
+++ b/src/components/headers/MantineLayeredHeader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from "@/components/ui/BaseIcon.vue";
 import HamburgerIcon from "@/components/ui/HamburgerIcon.vue";
+import ThemeToggle from "@/components/ui/ThemeToggle.vue";
 import { useAppConfig } from "@/composables/useAppConfig";
 
 const { isDrawerOpen } = useAppConfig();
@@ -30,20 +31,26 @@ const sublinks = [
         </div>
       </div>
     </RouterLink>
-    <div class="links-wrapper">
-      <div class="sublinks">
-        <RouterLink v-for="link in sublinks" :key="link.title" class="link" :to="link.route">
-          {{ link.title }}
-        </RouterLink>
-      </div>
-      <div class="links">
-        <RouterLink
-          v-for="link in links" :key="link.title" class="link"
-          :class="{ active: link.title === 'Documentation' }" :to="link.route"
-        >
-          {{ link.title }}
-        </RouterLink>
+    <div class="right-panel">
+      <div class="links-wrapper">
+        <div class="sublinks">
+          <RouterLink v-for="link in sublinks" :key="link.title" class="link" :to="link.route">
+            {{ link.title }}
+          </RouterLink>
+        </div>
+        <div class="links">
+          <RouterLink
+            v-for="link in links"
+            :key="link.title"
+            class="link"
+            :class="{ active: link.title === 'Documentation' }"
+            :to="link.route"
+          >
+            {{ link.title }}
+          </RouterLink>
+        </div>
       </div>
+      <ThemeToggle />
     </div>
     <HamburgerIcon v-model="isDrawerOpen" class="drawer-toggle" />
   </header>
@@ -57,15 +64,15 @@ const sublinks = [
   top: 0;
   height: 6em;
   padding: 0 20px 0;
-  background-color: #fff;
+  // background-color: #fff;
   z-index: 3;
   justify-content: space-between;
-  border-bottom: 1px solid #e9ecef;
+  border-bottom: 1px solid var(--vp-c-border);
 
   // margin-bottom: 1em;
   .logo {
     // height: 1.75rem;
-    color: rgb(0, 0, 0);
+    // color: rgb(0, 0, 0);
     max-width: 200px;
     display: flex;
     align-items: center;
@@ -74,51 +81,54 @@ const sublinks = [
       margin-left: 0.6rem;
       font-size: 1.2rem;
       font-weight: 700;
-      color: #555;
+      color: var(--vp-c-text-1);
     }
   }
 
   .drawer-toggle {
-
     .notebook &,
     .desktop & {
       display: none;
     }
   }
-
-  .links-wrapper {
+  .right-panel {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    text-transform: uppercase;
+    align-items: center;
     align-self: flex-end;
-    margin-bottom: -1px;
 
-    .mobile &,
-    .tablet & {
-      display: none;
-    }
-
-    .sublinks {
+    .links-wrapper {
       display: flex;
-      margin-bottom: 7px;
-
-      .link {
-        font-size: 0.7em;
-        font-weight: 300;
-        display: block;
-        line-height: 1;
-        padding: 8px 12px;
-        border-radius: 4px;
-        text-decoration: none;
-        color: #888;
-
-        &:hover {
-          color: #222;
+      flex-direction: column;
+      align-items: flex-end;
+      text-transform: uppercase;
+      align-self: flex-end;
+      margin-bottom: -1px;
+
+      .mobile &,
+      .tablet & {
+        display: none;
+      }
+
+      .sublinks {
+        display: flex;
+        margin-bottom: 7px;
+
+        .link {
+          font-size: 0.7em;
+          font-weight: 300;
+          display: block;
+          line-height: 1;
+          padding: 8px 12px;
+          border-radius: 4px;
+          text-decoration: none;
+          color: var(--vp-c-text-3);
+
+          &:hover {
+            color: var(--vp-c-text-1)
+          }
         }
       }
     }
-
   }
 
   .links {
@@ -132,15 +142,15 @@ const sublinks = [
       padding: 8px 12px;
       // border-radius: 4px;
       text-decoration: none;
-      color: #777;
+      color: var(--vp-c-text-2);
 
       &:hover {
-        color: #111;
+        color: var(--vp-c-text-1);
       }
 
       &.active {
-        color: #111;
-        border-bottom: 2px solid #228be6;
+        color: var(--vp-c-text-1);
+        border-bottom: 2px solid var(--vp-c-brand-1);
       }
     }
   }
diff --git a/src/components/headers/MantineSimpleHeader.vue b/src/components/headers/MantineSimpleHeader.vue
index af86894..283606f 100644
--- a/src/components/headers/MantineSimpleHeader.vue
+++ b/src/components/headers/MantineSimpleHeader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from "@/components/ui/BaseIcon.vue";
 import HamburgerIcon from "@/components/ui/HamburgerIcon.vue";
+import ThemeToggle from "@/components/ui/ThemeToggle.vue";
 import { useAppConfig } from "@/composables/useAppConfig";
 
 const { isDrawerOpen } = useAppConfig();
@@ -27,6 +28,7 @@ const links = [
       <RouterLink v-for="link in links" :key="link.title" class="link" :to="link.route">
         {{ link.title }}
       </RouterLink>
+      <ThemeToggle />
     </div>
     <HamburgerIcon v-model="isDrawerOpen" class="drawer-toggle" />
   </header>
@@ -38,16 +40,16 @@ const links = [
   display: flex;
   align-items: center;
   top: 0;
-  height: 2em;
+  height: 4em;
   padding: 15px 20px;
-  background-color: #fff;
+  // background-color: #fff;
   z-index: 3;
   justify-content: space-between;
-  border-bottom: 1px solid #e9ecef;
+  border-bottom: 1px solid var(--vp-c-divider);
   // margin-bottom: 1em;
   .logo {
     // height: 1.75rem;
-    color: rgb(0, 0, 0);
+    // color: rgb(0, 0, 0);
     max-width: 200px;
     display: flex;
     align-items: center;
@@ -55,7 +57,7 @@ const links = [
       margin-left: 0.6rem;
       font-size: 1.2rem;
       font-weight: 700;
-      color: #555;
+      color: var(--vp-c-text-1)
     }
   }
   .drawer-toggle {
@@ -68,6 +70,7 @@ const links = [
       display: none;
     }
     display: flex;
+    align-items: center;
     .link {
       font-size: 0.9em;
       font-weight: 500;
@@ -76,9 +79,9 @@ const links = [
       padding: 8px 12px;
       border-radius: 4px;
       text-decoration: none;
-      color: #444;
+      color: var(--vp-c-text-2);
       &:hover {
-        background-color: #eee;
+        background-color: var(--vp-c-bg-soft);
       }
     }
   }
diff --git a/src/components/headers/SimpleHeader.vue b/src/components/headers/SimpleHeader.vue
index db43b59..6d27888 100644
--- a/src/components/headers/SimpleHeader.vue
+++ b/src/components/headers/SimpleHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HamburgerIcon from "@/components/ui/HamburgerIcon.vue";
+import ThemeToggle from "@/components/ui/ThemeToggle.vue";
 import { useAppConfig } from "@/composables/useAppConfig";
 
 const { isDrawerOpen } = useAppConfig();
@@ -11,6 +12,7 @@ const { isDrawerOpen } = useAppConfig();
     <div class="title">
       Acme Corporation
     </div>
+    <ThemeToggle />
   </header>
 </template>
 
@@ -19,10 +21,11 @@ const { isDrawerOpen } = useAppConfig();
   position: sticky;
   display: flex;
   align-items: center;
-  top: 0;
-  height: 2em;
+  justify-content: space-between;
+  // top: 0;
+  height: 4em;
   padding: 15px 20px;
-  background-color: #eee;
+  // background-color: #eee;
   z-index: 3;
   .drawer-toggle {
     .notebook &, .desktop & {
diff --git a/src/components/navbars/MantineSimpleNavbar.vue b/src/components/navbars/MantineSimpleNavbar.vue
index e928e3f..3a1c526 100644
--- a/src/components/navbars/MantineSimpleNavbar.vue
+++ b/src/components/navbars/MantineSimpleNavbar.vue
@@ -4,6 +4,11 @@ import { useAppConfig } from "@/composables/useAppConfig";
 
 const { closeDrawer } = useAppConfig();
 
+function onLinkClick(event, navigate) {
+  closeDrawer();
+  navigate(event);
+}
+
 const links = [
   { name: "home", label: "Home", icon: "home" },
   { name: "about", label: "About", icon: "about" },
@@ -20,9 +25,9 @@ const footerLinks = [
     <div class="main">
       <ul>
         <li v-for="link in links" :key="link.label">
-          <router-link v-slot="{ navigate }" :to="{ name: link.name }" custom @click="closeDrawer">
-            <BaseIcon size="30" :name="link.icon" class="icon" fill1="currentColor" />
-            <a role="link" @click="navigate">{{ link.label }}</a>
+          <router-link v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
+            <BaseIcon size="24" :name="link.icon" class="icon" fill1="currentColor" />
+            <a role="link" :href="href" @click="onLinkClick($event, navigate)">{{ link.label }}</a>
           </router-link>
         </li>
       </ul>
@@ -30,9 +35,9 @@ const footerLinks = [
     <div class="footer">
       <ul>
         <li v-for="link in footerLinks" :key="link.label">
-          <router-link v-slot="{ navigate }" :to="{ name: link.name }" custom @click="closeDrawer">
-            <BaseIcon size="30" :name="link.icon" class="icon" />
-            <a role="link" @click="navigate">{{ link.label }}</a>
+          <router-link v-slot="{ href, navigate }" :to="{ name: link.name }" custom>
+            <BaseIcon size="24" :name="link.icon" class="icon" />
+            <a role="link" :href="href" @click="onLinkClick($event, navigate)">{{ link.label }}</a>
           </router-link>
         </li>
       </ul>
@@ -44,7 +49,6 @@ const footerLinks = [
 .navbar {
   min-width: 220px;
   padding: 1em;
-  border-right: 1px solid #ccc;
 
   .notebook & {
     min-width: 220px;
@@ -57,13 +61,14 @@ const footerLinks = [
 
       li {
         line-height: 3em;
+        padding-left: 1em;
         display: flex;
         align-items: center;
-        color: #888;
-        // border-bottom: solid 1px rgb(200, 200, 200);
+        color: var(--vp-c-text-2);
+        // border-bottom: solid 1px var(--vp-c-divider);
         &:hover {
-          color: #444;
-          background-color: #f9f9f9;
+          color: var(--vp-c-text-1);
+          background-color: var(--vp-c-bg-alt);
         }
 
         a {
@@ -71,6 +76,7 @@ const footerLinks = [
           display: block;
           padding: 0 2em 0 1em;
           color: #888;
+          text-wrap: nowrap;
         }
         // .icon {
         //   color: #444;
@@ -85,7 +91,7 @@ const footerLinks = [
   .footer {
     // padding-top: 1em;
     margin-top: 1em;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid var(--vp-c-divider);
 
   }
 }
diff --git a/src/components/navbars/SimpleNavbar.vue b/src/components/navbars/SimpleNavbar.vue
index 990c5ff..fcc11b1 100644
--- a/src/components/navbars/SimpleNavbar.vue
+++ b/src/components/navbars/SimpleNavbar.vue
@@ -39,7 +39,7 @@ nav {
     padding-left: 0;
     li {
       line-height: 3em;
-      border-bottom: solid 1px rgb(200, 200, 200);
+      border-bottom: 1px solid var(--vp-c-divider);
       a {
         cursor: pointer;
         display: block;
diff --git a/src/components/ui/BaseToggle.vue b/src/components/ui/BaseToggle.vue
new file mode 100644
index 0000000..f520a6f
--- /dev/null
+++ b/src/components/ui/BaseToggle.vue
@@ -0,0 +1,62 @@
+<template>
+  <button class="toggle" type="button" role="switch">
+    <span class="check">
+      <span v-if="$slots.default" class="icon">
+        <slot />
+      </span>
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.toggle {
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s !important;
+  &:hover {
+    border-color: var(--vp-c-brand-1);
+  }
+  .check {
+    position: absolute;
+    top: 1px;
+    /*rtl:ignore*/
+    left: 1px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--vp-c-neutral-inverse);
+    box-shadow: var(--vp-shadow-1);
+    transition: transform 0.25s !important;
+  }
+
+  .icon {
+    position: relative;
+    display: block;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+}
+
+.icon :deep(svg) {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  fill: var(--vp-c-text-2);
+}
+
+.dark .icon :deep(svg) {
+  fill: var(--vp-c-text-1);
+  transition: opacity 0.25s !important;
+}
+</style>
diff --git a/src/components/ui/ThemeToggle.vue b/src/components/ui/ThemeToggle.vue
new file mode 100644
index 0000000..58449cd
--- /dev/null
+++ b/src/components/ui/ThemeToggle.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+
+// import { useData } from "../composables/data";
+import BaseToggle from "./BaseToggle.vue";
+
+// import VPIconMoon from "./icons/VPIconMoon.vue";
+// import VPIconSun from "./icons/VPIconSun.vue";
+// import BaseIcon from "@/components/ui/BaseIcon.vue";
+import { useAppConfig } from "@/composables/useAppConfig";
+
+const { isDarkTheme } = useAppConfig();
+
+function toggleAppearance() {
+  isDarkTheme.value = !isDarkTheme.value;
+}
+
+const switchTitle = computed(() => {
+  return isDarkTheme.value ? "Switch to light theme" : "Switch to dark theme";
+});
+</script>
+
+<template>
+  <BaseToggle
+    :title="switchTitle"
+    class="VPSwitchAppearance"
+    :aria-checked="isDarkTheme"
+    @click="toggleAppearance"
+  >
+    <!-- <VPIconSun class="sun" />
+    <VPIconMoon class="moon" /> -->
+    <!-- <BaseIcon size="10" name="sun" class="sun" /> -->
+    <!-- <BaseIcon size="10" name="moon" class="moon" /> -->
+    <svg class="sun" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+      <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+      <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+      <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+      <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+      <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+      <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+      <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+      <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+      <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+    </svg>
+
+    <svg class="moon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+      <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+    </svg>
+    <!-- <BaseIcon size="10" name="moon" class="moon" /> -->
+  </BaseToggle>
+</template>
+
+<style scoped>
+.sun {
+  opacity: 1;
+}
+.moon {
+  opacity: 0;
+}
+.dark .sun {
+  opacity: 0;
+}
+.dark .moon {
+  opacity: 1;
+}
+.dark .VPSwitchAppearance :deep(.check) {
+  /*rtl:ignore*/
+  transform: translateX(18px);
+}
+</style>
diff --git a/src/composables/useAppConfig.ts b/src/composables/useAppConfig.ts
index 0af51f1..b13f666 100644
--- a/src/composables/useAppConfig.ts
+++ b/src/composables/useAppConfig.ts
@@ -1,6 +1,27 @@
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const isDrawerOpen = ref(false);
+const isDarkTheme = ref(false);
+const APPEARANCE_KEY = "vwa-theme-appearance";
+
+watch(isDarkTheme, () => {
+  if (isDarkTheme.value) {
+    document.documentElement.classList.add("dark");
+    localStorage.setItem(APPEARANCE_KEY, "dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+    localStorage.setItem(APPEARANCE_KEY, "");
+  }
+});
+
+export function initAppearance() {
+  // document.documentElement.classList.add("dark");
+  const preference = localStorage.getItem(APPEARANCE_KEY) || "";
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  if (!preference || preference === "auto" ? prefersDark : preference === "dark") {
+    document.documentElement.classList.add("dark");
+  };
+}
 
 export function useAppConfig() {
   function closeDrawer() {
@@ -9,6 +30,8 @@ export function useAppConfig() {
 
   return {
     isDrawerOpen,
+    isDarkTheme,
     closeDrawer,
+    initAppearance,
   };
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index b186272..4a1e210 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import AppContentPane from "@/components/AppContentPane.vue";
+
 import AppNavigationDrawer from "@/components/drawers/SimpleDrawer.vue";
 
 // import AppNavigationDrawer from "@/components/drawers/TouchSlideoutDrawer.vue";
 
-import AppSidebar from "@/components/navbars/SimpleNavbar.vue";
+// import AppSidebar from "@/components/navbars/SimpleNavbar.vue";
 
-// import AppSidebar from "@/components/navbars/MantineSimpleNavbar.vue";
+import AppSidebar from "@/components/navbars/MantineSimpleNavbar.vue";
 
-// import AppHeader from "@/components/headers/MantineSimpleHeader.vue";
+import AppHeader from "@/components/headers/MantineSimpleHeader.vue";
 
 // import AppHeader from "@/components/headers/MantineLayeredHeader.vue";
-import AppHeader from "@/components/headers/SimpleHeader.vue";
+
+// import AppHeader from "@/components/headers/SimpleHeader.vue";
 
 // import AppFooter from "@/components/footers/RichFooter.vue";
+
 // import AppFooter from "@/components/footers/DistributedFooter.vue";
+
 // import AppFooter from "@/components/footers/MantineSimpleFooter.vue";
 
-// import AppFooter from "@/components/footers/MantineRichFooter.vue";
+import AppFooter from "@/components/footers/MantineRichFooter.vue";
 
-import AppFooter from "@/components/footers/SimpleFooter.vue";
+// import AppFooter from "@/components/footers/SimpleFooter.vue";
 
 import { useAppConfig } from "@/composables/useAppConfig";
 
diff --git a/src/main.ts b/src/main.ts
index bf1fc14..ede4dcf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,19 @@
 import { createApp } from "vue";
 
-import "./assets/scss/style.scss";
+// import "./assets/styles/vars.css";
+// import "./styles/base.css";
+
+import "./assets/styles/base.scss";
 import App from "./App.vue";
 import { router } from "./router";
 import { loadIcons } from "@/utils/icons";
+import { initAppearance } from "@/composables/useAppConfig";
 import { api } from "@/services/api";
 
 const app = createApp(App);
 app.use(router);
 loadIcons();
+initAppearance();
 api.init();
 
 await Promise.all([
diff --git a/src/utils/injections/splash-screen.html b/src/utils/injections/splash-screen.html
index 45cf0ec..9da238a 100644
--- a/src/utils/injections/splash-screen.html
+++ b/src/utils/injections/splash-screen.html
@@ -146,6 +146,7 @@
     margin-top: 2em;
     padding-top: 1em;
     border-top: 1px solid #ccc;
+    font-family: Arial, Helvetica, sans-serif;
   }
 </style>
 <div class="splash-screen">
@@ -160,5 +161,6 @@
   </div>
   <div class="ss-title">
     <!-- project-name -->
+    project-name
   </div>
 </div>