Skip to content

Commit 4deb3ee

Browse files
StigmatozStigmatoz
authored
Merge pull request Stigmatoz#129 from Stigmatoz/dark-mode
Dark mode
2 parents 6426b56 + 4597707 commit 4deb3ee

File tree

8 files changed

+170
-49
lines changed

8 files changed

+170
-49
lines changed

‎src/assets/css/dark.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.dark{
2+
background-color: #303030;
3+
color: white;
4+
}
5+
.dark .headerBlock .header {
6+
color: #ffffff;
7+
}
8+
.dark .headerBlock .icons-block a:hover{
9+
filter: invert(40%) sepia(94%) saturate(3371%) hue-rotate(227deg) brightness(99%) contrast(92%);
10+
}
11+
.dark .headerBlock .icons-block a img {
12+
filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
13+
}
14+
.dark .header-block {
15+
background-color: #616161;
16+
}
17+
.dark .tab-item .progress-bar{
18+
border: 1.5px rgb(107 107 107) solid;
19+
}
20+
.dark .tab-item:hover{
21+
border: 1px rgb(107 107 107) solid;
22+
}
23+
.dark .tab-item .links .link{
24+
filter: invert(100%) sepia(17%) saturate(0%) hue-rotate(24deg) brightness(103%) contrast(102%);
25+
}
26+
.dark .stats-block .block p{
27+
color: #b9b9b9;
28+
}
29+
.dark .stats-block .block .header {
30+
background-color: #595959;
31+
color: rgb(255 255 255);
32+
}
33+
.dark .stats-block.block .header{
34+
background-color: #595959;
35+
color: rgb(255 255 255);
36+
}
37+
.dark .stats-block.block p{
38+
color: #b9b9b9;
39+
}
40+
.dark .expander-body{
41+
background-color: #595959;
42+
}
43+
.dark .header span{
44+
color: rgb(255 255 255);
45+
}

‎src/assets/icons/dark-mode.svg‎

Lines changed: 7 additions & 2 deletions
Loading

‎src/assets/icons/light-mode.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/DonutChart.vue‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="chart">
3-
<Doughnut :data="data" :options="options" />
3+
<Doughnut :data="data" :options="options" v-if="data != undefined" />
44
</div>
55
</template>
66

