Change dark mode

Stigmatoz · Stigmatoz · commit 1efd8669cbf2 · 2024-01-24T16:39:44.000+03:00
diff --git a/src/assets/css/dark.css b/src/assets/css/dark.css
@@ -0,0 +1,10 @@
+.dark{
+  background-color: #303030;
+  color: white;
+}
+.dark .headerBlock .header {
+  color: #ffffff;
+}
+.dark .headerBlock .icons-block a img {
+  filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
+}
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
@@ -135,7 +135,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import GeneralSettings from '../components/GeneralSettings.vue';
 import WhiteList from '../components/WhiteList.vue';
diff --git a/src/pages/Popup.vue b/src/pages/Popup.vue
@@ -5,6 +5,22 @@
       <p class="header">Web Activity Time Tracker</p>
     </div>
     <div class="icons-block">
+      <img
+        class="dark-mode-icon"
+        height="25"
+        src="../assets/icons/light-mode.svg"
+        title="Disable Dark Mode"
+        v-if="darkMode == true"
+        @click="changeDarkMode(false)"
+      />
+      <img
+        class="dark-mode-icon"
+        title="Enable Dark Mode"
+        height="25"
+        src="../assets/icons/dark-mode.svg"
+        v-if="darkMode == false"
+        @click="changeDarkMode(true)"
+      />
       <a @click="openPage(SettingsTab.Dashboard)"
         >{{ t('dashboard.message') }}<img height="22" src="../assets/icons/dashboard.svg"
       /></a>
@@ -79,25 +95,37 @@ import ByDays from '../components/ByDays.vue';
 import Review from '../components/Review.vue';
 import { openPage } from '../utils/open-page';
 import { SettingsTab, TypeOfList } from '../utils/enums';
+import { injecStorage } from '../storage/inject-storage';
+import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
+import { applyDarkMode } from '../utils/dark-mode';
 
 const { t } = useI18n();
+const settingsStorage = injecStorage();
 
 const activeTab = ref<TypeOfList>();
+const darkMode = ref<boolean>();
 
-onMounted(() => {
+onMounted(async () => {
   activeTab.value = TypeOfList.Today;
+  darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
+  if (darkMode.value) applyDarkMode(darkMode.value);
 });
 
 function selectTab(type: TypeOfList) {
   activeTab.value = type;
 }
+
+async function changeDarkMode(value: boolean) {
+  await settingsStorage.saveValue(StorageParams.DARK_MODE, value);
+  darkMode.value = value;
+  applyDarkMode(value);
+}
 </script>
 
 <style scoped>
 .headerBlock {
   height: 52px;
 }
-
 .headerBlock .header {
   font-size: 16px;
   padding: 0 10px;
@@ -133,4 +161,8 @@ function selectTab(type: TypeOfList) {
   vertical-align: middle;
   padding-left: 5px !important;
 }
+.headerBlock .icons-block .dark-mode-icon {
+  vertical-align: middle;
+  margin-right: 10px;
+}
 </style>
diff --git a/src/popup.html b/src/popup.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -11,6 +11,7 @@
     <script type="module" src="./popup.ts"></script>
   </body>
 
+  <link rel="stylesheet" href="assets/css/dark.css" />
   <link rel="stylesheet" href="assets/css/main.css" />
   <link rel="stylesheet" href="assets/css/general.css" />
 </html>
diff --git a/src/utils/dark-mode.ts b/src/utils/dark-mode.ts
@@ -0,0 +1,3 @@
+export function applyDarkMode(value: boolean): void {
+  value ? document.body.classList.add('dark') : document.body.classList.remove('dark');
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function applyDarkMode(value: boolean): void {`
	`2`	`+ value ? document.body.classList.add('dark') : document.body.classList.remove('dark');`
	`3`	`+}`