refactor: move project to frontend directory

frontend/src/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {reactive} from 'vue';
+import {Watch} from 'vue-property-decorator';
+
+const sharedDarkMode = reactive({
+  internalDarkMode: false,
+  internalLoaded: false,
+
+  get darkMode() {
+    if (!this.internalLoaded) {
+      this.internalDarkMode = localStorage.getItem('darkmode') === ('' + true);
+      this.internalLoaded = true;
+    }
+    return this.internalDarkMode;
+  },
+
+  set darkMode(value: boolean) {
+    this.internalDarkMode = value;
+    localStorage.setItem('darkmode', '' + this.internalDarkMode);
+  },
+});
+
+@Options({
+  name: 'BootstrapThemeSwitch',
+})
+export default class BootstrapThemeSwitch extends Vue {
+  get sharedDarkMode() {
+    return sharedDarkMode;
+  }
+
+  mounted(): void {
+    this.onThemeChanged(this.dark);
+  }
+
+  get dark(): boolean {
+    return this.sharedDarkMode.darkMode;
+  }
+
+  set dark(value: boolean) {
+    this.sharedDarkMode.darkMode = value;
+  }
+
+  @Watch('dark', {immediate: true})
+  private onThemeChanged(isDarkMode: boolean): void {
+    if (isDarkMode) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-bs-theme');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="form-check form-switch light-dark-switch">
+    <input class="form-check-input" type="checkbox" role="switch" v-model="dark">
+  </div>
+</template>
+
+<style scoped>
+.light-dark-switch .form-check-input {
+  --bs-form-switch-bg: url(assets/sun.svg) !important;
+}
+
+.light-dark-switch .form-check-input:focus {
+  --bs-form-switch-bg: url(assets/sun_focus.svg) !important;
+}
+
+.light-dark-switch .form-check-input:checked,
+.light-dark-switch .form-check-input:checked:focus {
+  --bs-form-switch-bg: url(assets/moon.svg) !important;
+}
+</style>