Dark mode UI

Author: Stigmatoz

src/assets/css/dark.css

@@ -5,6 +5,41 @@
 .dark .headerBlock .header {
   color: #ffffff;
 }
+.dark .headerBlock .icons-block a:hover{
+  filter: invert(40%) sepia(94%) saturate(3371%) hue-rotate(227deg) brightness(99%) contrast(92%);
+}
 .dark .headerBlock .icons-block a img {
   filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
+}
+.dark .header-block {
+  background-color: #616161;
+}
+.dark .tab-item .progress-bar{
+  border: 1.5px rgb(107 107 107) solid;
+}
+.dark .tab-item:hover{
+  border: 1px rgb(107 107 107) solid;
+}
+.dark .tab-item .links .link{
+  filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
+}
+.dark .stats-block .block p{
+  color: #b9b9b9;
+}
+.dark .stats-block .block .header {
+  background-color: #595959;
+  color: rgb(255 255 255);
+}
+.dark .stats-block.block .header{
+  background-color: #595959;
+  color: rgb(255 255 255);
+}
+.dark .stats-block.block p{
+  color: #b9b9b9;
+}
+.dark .expander-body{
+  background-color: #595959;
+}
+.dark .header span{
+  color: rgb(255 255 255);
 }

src/components/DonutChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart">
-    <Doughnut :data="data" :options="options" />
+    <Doughnut :data="data" :options="options" v-if="data != undefined" />
   </div>
 </template>
 
@@ -14,57 +14,76 @@ export default {
 import { Doughnut } from 'vue-chartjs';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { convertSummaryTimeToString } from '../utils/converter';
+import { injecStorage } from '../storage/inject-storage';
+import { onMounted, ref } from 'vue';
+import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
 
 const props = defineProps<{
   time: number[];
   labels: string[];
 }>();
 
-ChartJS.register(ArcElement, Tooltip, Legend);
+const settingsStorage = injecStorage();
+const darkMode = ref();
+const data = ref();
+const options = ref();
 
-const data = {
-  labels: props.labels,
-  datasets: [
-    {
-      backgroundColor: [
-        '#5668e2',
-        '#8a56e2',
-        '#cf56e2',
-        '#e256ae',
-        '#e25668',
-        '#e28956',
-        '#e2cf56',
-        '#d0ff82',
-        '#aee256',
-        '#68e256',
+onMounted(async () => {
+  darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
+  if (darkMode) {
+    data.value = {
+      labels: props.labels,
+      datasets: [
+        {
+          borderWidth: 2,
+          borderColor: darkMode.value ? '#303030' : '#fff',
+          color: '#fff',
+          backgroundColor: [
+            '#5668e2',
+            '#8a56e2',
+            '#cf56e2',
+            '#e256ae',
+            '#e25668',
+            '#e28956',
+            '#e2cf56',
+            '#d0ff82',
+            '#aee256',
+            '#68e256',
+          ],
+          data: props.time,
+        },
       ],
-      data: props.time,
-    },
-  ],
-};
-
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  layout: {
-    padding: 0,
-  },
-  plugins: {
-    legend: {
-      position: 'right',
-    },
-    legendDistance: {
-      padding: 50,
-    },
-    tooltip: {
-      callbacks: {
-        label: function (context: any) {
-          return convertSummaryTimeToString(context.raw);
+    };
+    options.value = {
+      responsive: true,
+      maintainAspectRatio: false,
+      layout: {
+        padding: 0,
+      },
+      plugins: {
+        legend: {
+          position: 'right',
+          labels: {
+            usePointStyle: true,
+            color: darkMode.value ? '#a5a5a5' : '#7f7f7f',
+          },
+        },
+        legendDistance: {
+          padding: 50,
+        },
+        tooltip: {
+          callbacks: {
+            label: function (context: any) {
+              return convertSummaryTimeToString(context.raw);
+            },
+          },
         },
       },
-    },
-  },
-};
+    };
+  }
+
+  ChartJS.register(ArcElement, Tooltip, Legend);
+});
 </script>
 
 <style scoped>

src/pages/Popup.vue

@@ -119,6 +119,15 @@ async function changeDarkMode(value: boolean) {
   await settingsStorage.saveValue(StorageParams.DARK_MODE, value);
   darkMode.value = value;
   applyDarkMode(value);
+  updateTab();
+}
+
+function updateTab() {
+  const tempValue = activeTab.value;
+  activeTab.value = undefined;
+  setTimeout(() => {
+    activeTab.value = tempValue;
+  }, 50);
 }
 </script>
 
@@ -148,7 +157,7 @@ async function changeDarkMode(value: boolean) {
 }
 
 .headerBlock .icons-block a:hover {
-  color: rgb(99, 99, 243);
+  filter: invert(40%) sepia(94%) saturate(3371%) hue-rotate(227deg) brightness(99%) contrast(92%);
 }
 
 .headerBlock .icons-block a {