added HTML and CSS and JS for dark Mode button

src/App.vue

@@ -4,7 +4,7 @@
       <component :is="Component" />
     </transition>
   </RouterView>
-</template>
+</template> 
 
 <style>
 *,
@@ -33,15 +33,28 @@
   --code-line-height: 24px;
   --code-text-light: #476582;
   --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+  --accent-color: #cacaca;
+  --background-color-primary:  #fff;
+  --background-color-secondary: #fafafa;
 }
+
+:root.dark-theme {
+  --background-color-primary: #1e1e1e;
+  --background-color-secondary: #2d2d30;
+  --accent-color: #3f3f3f;
+  --text-primary-color: #ddd;
+  --c-text:white;
+  --c-white-dark:#3f3f3f;
+}
+
 body {
   font-family: var(--font-family-base);
   font-size: var(--font-size);
   line-height: 1.5;
   margin: 0;
   height: 100%;
   color: var(--c-text);
-  background-color: var(--c-white);
+  background-color:  var(--background-color-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/components/FormInput.vue

@@ -103,7 +103,8 @@ input[type='text'],
 input[type='number'] {
   border-radius: 3px 3px 0 0;
   border: 1px solid var(--c-white-light);
-  background: var(--c-white-light);
+  background: var(--background-color-secondary);
+  color: var(--c-text);
   padding: 0.5rem 1rem;
   width: 100%;
 }
@@ -120,7 +121,7 @@ input[type='number'] ~ .expand {
 input[type='text']:focus,
 input[type='number']:focus {
   outline: none;
-  background: var(--c-white);
+  background: var(--background-color-secondary);
 }
 input[type='text']:focus ~ .expand,
 input[type='number']:focus ~ .expand {

src/components/FormSelect.vue

@@ -95,8 +95,8 @@ function toTitleCase(v) {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: var(--c-white-light);
-  border-radius: 3px;
+  background: var(--background-color-secondary);
+  border-radius: 3px solid var(--c-text);
   color: var(--c-text);
   cursor: pointer;
   font-family: var(--font-family-base);

src/components/NavBar.vue

@@ -27,6 +27,7 @@
         v{{ version }}@{{ currentCommit.slice(0, 7) }}
       </a>
       <NavContributors />
+      <NavToggleDarkMode />
     </div>
   </nav>
 </template>
@@ -42,7 +43,7 @@ import NavIgniteDocs from './NavIgniteDocs.vue'
 import NavTwitter from './NavTwitter.vue'
 import NavHelp from './NavHelp.vue'
 import NavContributors from './NavContributors.vue'
-
+import NavToggleDarkMode from './NavToggleDarkMode.vue'
 export default {
   components: {
     NavDiscord,
@@ -53,11 +54,11 @@ export default {
     NavTwitter,
     NavHelp,
     NavIgniteDocs,
-    NavContributors
-  },
+    NavContributors,
+    NavToggleDarkMode,
+},
   setup() {
     const currentCommit = __COMMIT__ // from vite.config.js
-
     return { version, currentCommit }
   }
 }

src/components/NavCode.vue

@@ -238,7 +238,7 @@ export default {
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   min-width: 15vw;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
@@ -273,7 +273,7 @@ export default {
   margin-left: 1.1vw;
 }
 .generate {
-  background-color: #ffffff;
+  background-color: var(--background-color-primary);
   width: 80%;
   font-size: 60%;
   height: 1.5rem;
@@ -282,6 +282,8 @@ export default {
   font-size: 90%;
   height: 1.6rem;
   border-radius: 3%;
+  color:var(--c-text);
+  background: var(--background-color-primary);
 }
 
 .icon {
@@ -301,8 +303,8 @@ export default {
   outline: none;
 }
 
-.copy-link-input:hover {
-  background: var(--c-brand-red);
+.copy-link-input:hover{
+  background: var(--c-brand-red) !important;
   border: 1px solid #cccccc;
   color: #f1f1f1;
 }

src/components/NavContributors.vue

@@ -116,7 +116,7 @@ export default {
 }
 .contributors-wrapper div {
   padding: 1rem 0;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   font-size: var(--font-size);
   color: var(--c-text);
   border-radius: 8px;

src/components/NavHelp.vue

@@ -91,7 +91,7 @@ export default {
 }
 .help-wrapper div {
   padding: 1rem 0;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   font-size: var(--font-size);
   color: var(--c-text);
   border-radius: 8px;

src/components/NavNebari.vue

@@ -254,7 +254,7 @@ export default {
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   min-width: 15vw;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 100;
@@ -303,7 +303,7 @@ export default {
 }
 .code-snippet {
   text-align: center;
-  background-color: #cccccc;
+  background-color: var(--c-white-dark)
 }
 
 /* Text Box CSS */
@@ -316,14 +316,16 @@ export default {
   font-size: larger;
 }
 .text-box-nebari-details {
+  background: var(--background-color-secondary);
+  color: var(--c-text);
   width: 95%;
   height: 3vh;
 }
 
 .copy-link-input:hover {
-  background: var(--c-brand-red);
+  background: var(--c-brand-red) !important;
   border: 1px solid #cccccc;
-  color: #f1f1f1;
+  color: black;
 }
 
 #nebari-bottom-button {
@@ -336,6 +338,8 @@ export default {
   margin: 2.8vh;
   margin-top: 3vh;
   margin-bottom: 2vh;
+  background: var(--background-color-primary);
+  color: var(--c-text);
 }
 .copy-button-nebari {
   font-size: 1rem;