SolidJS•4mo ago

Theme-switcher for solid

I'm building my project using SolidJS, PandaCSS, and Park UI. I'm currently looking for a robust theme switcher, similar to "next-themes", to toggle between light and dark modes effectively. https://github.com/pacocoursey/next-themes If there's a SolidJS-friendly solution or best practice for managing color mode that integrates well with PandaCSS, I’d love to explore it. #helpasap

GitHub

GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 li...

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - pacocoursey/next-themes

8 Replies

Madaxen86•4mo ago

You can have a look at kobaltes Color Mode: https://github.com/kobaltedev/kobalte/tree/main/packages/core/src/color-mode

GitHub

kobalte/packages/core/src/color-mode at main · kobaltedev/kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS. - kobaltedev/kobalte

Madaxen86•4mo ago

export default function App() {
  const storageManager = cookieStorageManagerSSR(
    isServer
      ? (getRequestEvent()?.request.headers.get("cookie") ?? "")
      : document.cookie,
  );

  return (
    <Router
      root={(props) => {
        return (
            <Suspense>
              <ColorModeScript storageType={storageManager.type} />
              <>
                <ColorModeProvider storageManager={storageManager}>
                      {props.children}
                </ColorModeProvider>
              </>
            </Suspense>
        );
      }}
    >
      <FileRoutes />
    </Router>
  );
}

export default function App() {
  const storageManager = cookieStorageManagerSSR(
    isServer
      ? (getRequestEvent()?.request.headers.get("cookie") ?? "")
      : document.cookie,
  );

  return (
    <Router
      root={(props) => {
        return (
            <Suspense>
              <ColorModeScript storageType={storageManager.type} />
              <>
                <ColorModeProvider storageManager={storageManager}>
                      {props.children}
                </ColorModeProvider>
              </>
            </Suspense>
        );
      }}
    >
      <FileRoutes />
    </Router>
  );
}

Will add data-kbTheme="light" to the html element. Stores the theme in a cookie (great for SSR to prevent flashing ) so your panda config should be somewhat

const config = {
  conditions: {
    light: '[data-kb-theme=light] &',
    dark: '[data-kb-theme=dark] &'
  }
}

const config = {
  conditions: {
    light: '[data-kb-theme=light] &',
    dark: '[data-kb-theme=dark] &'
  }
}

ellers•4mo ago

Though this doesn't answer the question directly, DaisyUI's theme handling is excellent with SolidJS.

MásQuéÉlite•4mo ago

There's also SolidUI

Mad_angleOP•4mo ago

does this works with park-ui components? i try to do that ...but nothing happen im using park-ui....cant use another ui component library...

Mad_angleOP•4mo ago

it does create cookie ...but didnt get reflected.

Madaxen86•4mo ago

How does Park UI switch themes? I am afk. I’ll have a look later. Maybe you just need to add a class to the body if you have access to the css variables you can simply update the selectors like

just guessing
::root {
    --text:black;
    --background:white;
}
::root [data-kb-theme="dark"] {
 --text: white;
 --background: black;
}

just guessing
::root {
    --text:black;
    --background:white;
}
::root [data-kb-theme="dark"] {
 --text: white;
 --background: black;
}

otherwise you must add "light" / "dark" css class to the html element e.g.

// call this function in a component inside the ColorModeProvider (not inside the app.tsx)
export function makeParkUIThemeMode() {
  const colorMode = useColorModeValue("light", "dark");
  createEffect(() => {
    if (colorMode() === "dark") {
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    } else {
      document.documentElement.classList.add("light");
      document.documentElement.classList.remove("dark");
    }
  });
}
//e.g.
function ParkUIDarkMode() {
  makeParkUIThemeMode();
  return null; //or whatever
}


//app.tsx
//...
  <ColorModeProvider storageManager={storageManager}>
       <ParkUIDarkMode />
       <Suspense>{props.children}</Suspense>
  </ColorModeProvider>

// call this function in a component inside the ColorModeProvider (not inside the app.tsx)
export function makeParkUIThemeMode() {
  const colorMode = useColorModeValue("light", "dark");
  createEffect(() => {
    if (colorMode() === "dark") {
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    } else {
      document.documentElement.classList.add("light");
      document.documentElement.classList.remove("dark");
    }
  });
}
//e.g.
function ParkUIDarkMode() {
  makeParkUIThemeMode();
  return null; //or whatever
}


//app.tsx
//...
  <ColorModeProvider storageManager={storageManager}>
       <ParkUIDarkMode />
       <Suspense>{props.children}</Suspense>
  </ColorModeProvider>

MásQuéÉlite•4mo ago

oh yea, that is very simple to do!

bootstrap.ts

Gaming

Programming

Theme-switcher for solid

Did you find this page helpful?