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