diff --git a/src/index.css b/src/index.css
index e386c0c..199be83 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,23 @@
+html {
+  --toggle: hsl(230deg 17% 85%);
+  --bggradient: url('assets/bg.png');
+  --bgcolor: none;
+  --colorPrimary: #000;
+  --filterHeading: #000;
+  --selectBg: #fff;
+  --selectText: #000;
+}
+
+html[data-theme='dark'] {
+  --toggle: linear-gradient(90deg, hsl(216deg 52% 48%), hsl(51deg 100% 60%));
+  --bggradient: none;
+  --bgcolor: #16171f;
+  --colorPrimary: #fff;
+  --filterHeading: #707384;
+  --selectBg: #16171f;
+  --selectText: #707384;
+}
+
 .app_container {
   display: flex;
   flex-direction: column;
@@ -6,6 +26,11 @@
   min-height: 100vh;
 }
 
+@font-face {
+  font-family: 'barcadebrawl';
+  src: url('assets/fonts/BarcadeBrawl.ttf');
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',