Dark mode for dashboard

Author: Stigmatoz

src/_locales/de/messages.json

@@ -322,5 +322,8 @@
   "clearYoutube": {
     "message": "Clear YouTube",
     "description": "Chrome-Erweiterung, die YouTube-Shorts, empfohlene Videos, Kommentare, Feeds, Homepage-Empfehlungen und andere Ablenkungen ausblenden kann. Sieh dir YouTube ohne Ablenkungen an."
+  },
+  "darkTheme": {
+    "message": "Dunkles Thema"
   }
 }

src/_locales/en/messages.json

@@ -322,5 +322,8 @@
   "clearYoutube": {
     "message": "Clear YouTube",
     "description": "Chrome extension that can hide YouTube shorts, recomended videos, comments, feed, homepage recommendations and other distractions. Watch YouTube free of distractions."
+  },
+  "darkTheme": {
+    "message": "Dark theme"
   }
 }

src/_locales/ru/messages.json

@@ -323,5 +323,8 @@
   "clearYoutube": {
     "message": "Clear YouTube",
     "description": "Расширение для Chrome, которое может скрывать шортс YouTube, рекомендуемые видео, комментарии, ленту новостей, рекомендации по домашней странице и другие отвлекающие факторы. Смотрите YouTube без отвлекающих факторов."
+  },
+  "darkTheme": {
+    "message": "Темная тема"
   }
 }

src/_locales/zh_CN/messages.json

@@ -322,5 +322,8 @@
   "clearYoutube": {
     "message": "Clear YouTube",
     "description": "Chrome扩展程序，可以隐藏YouTube短片，推荐视频，评论，feed，主页推荐和其他分心。 观看YouTube免费分心。"
+  },
+  "darkTheme": {
+    "message": "黑暗主题"
   }
 }

src/assets/css/dark.css

@@ -3,7 +3,7 @@
   color: white;
 }
 .dark .headerBlock .header {
-  color: #ffffff;
+  color: #ffffff !important;
 }
 .dark .headerBlock .icons-block a:hover{
   filter: invert(40%) sepia(94%) saturate(3371%) hue-rotate(227deg) brightness(99%) contrast(92%);
@@ -24,7 +24,7 @@
   filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
 }
 .dark .stats-block .block p{
-  color: #b9b9b9;
+  color: #b9b9b9 !important;
 }
 .dark .stats-block .block .header {
   background-color: #595959;
@@ -35,11 +35,32 @@
   color: rgb(255 255 255);
 }
 .dark .stats-block.block p{
-  color: #b9b9b9;
+  color: #b9b9b9 !important;
 }
 .dark .expander-body{
-  background-color: #595959;
+  background-color: #595959 !important;
+}
+.dark .expander .header span{
+  color: #b9b9b9 !important;
 }
 .dark .header span{
   color: rgb(255 255 255);
+}
+.dark .settings-tab label[name="tabName"] img{
+  filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
+}
+.dark .settings-tab label[name="tabName"]{
+  background-color: #303030 !important;
+}
+.dark .settings-content{
+  background-color: #303030 !important;
+}
+.dark .app-block .title{
+  color: black;
+}
+.dark .settings-tab label[name="tabName"]:hover, .dark [type='radio']:checked ~ label{
+  background-color: #979797 !important;
+}
+.dark .container p.value{
+  color: black;
 }

src/assets/css/dashboard.css

@@ -283,7 +283,7 @@ label {
 }
 .settings-tab label[name='tabName']:hover {
   background-color: #cccccc !important;
-    border-radius: 10px;
+  border-radius: 10px;
 }
 .settings-tab [type='radio'] {
   display: none;

src/components/GeneralSettings.vue

@@ -29,7 +29,7 @@
       </p>
     </label>
   </div>
-  <!-- <div class="settings-item">
+  <div class="settings-item">
     <label class="setting-header">
       <input
         type="checkbox"
@@ -38,10 +38,9 @@
         v-model="darkMode"
         @change="onChange(StorageParams.DARK_MODE, $event.target)"
       />
-      <span>Dark mode</span>
-      <p class="description">Dark theme</p>
+      <span>{{ t('darkTheme.message') }}</span>
     </label>
-  </div> -->
+  </div>
   <div class="settings-item">
     <label class="setting-header d-inline-block">{{ t('intervalInactivity.message') }} </label>
     <div class="d-inline-block ml-10">
@@ -156,6 +155,7 @@ import { FileType, useFile } from '../functions/useFile';
 import { useRemoveAllData } from '../functions/useRemoveAllData';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { useRestoreData } from '../functions/useRestoreData';
+import { applyDarkMode } from '../utils/dark-mode';
 
 const { t } = useI18n();
 
@@ -202,6 +202,8 @@ async function onChange(storageParam: StorageParams, target: any) {
       storageParam,
       storageParam == StorageParams.INTERVAL_INACTIVITY ? Number(target.value) : target.checked,
     );
+
+  if (storageParam == StorageParams.DARK_MODE) applyDarkMode(target.checked);
 }
 
 async function save(storageParam: StorageParams, value: any) {

src/dashboard.html

@@ -11,6 +11,7 @@
     <script type="module" src="./dashboard.ts"></script>
   </body>
 
+  <link rel="stylesheet" href="assets/css/dark.css" />
   <link rel="stylesheet" href="assets/css/dashboard.css" />
   <link rel="stylesheet" href="assets/css/general.css" />
 </html>

src/pages/Dashboard.vue

@@ -146,19 +146,26 @@ import { SettingsTab } from '../utils/enums';
 import DashboadContainer from '../components/DashboadContainer.vue';
 import { useExtensionPage } from '../compositions/useExtensionPage';
 import { getEnumValueTab } from '../utils/extension-tabs';
+import { applyDarkMode } from '../utils/dark-mode';
+import { injecStorage } from '../storage/inject-storage';
+import { StorageParams, DARK_MODE_DEFAULT } from '../storage/storage-params';
 
 const { t } = useI18n();
 const extensionPage = useExtensionPage();
+const settingsStorage = injecStorage();
 
 const selectedTab = ref<SettingsTab>();
 const currentUrl = ref(new URL(location.href));
 const selectedWebsite = ref<string>();
+const darkMode = ref<boolean>();
 
 watch(currentUrl, () => {
   getCurrentTab();
 });
 
-onMounted(() => {
+onMounted(async () => {
+  darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
+  applyDarkMode(darkMode.value!);
   getCurrentTab();
 });