Based on Google material 3,to generate theme color
//vite.config.ts
import Unocss from "unocss/vite";
import presetM3 from "unocss-presets-m3";
export default defineConfig({
plugins: [
Unocss({
presets: [ await presetM3("#ff00cc")],
}),
],
});
just like what tailwindcss does
<div class="bg-primary color-primary-10"></div>
The theme color can be changed dynamically in the browser by providing a base color or an image
import { getThemeJSON, applyTheme } from "unocss-presets-m3";
async function changeThemeColor(color:string) {
let theme = await getThemeJSON(color);
applyTheme(theme);
}
async function changeThemeImg(imgUrl: string) {
let theme = await getThemeJSON(imgUrl, [], "img");
applyTheme(theme);
}