stayedcss

Getting Started

Introduction Installation

Set Up

Basic Styles Styles with Use Client

Styles

Media Query Dark Mode Pseudo Classes Pseudo Elements Combinators

Community

Contribution Preview Code

Dark Mode

Set Up

1. Create cookieStore in app/layout.tsx

Use cookieStore to retrieve the current theme mode from cookies or set a default.

import { cookies } from "next/headers";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // add cookieStore in here
  const cookieStore = await cookies();
  const mode = cookieStore.get("mode")?.value || "light";

  return (
    <html>
      { /* add className={mode} in body tag */ }
      <body className={mode}>
        {children}
      </body>
    </html>
  );
}

2. Create an API

Create an API to save the theme mode (Light or Dark) from the client.

// app/api/set-mode
import { saveScreenMode } from "stayedcss/client";

export async function POST(request: Request) {
  const { mode } = await request.json();
  return saveScreenMode(mode);
}

3. Import in style object

To enable dark mode, use the &dark property inside style object.

import { useStyle } from "stayedcss";

export default function DarkModeExample() {
  return (
    <div className={style.container}>
      { /* your code */ }
    </div>
  );
}

const style = useStyle({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "white",
  },
  "&dark": {
    container: {
      backgroundColor: "black",
  },}
});

Update LightMode/DarkMode

Use the changeScreenMode function to toggle between light and dark modes by passing the desired mode ("light" or "dark") when the button is clicked.

"use client";

import { changeScreenMode } from "stayedcss/client";

export default function ModeButton() {
  return (
    <div className={style.container}>
      <button onClick={() => changeScreenMode("light")}>
        LightMode
      </button>
      <button onClick={() => changeScreenMode("dark")}>
        DarkMode
      </button>
    </div>
  );
}