open-index/open-npm huggingface dataset:
npm package: @luyejiu/theme
Description: The default style for websites under luyejiu.dev and luyejiu.live
Author: luyejiu-dev
Latest version: 0.2.1

# @luyejiu/theme

[![npm](https://img.shields.io/npm/v/@luyejiu/theme?color=red&label=npm)](https://www.npmjs.com/package/@luyejiu/theme)
[![CI](https://github.com/luyejiu-dev/theme/workflows/CI/badge.svg)](https://github.com/luyejiu-dev/theme/actions)
[![LICENSE](https://shields.io/github/license/luyejiu-dev/theme)](https://github.com/luyejiu-dev/theme/blob/master/LICENSE)

The default style for websites under luyejiu.dev and luyejiu.live.

Click [HERE](https://theme-generator.keke.cc/?template=N4IgbgpgTgzglgewHYgFwAYA0IkEMC2EaIANgK4CeEAVnGSNgC4AWEhaoAxgiQrByABGuTgGsA5lARkkAEwEk445o2IBiAGZbtDELNxRR69LhMmQAX2wa%2BESdLkKlK46be79h9Rtw%2Bfl7AAHKDh8AwonZVVUEE0NAE4ADnR0DwMjGLj4lNSrEGDQ8IAxW3sZeVRQRSjvXzq0r0y-eryYCG45cMiXJoBWDX7ehozYgCYANgmJgJA2js8KEqg7KXLu6NiARgB2HZ3h2uaZkU4IJGiq5w3NQYGDzKnJ8ePOU-OllYcKy5rMvd3tvdYs1-Hl8GRGBBvqQrt5bkNsJ4RmpHtMwRCoR8yo5KjDfrFtgBmIlEoGaOqg7CCPiyaDrdQQXoQbYQQRk0bxUa9UYAFhmcCQNnpfwg41OmzJm1F4v5goQWNWOJ%2BPWB2i0ZLV6taZFeEBgMGFsRSuHi4w0ZONpvN2t1%2BoVX0NcTVGs1MwA7gYkALxI6tPF4oTCS7-YH3Z7vfa1rjqiqnTpEelvK68tApFBfeheoTeokNZns7mU1A05GlXjY5rzQnGqrnRY8lBcLI6AaYugAHS9Zb4SwWIA) to get a live preview.

Color variables can be found in [HERE](https://github.com/luyejiu-dev/theme/blob/master/src/theme.json).

## Install

```sh
pnpm i @luyejiu/theme
```

## Usage

### Default usage

```ts
// main.ts
import "@luyejiu/theme/css/none/index.css";
```

With UnoCSS

```ts
// uno.config.ts
import { presetNone } from "@luyejiu/theme";
import { defineConfig, presetUno } from "unocss";

export default defineConfig({
  presets: [presetUno()],
  theme: {
    ...presetNone.unocss,
  },
});
```

Or with TailwindCSS

```js
// tailwind.config.js
import { presetNone } from "@luyejiu/theme";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    ...presetNone.tailwind,
  },
  plugins: [],
};
```

```html
<div class="text-primary-foreground bg-primary">
  Hello world!
</div>
```

```css
.usage-in-css {
  color: rgb(var(--primary-foreground));
  background-color: rgb(var(--primary));
}
```

### Using with Shadcn

```ts
// main.ts
import "@luyejiu/theme/css/shadcn/index.css";
```

```js
// tailwind.config.js
import { presetShadcn } from "@luyejiu/theme";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    ...presetShadcn.tailwind,
  },
  plugins: [],
};
```

```html
<div class="text-primary-foreground bg-primary">
  Hello world!
</div>
```

```css
.usage-in-css {
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
}
```