Skip to content

Commit 7a35221

Browse files
kaandesukaandesu
authored
Merge pull request #15 from kaandesu/feat/theme_manager_plugin
chore: added theme manager plugin
2 parents 129f4ca + 63d525c commit 7a35221

File tree

15 files changed

+682
-85
lines changed

15 files changed

+682
-85
lines changed

Diff for: ‎README.md

+24-14
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ several essential dependencies that will help you get started with your Vue3 pro
1919

2020
[Live Demo](https://kaandesu.github.io/vite-vue-ultimate-starter/)
2121

22+
<hr>
23+
2224
## Out of the box
2325

2426
### Vue3
@@ -43,20 +45,24 @@ several essential dependencies that will help you get started with your Vue3 pro
4345
- #### [ESLint](https://eslint.org/): A linting tool for JavaScript and TypeScript code.
4446
- #### [Prettier](https://prettier.io/): A code formatter that ensures consistency in your code style.
4547

46-
### Custom Composables
47-
48-
- #### useThemeManager: A composable that allows you to change the theme of your application.
49-
- setTheme: Dynamically sets the theme of your application from [DaisyUI themes](https://daisyui.com/docs/themes/).
50-
- getTheme: Returns the current theme of your application.
51-
- toggleDark: Toggles the theme of your application between light and dark.
52-
```ts
53-
import { useThemeManager } from '@/composables/useThemeManager'
54-
const { setTheme, getTheme, toggleDark } = useThemeManager()
55-
getTheme() // initial value is 'default'
56-
setTheme('dark')
57-
getTheme() // 'dark'
58-
toggleDark() // 'light'
59-
```
48+
<hr>
49+
50+
## Custom Plugins
51+
52+
### Vue DaisyUI Theme Manager
53+
54+
This plugin allows you to change the theme of your application at runtime.<br>
55+
It also allows you to watch for system theme changes and update the theme accordingly.<br>
56+
57+
Initiate the plugin with the default theme and the dark theme.
58+
Theme options are from Daisiy UI themes as well as some custom added themes.
59+
Check all the built-in [DaisyUI Themes](https://daisyui.com/docs/themes/). <br>
60+
Create your own custom daisy ui theme [here](https://daisyui.com/theme-generator/) and add it to the
61+
`tailwind.config.js` file!
62+
63+
You can find the detailed [API documentation here](https://github.com/kaandesu/vite-vue-ultimate-starter/tree/master/src/plugins/themeManager/README.md).
64+
65+
<hr>
6066

6167
## Recommended IDE Setup
6268

@@ -66,6 +72,8 @@ several essential dependencies that will help you get started with your Vue3 pro
6672

6773
See [Vite Configuration Reference](https://vitejs.dev/config/).
6874

75+
<hr>
76+
6977
## Project Setup
7078

7179
```sh
@@ -139,6 +147,8 @@ npm run lint
139147
npm run help
140148
```
141149

150+
<hr>
151+
142152
## Contributing
143153

144154
Contributions to the project is highly appreciated.

Diff for: ‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
<link rel="icon" href="/favicon.ico">
1313
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
1414
<link rel="mask-icon" href="/favicon-dark.svg" color="#FFFFFF">
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
16+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
17+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined">
18+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols">
1519
<title>Vite App</title>
1620
</head>
1721
<body>

Diff for: ‎src/App.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
1313
<nav>
1414
<RouterLink to="/">Home</RouterLink>
1515
<RouterLink to="/about">About</RouterLink>
16+
<RouterLink to="/theme-preview">Theme Preview</RouterLink>
1617
</nav>
1718
</div>
1819
</header>
@@ -39,7 +40,7 @@ nav {
3940
}
4041
4142
nav a.router-link-exact-active {
42-
color: var(--color-text);
43+
color: currentColor;
4344
}
4445
4546
nav a.router-link-exact-active:hover {
@@ -49,7 +50,7 @@ nav a.router-link-exact-active:hover {
4950
nav a {
5051
display: inline-block;
5152
padding: 0 1rem;
52-
border-left: 1px solid var(--color-border);
53+
border-left: 1px solid currentColor;
5354
}
5455
5556
nav a:first-of-type {

Diff for: ‎src/assets/google-material.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.material-icons {
2+
font-family: 'Material Icons';
3+
font-weight: normal;
4+
font-style: normal;
5+
font-size: 24px; /* Preferred icon size */
6+
display: inline-block;
7+
line-height: 1;
8+
text-transform: none;
9+
letter-spacing: normal;
10+
word-wrap: normal;
11+
white-space: nowrap;
12+
direction: ltr;
13+
14+
/* Support for all WebKit browsers. */
15+
-webkit-font-smoothing: antialiased;
16+
/* Support for Safari and Chrome. */
17+
text-rendering: optimizeLegibility;
18+
19+
/* Support for Firefox. */
20+
-moz-osx-font-smoothing: grayscale;
21+
22+
/* Support for IE. */
23+
font-feature-settings: 'liga';
24+
}

Diff for: ‎src/assets/main.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import './base.css';
2+
@import './google-material.css';
23

34
#app {
45
max-width: 1280px;

Diff for: ‎src/components/WelcomeItem.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@ i {
3030
width: 32px;
3131
height: 32px;
3232
33-
color: var(--color-text);
33+
color: currentColor;
3434
}
3535
3636
h3 {
3737
font-size: 1.2rem;
3838
font-weight: 500;
3939
margin-bottom: 0.4rem;
40-
color: var(--color-heading);
40+
color: theme('colors.accent');
4141
}
4242
4343
@media (min-width: 1024px) {
@@ -51,15 +51,15 @@ h3 {
5151
left: -26px;
5252
position: absolute;
5353
border: 1px solid var(--color-border);
54-
background: var(--color-background);
54+
background: #f2f2f2;
5555
border-radius: 8px;
5656
width: 50px;
5757
height: 50px;
5858
}
5959
6060
.item:before {
6161
content: ' ';
62-
border-left: 1px solid var(--color-border);
62+
border-left: 1px solid currentColor;
6363
position: absolute;
6464
left: 0;
6565
bottom: calc(50% + 25px);
@@ -68,7 +68,7 @@ h3 {
6868
6969
.item:after {
7070
content: ' ';
71-
border-left: 1px solid var(--color-border);
71+
border-left: 1px solid currentColor;
7272
position: absolute;
7373
left: 0;
7474
top: calc(50% + 25px);

Diff for: ‎src/composables/theme.ts

-48
This file was deleted.

Diff for: ‎src/main.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
33
import router from './router'
4-
4+
import { createThemeManager } from './plugins/themeManager'
55
import './assets/main.css'
66
import './assets/style.css'
77

88
const app = createApp(App)
9-
10-
app.use(router)
9+
.use(router)
10+
.use(createThemeManager({ light: 'breeze', dark: 'storm', watchSystemTheme: true }))
1111

1212
app.mount('#app')

0 commit comments

Comments
 (0)