Merge pull request #15 from kaandesu/feat/theme_manager_plugin

chore: added theme manager plugin
kaandesu · Apr 25, 2023 · 7a35221 · 7a35221
2 parents 129f4ca + 63d525c
commit 7a35221
Show file tree

Hide file tree

Showing 15 changed files with 682 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ several essential dependencies that will help you get started with your Vue3 pro
 
 [Live Demo](https://kaandesu.github.io/vite-vue-ultimate-starter/)
 
+<hr>
+
 ## Out of the box
 
 ### Vue3
@@ -43,20 +45,24 @@ several essential dependencies that will help you get started with your Vue3 pro
 - #### [ESLint](https://eslint.org/): A linting tool for JavaScript and TypeScript code.
 - #### [Prettier](https://prettier.io/): A code formatter that ensures consistency in your code style.
 
-### Custom Composables
-
-- #### useThemeManager: A composable that allows you to change the theme of your application.
-  - setTheme: Dynamically sets the theme of your application from [DaisyUI themes](https://daisyui.com/docs/themes/).
-  - getTheme: Returns the current theme of your application.
-  - toggleDark: Toggles the theme of your application between light and dark.
-  ```ts
-  import { useThemeManager } from '@/composables/useThemeManager'
-  const { setTheme, getTheme, toggleDark } = useThemeManager()
-  getTheme() // initial value is 'default'
-  setTheme('dark')
-  getTheme() // 'dark'
-  toggleDark() // 'light'
-  ```
+<hr>
+
+## Custom Plugins
+
+### Vue DaisyUI Theme Manager
+
+This plugin allows you to change the theme of your application at runtime.<br>
+It also allows you to watch for system theme changes and update the theme accordingly.<br>
+
+Initiate the plugin with the default theme and the dark theme.
+Theme options are from Daisiy UI themes as well as some custom added themes.
+Check all the built-in [DaisyUI Themes](https://daisyui.com/docs/themes/). <br>
+Create your own custom daisy ui theme [here](https://daisyui.com/theme-generator/) and add it to the
+`tailwind.config.js` file!
+
+You can find the detailed [API documentation here](https://github.com/kaandesu/vite-vue-ultimate-starter/tree/master/src/plugins/themeManager/README.md).
+
+<hr>
 
 ## Recommended IDE Setup
 
@@ -66,6 +72,8 @@ several essential dependencies that will help you get started with your Vue3 pro
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).
 
+<hr>
+
 ## Project Setup
 
 ```sh
@@ -139,6 +147,8 @@ npm run lint
 npm run help
 ```
 
+<hr>
+
 ## Contributing
 
 Contributions to the project is highly appreciated.

diff --git a/index.html b/index.html
@@ -12,6 +12,10 @@
     <link rel="icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
     <link rel="mask-icon" href="/favicon-dark.svg" color="#FFFFFF">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols">
     <title>Vite App</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/theme-preview">Theme Preview</RouterLink>
       </nav>
     </div>
   </header>
@@ -39,7 +40,7 @@ nav {
 }
 
 nav a.router-link-exact-active {
-  color: var(--color-text);
+  color: currentColor;
 }
 
 nav a.router-link-exact-active:hover {
@@ -49,7 +50,7 @@ nav a.router-link-exact-active:hover {
 nav a {
   display: inline-block;
   padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid currentColor;
 }
 
 nav a:first-of-type {

diff --git a/src/assets/google-material.css b/src/assets/google-material.css
@@ -0,0 +1,24 @@
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+  }
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,4 +1,5 @@
 @import './base.css';
+@import './google-material.css';
 
 #app {
   max-width: 1280px;

diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
@@ -30,14 +30,14 @@ i {
   width: 32px;
   height: 32px;
 
-  color: var(--color-text);
+  color: currentColor;
 }
 
 h3 {
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 0.4rem;
-  color: var(--color-heading);
+  color: theme('colors.accent');
 }
 
 @media (min-width: 1024px) {
@@ -51,15 +51,15 @@ h3 {
     left: -26px;
     position: absolute;
     border: 1px solid var(--color-border);
-    background: var(--color-background);
+    background: #f2f2f2;
     border-radius: 8px;
     width: 50px;
     height: 50px;
   }
 
   .item:before {
     content: ' ';
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid currentColor;
     position: absolute;
     left: 0;
     bottom: calc(50% + 25px);
@@ -68,7 +68,7 @@ h3 {
 
   .item:after {
     content: ' ';
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid currentColor;
     position: absolute;
     left: 0;
     top: calc(50% + 25px);

diff --git a/src/composables/theme.ts b/src/composables/theme.ts
diff --git a/src/main.ts b/src/main.ts
@@ -1,12 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-
+import { createThemeManager } from './plugins/themeManager'
 import './assets/main.css'
 import './assets/style.css'
 
 const app = createApp(App)
-
-app.use(router)
+  .use(router)
+  .use(createThemeManager({ light: 'breeze', dark: 'storm', watchSystemTheme: true }))
 
 app.mount('#app')