Change color for dark mode

Author: Stigmatoz

src/assets/css/dark.css

@@ -46,6 +46,9 @@
 .dark .expander.total {
   background-color: #6f6f6f !important;
 }
+.dark .url-list{
+  border: 1px solid #494949 !important;
+}
 .dark .header span{
   color: rgb(255 255 255);
 }
@@ -62,8 +65,14 @@
   background-color: #303030 !important;
   border-left: 1px solid #494949 !important;
 }
+.dark .app-block{
+  background-color: #919191 !important;
+}
 .dark .app-block .title{
-  color: black;
+  color: rgb(255, 255, 255);
+}
+.dark .app-block .description{
+  color: white !important;
 }
 .dark .settings-tab label[name="tabName"]:hover, .dark [type='radio']:checked ~ label{
   background-color: #666666 !important;

src/assets/css/general.css

@@ -75,7 +75,7 @@ select {
   width: 100%;
 }
 input[type='button'] {
-  background: #428bff;
+  background: #5377af;
   color: #fff;
   border-radius: 7px;
   height: 36px;
@@ -91,7 +91,7 @@ input[type='button'] {
 }
 
 input[type='button']:hover {
-  background: #5c9dfe;
+  background: #314158;
   text-decoration: none;
 }
 

src/components/Dashboad.vue

@@ -87,7 +87,7 @@ function openChart(type: TypeOfChart) {
 }
 
 .chart-btn.active {
-  background-color: #428bff !important;
+  background-color: #5377af !important;
   color: white;
 }
 </style>

src/components/MyApps.vue

@@ -70,6 +70,7 @@ function openAppLink(app: App) {
 .description {
   margin-top: 10px;
   font-size: 14px;
+  color: black;
 }
 img {
   margin: auto;

src/components/TimeIntervalChart.vue

@@ -23,7 +23,11 @@ export default {
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { injectStorage } from '../storage/inject-storage';
-import { StorageDeserializeParam } from '../storage/storage-params';
+import {
+  DARK_MODE_DEFAULT,
+  StorageDeserializeParam,
+  StorageParams,
+} from '../storage/storage-params';
 import { TimeInterval } from '../entity/time-interval';
 import { todayLocalDate } from '../utils/date';
 import { useI18n } from 'vue-i18n';
@@ -43,6 +47,7 @@ const storage = injectStorage();
 const chart = ref<any>();
 const minValue = ref<number>();
 const todayIntervals = ref<TimeInterval[]>();
+const darkMode = ref();
 
 type DataForChart = {
   domain: string;
@@ -56,6 +61,7 @@ onMounted(async () => {
   )) as TimeInterval[];
 
   todayIntervals.value = timeIntervalList?.filter(x => x.day == todayLocalDate());
+  darkMode.value = await storage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
   renderChart();
 });
 
@@ -157,12 +163,16 @@ function drawIntervalChart(data: DataForChart[]) {
   svg
     .append('g')
     .attr('class', 'grid')
-    .style('color', '#e5e5e5')
+    .style('color', darkMode.value ? '#797979' : '#e5e5e5')
     .attr('transform', `translate(0, ${height})`)
     .call(xAxis.tickSize(-height));
 
-  svg.append('g').attr('class', 'grid').style('color', '#e5e5e5').call(yAxis.tickSize(-width));
-  svg.selectAll('text').style('fill', 'black');
+  svg
+    .append('g')
+    .attr('class', 'grid')
+    .style('color', darkMode.value ? '#797979' : '#e5e5e5')
+    .call(yAxis.tickSize(-width));
+  svg.selectAll('text').style('fill', '#797979');
 
   //draw the bars, offset y and bar height based on data
   svg

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extName__",
   "short_name": "Web Tracker",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "__MSG_extDescription__",
   "options_page": "src/dashboard.html",
   "default_locale": "en",