Skip to content

Commit 5da52a4

Browse files
committed
chore: add dynamic type support & configuration file
1 parent 61534d9 commit 5da52a4

File tree

7 files changed

+56
-20
lines changed

7 files changed

+56
-20
lines changed

.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ dist
1414
live-demo
1515
*.local
1616
theme-manager.config.ts
17-
17+
theme-config.ts
1818
# Editor directories and files
1919
.vscode/*
2020
!.vscode/extensions.json

LICENSE.md

-9
This file was deleted.

README.md

+17-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,28 @@ This plugin allows you to change the theme of your application at runtime. It al
44

55
[live-demo](https://kaandesu.github.io/vue-daisyui-theme-manager/)
66

7+
Install:
8+
9+
```bash
10+
npm i vue-daisyui-theme-manager
11+
```
12+
13+
## Setup
14+
15+
As you install `theme-manager.config.ts` will be automatically created and added to the root folder of your project. <br> You can set up the available themes in this file. It will be also used as type definition. But don't forget to specify the list of themes in `tailwind.config.js` as well. More information about setting up the themes at [DaisyUI Themes Setup](https://daisyui.com/docs/themes/).
16+
717
# API
818

19+
## Initial Setup
20+
21+
As you insts
22+
923
## Plugin Setup: `createThemeManager`
1024

1125
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! <br>
1226

1327
```ts
14-
type DaisyThemes = "light" | "default" | "storm" | "breeze" | "dark" | "cupcake" |
28+
type DaisyThemes = "light" | "default" | "dark" | "cupcake" |
1529
"bumblebee" | "emerald" | "corporate" | "synthwave" | "retro" | "cyberpunk" |
1630
"valentine" | "halloween" | "garden" | 'forest' | 'aqua' | 'lofi' | 'pastel' |
1731
'fantasy' | 'wireframe' | 'black' | 'luxury' | 'dracula' | 'cmyk' | 'autumn' |
@@ -43,8 +57,8 @@ import { createThemeManager } from '@/plugins/themeManager'
4357
const app = createApp(App)
4458
app.use(
4559
createThemeManager({
46-
light: 'breeze',
47-
dark: 'storm',
60+
light: 'aqua',
61+
dark: 'coffee',
4862
watchSystemTheme: true,
4963
})
5064
)

create-config.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import fs from 'fs';
2-
2+
import path from 'path';
3+
console.log('Current working directory:', process.cwd());
34
const configContent = `// add the names of the themes you want to use here
45
// warning: you need to specify them in tailwind.config.js as well
56
// DO NOT REMOVE: 'default', 'light', 'dark'
@@ -39,5 +40,13 @@ export default[
3940
] as const;
4041
`
4142

42-
fs.mkdirSync('./src', { recursive: true })
43-
fs.writeFileSync('./theme-manager.config.ts', configContent)
43+
44+
const projectDir = process.env.INIT_CWD;
45+
process.chdir(projectDir);
46+
console.log('Changed working directory:', projectDir);
47+
const filePath = path.join(projectDir, 'theme-manager.config.ts');
48+
49+
fs.mkdirSync('./src', { recursive: true });
50+
fs.writeFileSync(filePath, configContent);
51+
52+
console.log(`Created ${filePath}`);

package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-daisyui-theme-manager",
33
"author": "I Kaan Yilmaz <[email protected]> (https://github.com/kaandesu)",
4-
"version": "0.0.1",
4+
"version": "0.0.22",
55
"license": "MIT",
66
"description": "A plugin that allows you to change DaisyUI themes during runtime. As well as, setting default light and dark themes, and matching the system theme.",
77
"contributors": [
@@ -26,7 +26,9 @@
2626
"url": "https://github.com/kaandesu/vue-daisyui-theme-manager/issues"
2727
},
2828
"files": [
29-
"dist"
29+
"dist",
30+
"create-config.js",
31+
"set-config-path.js"
3032
],
3133
"main": "./dist/vue-daisyui-theme-manager.umd.cjs",
3234
"module": "./dist/vue-daisyui-theme-manager.js",
@@ -43,7 +45,8 @@
4345
"build": "vite build && cp ./create-config.js ./dist && npm run generate:types && npm run build:live-demo",
4446
"build:live-demo": "vite build --mode live-demo --outDir ./live-demo",
4547
"generate:types": "vue-tsc -p tsconfig-build.json",
46-
"postinstall": "node create-config.js"
48+
"set-conf": "node set-config-path.js",
49+
"postinstall": "node create-config.js && npm run set-conf"
4750
},
4851
"dependencies": {
4952
"daisyui": "^2.51.6",

set-config-path.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import fs from 'fs'
2+
import path from 'path'
3+
4+
const projectDir = process.env.INIT_CWD;
5+
process.chdir(projectDir);
6+
const configFile = `${projectDir}/../../theme-manager.config`;
7+
8+
const content = `
9+
import config from ${JSON.stringify(configFile)};
10+
export default config;
11+
`;
12+
13+
const packageDir = process.cwd();
14+
const filePath = path.join(packageDir, 'dist', 'theme-config.ts');
15+
16+
fs.mkdirSync(path.join(packageDir, 'dist'), { recursive: true });
17+
fs.writeFileSync(filePath, content);
18+
19+
console.log(`Created ${filePath}`);

src/themeManager/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { App } from 'vue'
22
import { defaults, pluginInitiated, currentTheme, isDark } from './reactives'
33
// @ts-ignore
4-
import config from 'theme-manager.config'
4+
import config from './theme-config'
55
export type DaisyThemes = (typeof config)[number]
66
export type ThemeOptions = {
77
light: DaisyThemes

0 commit comments

Comments
 (0)