0.4.1 • Published 10 months ago
@bernankez/theme v0.4.1
theme
The default style of all my websites.
Click HERE to get a live preview.
Color variables can be found in HERE.
Install
pnpm i @bernankez/theme
Usage
Default usage
// main.ts
import "@bernankez/theme/css/none/index.css";
With UnoCSS
// uno.config.ts
import { presetNone } from "@bernankez/theme";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [presetUno()],
theme: {
...presetNone.unocss,
},
});
Or with TailwindCSS
// tailwind.config.js
import { presetNone } from "@bernankez/theme";
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
...presetNone.tailwind,
},
plugins: [],
};
<div class="text-primary-foreground bg-primary">
Hello world!
</div>
.usage-in-css {
color: rgb(var(--primary-foreground));
background-color: rgb(var(--primary));
}
Using with Shadcn
// main.ts
import "@bernankez/theme/css/shadcn/index.css";
// tailwind.config.js
import { presetShadcn } from "@bernankez/theme";
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
...presetShadcn.tailwind,
},
plugins: [],
};
<div class="text-primary-foreground bg-primary">
Hello world!
</div>
.usage-in-css {
color: hsl(var(--primary-foreground));
background-color: hsl(var(--primary));
}