Untitled UI colors
npm install @untitled-theme/colorsUsing Tailwind:
// tailwind.config.js
import colors from '@untitled-theme/colors';
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors,
},
// 👇🏽 or this, to remove tailwind's default colors and use only untitled ui's
colors,
},
};Using Vanilla Extract:
// theme.css.ts
import colors from '@untitled-theme/colors';
import {createTheme, style} from '@vanilla-extract/css';
export const [themeClass, vars] = createTheme({
color: colors,
});Using Panda CSS:
// panda.config.js
import colors from '@untitled-theme/colors/panda';
import {defineConfig} from '@pandacss/dev';
export default defineConfig({
theme: {
extend: {
tokens: {
colors,
},
},
},
});Using CSS variables:
// layout.jsx
import colors from '@untitled-theme/colors/vars';
export default function RootLayout({children}) {
return (
<html style={colors}>
<body>{children}</body>
</html>
);
}Using vanilla CSS
import '@untitled-theme/colors/index.css';See all colors here