console: add a theme provider to not rely on CSS only

console/frontend/src/components/DarkModeSwitcher.vue

@@ -0,0 +1,16 @@
+<template>
+  <button
+    type="button"
+    class="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+    @click="toggle()"
+  >
+    <MoonIcon v-if="!isDark()" class="h-5 w-5" />
+    <SunIcon v-if="isDark()" class="h-5 w-5" />
+  </button>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import { SunIcon, MoonIcon } from "@heroicons/vue/solid";
+const { isDark, toggle } = inject("darkMode");
+</script>