feat: light/dark theme toggle

src/assets/styles/index.css

@@ -195,7 +195,9 @@ nav svg {
 :is(a:hover, a:active, a:focus) svg,
 a svg:hover,
 a svg:active,
-a svg:focus {
+a svg:focus,
+.theme__toggle:hover,
+.theme__toggle svg:hover {
   stroke-width: var(--stroke-width-bold);
 }
 
@@ -485,6 +487,28 @@ footer nav {
   justify-content: center;
 }
 
+/* theme toggle */
+.theme__toggle,
+.theme__toggle svg{
+  cursor: pointer;
+}
+
+.theme__dark .theme__toggle > .light {
+  display: inline;
+}
+
+.theme__dark .theme__toggle > .dark {
+  display: none;
+}
+
+.theme__toggle > .light {
+  display: none;
+}
+
+.theme__toggle > .dark {
+  display: inline;
+}
+
 /* screens: md */
 @media screen and (min-width: 768px) {
   .main__title {

src/assets/styles/partials/vars.css

@@ -113,6 +113,19 @@
   }
 }
 
+:root body.theme__dark {
+  --text-color: var(--white);
+  --background-color: var(--black);
+  --text-color-inverted: var(--black);
+  --background-color-inverted: var(--white);
+  --accent-color: var(--blue-400);
+  --accent-color-hover: var(--blue-200);
+  --gray-light: var(--gray-900);
+  --gray-lighter: var(--gray-950);
+  --gray-dark: var(--gray-300);
+  --brand-github: #f5f5f5;
+}
+
 @media (prefers-reduced-motion) {
   :root {
     --transition-duration-default: 0.01ms;