@@ -14,57 +14,76 @@ export default {
1414
import { Doughnut } from 'vue-chartjs';
1515
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
1616
import { convertSummaryTimeToString } from '../utils/converter';
17+
import { injecStorage } from '../storage/inject-storage';
18+
import { onMounted, ref } from 'vue';
19+
import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
1720
1821
const props = defineProps<{
1922
time: number[];
2023
labels: string[];
2124
}>();
2225
23-
ChartJS.register(ArcElement, Tooltip, Legend);
26+
const settingsStorage = injecStorage();
27+
const darkMode = ref();
28+
const data = ref();
29+
const options = ref();
2430
25-
const data = {
26-
labels: props.labels,
27-
datasets: [
28-
{
29-
backgroundColor: [
30-
'#5668e2',
31-
'#8a56e2',
32-
'#cf56e2',
33-
'#e256ae',
34-
'#e25668',
35-
'#e28956',
36-
'#e2cf56',
37-
'#d0ff82',
38-
'#aee256',
39-
'#68e256',
31+
onMounted(async () => {
32+
darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
33+
if (darkMode) {
34+
data.value = {
35+
labels: props.labels,
36+
datasets: [
37+
{
38+
borderWidth: 2,
39+
borderColor: darkMode.value ? '#303030' : '#fff',
40+
color: '#fff',
41+
backgroundColor: [
42+
'#5668e2',
43+
'#8a56e2',
44+
'#cf56e2',
45+
'#e256ae',
46+
'#e25668',
47+
'#e28956',
48+
'#e2cf56',
49+
'#d0ff82',
50+
'#aee256',
51+
'#68e256',
52+
],
53+
data: props.time,
54+
},
4055
],
41-
data: props.time,
42-
},
43-
],
44-
};
45-
46-
const options = {
47-
responsive: true,
48-
maintainAspectRatio: false,
49-
layout: {
50-
padding: 0,
51-
},
52-
plugins: {
53-
legend: {
54-
position: 'right',
55-
},
56-
legendDistance: {
57-
padding: 50,
58-
},
59-
tooltip: {
60-
callbacks: {
61-
label: function (context: any) {
62-
return convertSummaryTimeToString(context.raw);
56+
};
57+
options.value = {
58+
responsive: true,
59+
maintainAspectRatio: false,
60+
layout: {
61+
padding: 0,
62+
},
63+
plugins: {
64+
legend: {
65+
position: 'right',
66+
labels: {
67+
usePointStyle: true,
68+
color: darkMode.value ? '#a5a5a5' : '#7f7f7f',
69+
},
70+
},
71+
legendDistance: {
72+
padding: 50,
73+
},
74+
tooltip: {
75+
callbacks: {
76+
label: function (context: any) {
77+
return convertSummaryTimeToString(context.raw);
78+
},
79+
},
6380
},
6481
},
65-
},
66-
},
67-
};
82+
};
83+
}
84+
85+
ChartJS.register(ArcElement, Tooltip, Legend);
86+
});
6887
</script>
6988

7089
<style scoped>

‎src/pages/Dashboard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
</template>
136136

137137
<script lang="ts" setup>
138-
import { computed, onMounted, ref, watch } from 'vue';
138+
import { onMounted, ref, watch } from 'vue';
139139
import { useI18n } from 'vue-i18n';
140140
import GeneralSettings from '../components/GeneralSettings.vue';
141141
import WhiteList from '../components/WhiteList.vue';

‎src/pages/Popup.vue‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@
55
<p class="header">Web Activity Time Tracker</p>
66
</div>
77
<div class="icons-block">
8+
<img
9+
class="dark-mode-icon"
10+
height="25"
11+
src="../assets/icons/light-mode.svg"
12+
title="Disable Dark Mode"
13+
v-if="darkMode == true"
14+
@click="changeDarkMode(false)"
15+
/>
16+
<img
17+
class="dark-mode-icon"
18+
title="Enable Dark Mode"
19+
height="25"
20+
src="../assets/icons/dark-mode.svg"
21+
v-if="darkMode == false"
22+
@click="changeDarkMode(true)"
23+
/>
824
<a @click="openPage(SettingsTab.Dashboard)"
925
>{{ t('dashboard.message') }}<img height="22" src="../assets/icons/dashboard.svg"
1026
/></a>
@@ -79,25 +95,46 @@ import ByDays from '../components/ByDays.vue';
7995
import Review from '../components/Review.vue';
8096
import { openPage } from '../utils/open-page';
8197
import { SettingsTab, TypeOfList } from '../utils/enums';
98+
import { injecStorage } from '../storage/inject-storage';
99+
import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
100+
import { applyDarkMode } from '../utils/dark-mode';
82101
83102
const { t } = useI18n();
103+
const settingsStorage = injecStorage();
84104
85105
const activeTab = ref<TypeOfList>();
106+
const darkMode = ref<boolean>();
86107
87-
onMounted(() => {
108+
onMounted(async () => {
88109
activeTab.value = TypeOfList.Today;
110+
darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
111+
if (darkMode.value) applyDarkMode(darkMode.value);
89112
});
90113
91114
function selectTab(type: TypeOfList) {
92115
activeTab.value = type;
93116
}
117+
118+
async function changeDarkMode(value: boolean) {
119+
await settingsStorage.saveValue(StorageParams.DARK_MODE, value);
120+
darkMode.value = value;
121+
applyDarkMode(value);
122+
updateTab();
123+
}
124+
125+
function updateTab() {
126+
const tempValue = activeTab.value;
127+
activeTab.value = undefined;
128+
setTimeout(() => {
129+
activeTab.value = tempValue;
130+
}, 50);
131+
}
94132
</script>
95133

96134
<style scoped>
97135
.headerBlock {
98136
height: 52px;
99137
}
100-
101138
.headerBlock .header {
102139
font-size: 16px;
103140
padding: 0 10px;
@@ -120,7 +157,7 @@ function selectTab(type: TypeOfList) {
120157
}
121158
122159
.headerBlock .icons-block a:hover {
123-
color: rgb(99, 99, 243);
160+
filter: invert(40%) sepia(94%) saturate(3371%) hue-rotate(227deg) brightness(99%) contrast(92%);
124161
}
125162
126163
.headerBlock .icons-block a {
@@ -133,4 +170,8 @@ function selectTab(type: TypeOfList) {
133170
vertical-align: middle;
134171
padding-left: 5px !important;
135172
}
173+
.headerBlock .icons-block .dark-mode-icon {
174+
vertical-align: middle;
175+
margin-right: 10px;
176+
}
136177
</style>

‎src/popup.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -11,6 +11,7 @@
1111
<script type="module" src="./popup.ts"></script>
1212
</body>
1313

14+
<link rel="stylesheet" href="assets/css/dark.css" />
1415
<link rel="stylesheet" href="assets/css/main.css" />
1516
<link rel="stylesheet" href="assets/css/general.css" />
1617
</html>

‎src/utils/dark-mode.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff 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+
}

0 commit comments

Comments
 (0)