sek-consulting / solid-ui

Beautifully designed components. Built with Kobalte & corvu. Styled with Tailwind CSS.
https://www.solid-ui.com
MIT License
674 stars 25 forks source link

Docs missing darkmode example for regular Solid App. #66

Closed oluijks closed 3 months ago

oluijks commented 3 months ago

In the docs there is an example of implementing darkmode but that's for SolidStart. Is there an example of using this but with a standard Solid app or could the docs be updated with one?

sek-consulting commented 3 months ago

Hi :) I'm currently in the process of updating the docs, including installation & dark-mode guides for all the possible frameworks/setups.

grafik

But since the setup for a standard Solid app is only slightly different I can quickly show you how to modify the current setup guide: https://www.solid-ui.com/docs/dark-mode

You only need to change cookieStorageManagerSSR to createLocalStorageManager and you're done. So the app.tsx would look like this:

import "./App.css";

import { ModeToggle } from "~/components/mode-toggle";
import {
  ColorModeProvider,
  ColorModeScript,
  createLocalStorageManager,
} from "@kobalte/core";

function App() {
  const storageManager = createLocalStorageManager("vite-ui-theme");
  return (
    <>
      <ColorModeScript storageType={storageManager.type} />
      <ColorModeProvider storageManager={storageManager}>
        <ModeToggle />
        <p>HELLO WORLD</p>
      </ColorModeProvider>
    </>
  );
}

export default App;

The mode-toggle.tsx can be taken as is.