Skip to content

Commit 761c48a

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#8 from NangialaiStoman/dark-mode
Add Dark mode
2 parents a481c42 + 557c913 commit 761c48a

File tree

6 files changed

+142
-9
lines changed

6 files changed

+142
-9
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="icon" href="./favicon.png" />
88
<title><%= htmlWebpackPlugin.options.title %></title>
99
</head>
10-
<body>
10+
<body id="app-theme" class="app-theme">
1111
<noscript>
1212
<strong
1313
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't

‎src/assets/css/app.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,61 @@
22
* Vuejs & TailwindCSS Portfolio Main Styling CSS File
33
* Powered by: @NangialaiStoman
44
*/
5+
6+
.theme-light {
7+
--bg-background-primary: white;
8+
--bg-background-secondary: #f7fafc;
9+
--bg-background-tertiary: #e2e8f0;
10+
11+
--bg-background-form: white;
12+
13+
--text-copy-primary: #2d3748;
14+
--text-copy-secondary: #4a5568;
15+
16+
--border-border-color-primary: white;
17+
}
18+
19+
.theme-light .search-highlighted {
20+
background: #f0fff4;
21+
}
22+
23+
.theme-light .search-hover:hover {
24+
background: #f0fff4;
25+
}
26+
27+
.theme-dark .markdown-body {
28+
color: #24292e;
29+
}
30+
31+
.theme-dark .search-highlighted {
32+
background: #2d3748;
33+
}
34+
35+
.theme-dark .search-hover:hover {
36+
background: #2d3748;
37+
}
38+
39+
.theme-dark {
40+
--bg-background-primary: #0d2438;
41+
--bg-background-secondary: #102c44;
42+
--bg-background-tertiary: #1e3951;
43+
44+
--bg-background-form: #1a202c;
45+
46+
--text-copy-primary: #cbd5e0;
47+
--text-copy-secondary: #e2e8f0;
48+
49+
--border-border-color-primary: #1a202c;
50+
}
51+
52+
.theme-dark .markdown-body {
53+
color: #cbd5e0;
54+
}
55+
56+
.theme-dark nav .active {
57+
@apply border-white border-b;
58+
}
59+
60+
.content-wrapper {
61+
transition: background-color 0.25s;
62+
}

‎src/components/ThemeSwitcher.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<a href="#" @click.prevent="toggleTheme">
3+
<i
4+
v-if="theme === 'light'"
5+
data-feather="moon"
6+
class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light w-5"
7+
></i>
8+
<i
9+
v-else
10+
data-feather="sun"
11+
class="text-gray-200 hover:text-gray-50 w-5"
12+
></i>
13+
</a>
14+
</template>
15+
16+
<script>
17+
export default {
18+
props: {
19+
theme: {
20+
type: String,
21+
required: true,
22+
},
23+
},
24+
methods: {
25+
toggleTheme() {
26+
const newTheme = this.theme === 'light' ? 'dark' : 'light';
27+
localStorage.setItem('theme', newTheme);
28+
this.$emit('themeChanged', newTheme);
29+
this.$router.go();
30+
},
31+
},
32+
};
33+
</script>

‎src/components/shared/Header.vue

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,25 +53,44 @@
5353
</button>
5454
</div>
5555
<div
56-
class=" sm:ml-7 bg-gray-50 p-2 rounded-lg shadow-sm cursor-pointer"
56+
class="ml-8 bg-gray-50 p-3 shadow-sm rounded-xl cursor-pointer"
5757
>
58-
<a href="#"
59-
><i
60-
data-feather="moon"
61-
class="text-gray-500 hover:text-gray-400"
62-
></i
63-
></a>
58+
<theme-switcher
59+
:theme="theme"
60+
@themeChanged="updateTheme"
61+
/>
6462
</div>
6563
</div>
6664
</div>
6765
</nav>
6866
</template>
6967

7068
<script>
69+
import ThemeSwitcher from '../ThemeSwitcher';
7170
import feather from 'feather-icons';
71+
7272
export default {
73+
components: {
74+
ThemeSwitcher,
75+
},
76+
data() {
77+
return {
78+
isOpen: false,
79+
theme: '',
80+
};
81+
},
82+
83+
created() {
84+
this.theme = localStorage.getItem('theme') || 'light';
85+
},
7386
mounted() {
7487
feather.replace();
88+
this.theme = localStorage.getItem('theme') || 'light';
89+
},
90+
methods: {
91+
updateTheme(theme) {
92+
this.theme = theme;
93+
},
7594
},
7695
updated() {
7796
feather.replace();

‎src/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,22 @@ import { createApp } from 'vue';
22
import App from './App.vue';
33
import router from './router';
44
import './assets/css/tailwind.css';
5+
import './assets/css/app.css';
56

67
const feather = require('feather-icons');
78
feather.replace();
89

910
createApp(App)
1011
.use(router)
1112
.mount('#app');
13+
14+
const appTheme = localStorage.getItem('theme');
15+
16+
if (
17+
appTheme === 'dark' &&
18+
document.querySelector('body').classList.contains('app-theme')
19+
) {
20+
document.querySelector('body').classList.add('bg-background-primary-dark');
21+
} else {
22+
document.querySelector('body').classList.add('bg-background-primary-light');
23+
}

‎tailwind.config.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,18 @@ module.exports = {
22
purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
33
darkMode: false, // or 'media' or 'class'
44
theme: {
5-
extend: {},
5+
extend: {
6+
colors: {
7+
background: {
8+
'primary-light': '#F7F8FC',
9+
'secondary-light': '#FFFFFF',
10+
'ternary-light': '#f6f7f8',
11+
'primary-dark': '#0D2438',
12+
'secondary-dark': '#102D44',
13+
'ternary-dark': '#1E3851',
14+
},
15+
},
16+
},
617
container: {
718
padding: {
819
DEFAULT: '1rem',

0 commit comments

Comments
 (0)