Start using react-zen.

src/styles/global.css

@@ -0,0 +1,48 @@
+html,
+body {
+  font-family: var(--font-family), sans-serif;
+  color: var(--font-color);
+  font-size: var(--font-size);
+  background-color: var(--background-color);
+}
+
+a,
+a:active,
+a:hover {
+  color: var(--font-color);
+  text-decoration: none;
+}
+
+svg {
+  width: 16px;
+  height: 16px;
+  shape-rendering: geometricPrecision;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+  background: var(--background-color);
+}
+
+::-webkit-scrollbar-track {
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--border-color);
+  background-clip: padding-box;
+}
+
+body::-webkit-scrollbar-track,
+main::-webkit-scrollbar-track {
+  background-color: var(--border-color);
+}
+
+::-webkit-scrollbar-thumb {
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--font-color);
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-color: var(--font-color);
+  background-clip: padding-box;
+}

src/styles/index.css

@@ -1,106 +0,0 @@
-html,
-body {
-  font-family: Inter, sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 1.5rem;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  color: var(--font-color100);
-  background: var(--base50);
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  line-height: 30px;
-  padding: 0;
-  margin: 0;
-}
-
-a,
-a:active,
-a:visited {
-  color: var(--primary400);
-  text-decoration: none;
-}
-
-p {
-  line-height: 1.8rem;
-}
-
-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-svg {
-  shape-rendering: geometricPrecision;
-}
-
-#__next {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-
-::-webkit-scrollbar {
-  width: 15px;
-  background: var(--base50);
-}
-
-::-webkit-scrollbar-track {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base300);
-  background-clip: padding-box;
-}
-
-body::-webkit-scrollbar-track,
-main::-webkit-scrollbar-track {
-  background-color: var(--base50);
-}
-
-::-webkit-scrollbar-thumb {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base600);
-  background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  border: 4px solid rgba(0, 0, 0, 0);
-  background-color: var(--base800);
-  background-clip: padding-box;
-}
-
-:root {
-  --dark50: #111111;
-  --dark75: #191919;
-  --dark100: #222222;
-  --dark150: #2a2a2a;
-  --dark200: #313131;
-  --dark300: #3a3a3a;
-  --dark400: #484848;
-  --dark500: #606060;
-  --dark600: #6e6e6e;
-  --dark700: #7b7b7b;
-  --dark800: #b4b4b4;
-  --dark900: #eeeeee;
-}

src/styles/variables.css

@@ -1,13 +1,3 @@
 html body {
-  --primary400: var(--blue800);
-  --primary500: var(--blue900);
-  --primary600: var(--blue1000);
-  --primary700: var(--blue1100);
-}
-
-[data-theme='dark'] {
-  --primary400: var(--blue600);
-  --primary500: var(--blue700);
-  --primary600: var(--blue800);
-  --primary700: var(--blue900);
+  --primary-color: var(--accent-color-blue);
 }