unocss-presets-m3
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

unocss-presets-m3

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")],
    }),
  ],
});

use in browser

just like what tailwindcss does

<div class="bg-primary color-primary-10"></div>

dynamic change in browser

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);
}

Readme

Keywords

none

Package Sidebar

Install

npm i unocss-presets-m3

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

13 kB

Total Files

5

Last publish

Collaborators

  • fgsreally