using dark mode if system is in dark modev0.0.2

9 files changed, 31 insertions, 24 deletions

diff --git a/src/components/brands_table.vue b/src/components/brands_table.vue
index a0f95ad..d81e143 100644
--- a/src/components/brands_table.vue
+++ b/src/components/brands_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
@@ -55,7 +55,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/customers_table.vue b/src/components/customers_table.vue
index fcd1fda..4ff23a8 100644
--- a/src/components/customers_table.vue
+++ b/src/components/customers_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import axios from 'axios'
@@ -56,7 +56,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/items_table.vue b/src/components/items_table.vue
index 5d689e5..187ee0f 100644
--- a/src/components/items_table.vue
+++ b/src/components/items_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import axios from 'axios'
@@ -65,7 +65,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 7491ea9..12616b6 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { watch, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -13,7 +13,7 @@ watch(
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <RouterLink class="navbar-brand" to="/">OpenBills</RouterLink>
 
diff --git a/src/components/new_brand.vue b/src/components/new_brand.vue
index e0deb83..8b4893a 100644
--- a/src/components/new_brand.vue
+++ b/src/components/new_brand.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/components/new_customer.vue b/src/components/new_customer.vue
index f6f8d9b..cbabac4 100644
--- a/src/components/new_customer.vue
+++ b/src/components/new_customer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/components/new_item.vue b/src/components/new_item.vue
index 0df7249..34162a5 100644
--- a/src/components/new_item.vue
+++ b/src/components/new_item.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw, onMounted } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/main.ts b/src/main.ts
index 2886300..c3b6952 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,35 +26,42 @@ axios.interceptors.request.use(
 
 axios.interceptors.response.use(
   (res) => {
-    return res;
+    return res
   },
   async (err) => {
-    const originalConfig = err.config;
+    const originalConfig = err.config
 
-    if (originalConfig.url !== "/auth/signin" && err.response) {
+    if (originalConfig.url !== '/auth/signin' && err.response) {
       if (err.response.status === 401 && !originalConfig._retry) {
-        originalConfig._retry = true;
+        originalConfig._retry = true
 
         try {
-          const rs = await axios.post("/auth/refresh", {
-            RefreshToken: localStorage.getItem("refToken")
-          });
+          const rs = await axios.post('/auth/refresh', {
+            RefreshToken: localStorage.getItem('refToken')
+          })
 
-          localStorage.setItem("authToken", rs.data.auth_token)
+          localStorage.setItem('authToken', rs.data.auth_token)
 
-          return axios(originalConfig);
+          return axios(originalConfig)
         } catch (_error) {
-          return Promise.reject(_error);
+          return Promise.reject(_error)
         }
       }
     }
 
-    return Promise.reject(err);
+    return Promise.reject(err)
   }
-);
+)
 
 const app = createApp(App)
 
 app.use(router)
 
 app.mount('#app')
+
+// use dark theme if system is in dark mode
+// flaky
+document.documentElement.setAttribute(
+  'data-bs-theme',
+  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+)
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index 77999f2..dc1f983 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import axios from 'axios'