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

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

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

2. Create an API

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

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

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

3. Use darkmode function

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

How to import in components

import { st, stDark } from "stayedcss";

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

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

// apply DarkMode
// same componentId with lightmode.
stDark({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "black",
  },
});

"use client";

import { stClient, stClientDark } from "stayedcss/client";

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

const style = stClient({
  componentId: "component/darkmode-client-example",
  container: {
    backgroundColor: "white",
  },
});

// apply DarkMode
// same componentId with lightmode.
stClientDark({
  componentId: "component/darkmode-client-example", 
  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>
  );
}