Injections now working correctly and understood. Making alternate def…

…ault if injection is not present though

src/App.vue

@@ -1,27 +1,31 @@
 <template>
-    <SideBar />
-    <div class="everythingElse">
-    </div>
-
+  <SideBar :colors="colors"/>
+  <div class="everythingElse">
+  </div>
 </template>
 
 <script>
 import SideBar from './components/SidebarComponents/SideBar.vue';
+import colorsData from '@/assets/colors.json';
 
 export default {
   components: {
     SideBar,
   },
+    provide() {
+    return {
+      colors: colorsData,
+    };
+  }
 };
 </script>
 
 <style>
-
 body, html {
   margin: 0;
   padding: 0;
-  color: white;
-  background-color: #343541;
+  color: var(--text-color);
+  background-color: var(--primary-color);
 }
 
 #app {
@@ -30,8 +34,7 @@ body, html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.everythingElse{
-  padding-left:200px;
+.everythingElse {
+  padding-left: 200px;
 }
-
 </style>

src/components/ListItems/Timer.vue

@@ -0,0 +1,13 @@
+<template>
+
+
+</template>
+
+<script>
+
+
+</script>
+
+<style>
+
+</style>

src/components/SettingsComponents/ColorPicker.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="lists">
+      <h1>BruhList</h1>
+    </div>
+  </template>
+
+  <script>
+  
+  
+  export default {
+
+  }
+  </script>
+
+  <style>
+  
+  </style>
+