tacos
v2.1.0
Published
Boostrap a Next.js project with components, API routes, and utilities.
Downloads
228
Readme
Tacos
Boostrap a Next.js project with components, API routes, and utilities.
Usage
In a Next.js project:
npm i tacos
Theme (light/dark modes)
Comes with support for dark
and light
themes, and system
for the current user agent theme. To set it up, in app/layout.tsx
, add the ThemeSetter
component within <head>
, and suppressHydrationWarning
, data-theme-preference=""
, and data-theme=""
on <html>
:
import ThemeSetter from 'tacos/components/theme-setter';
export default function Layout() {
return (
<html suppressHydrationWarning data-theme-preference="" data-theme="">
<head>
<ThemeSetter />
</head>
{/* ... */}
</html>
);
}
Then, within your CSS, you can do the following:
.component {
color: black;
:where([data-theme='dark']) & {
color: white;
}
}
Use the current theme
import {useTheme} from 'tacos/components/theme-setter';
function Component() {
const theme = useTheme();
console.log(theme); // > dark
}
Change theme preference
import {setThemePreference} from 'tacos/components/theme-setter';
function Component() {
const handleClick = useCallback(() => {
setThemePreference('dark');
}, []);
return <button onClick={handleClick}>Use dark mode</button>;
}