Is there a way to dynamically change values similar to ThemeProvider in styled-components?

[ryuji-1to]

Subject

topic

Description

To dynamically change values similar to ThemeProvider in styled-components, what is the best approach in Panda CSS?

[anubra266]

@ryuji-1to can you add a link example that shows what you mean.

[omarkhatibco]

I would say no, this is a build-time library and rely on the engine to generate the css, something like tailwindcss.

[ryuji-1to]

@anubra266
like this

// Define your themes
const lightTheme = {
  backgroundColor: '#FFFFFF',
  textColor: '#000000',
};

const darkTheme = {
  backgroundColor: '#000000',
  textColor: '#FFFFFF',
};

// Define a styled component that uses the theme
const StyledComponent = styled.div`
  background-color: ${props => props.theme.backgroundColor};
  color: ${props => props.theme.textColor};
`;

// Create a component that renders the styled component inside a ThemeProvider
const ThemeChangeComponent = ({ isDarkMode }) => {
  const theme = isDarkMode ? darkTheme : lightTheme;

  return (
    <ThemeProvider theme={theme}>
      <StyledComponent>Content</StyledComponent>
    </ThemeProvider>
  );
};

export default ThemeChangeComponent;

https://styled-components.com/docs/advanced

In Panda CSS, what would be the best approach to achieve something like this? cva?

[anubra266]

@ryuji-1to light/dark are not themes. They're color modes. You can do that in panda through semanticTokens. Then use data-color-mode attribute on body to detect color mode.
As for theme, example is here https://panda-css.com/docs/guides/multiple-themes
Lemme know if there's anything you don't understand

[rodrigorellana]

I don't remember, you can check my code here , the latest thing I remember is that the dark mode was working

[rodrigorellana]

https://github.com/rodrigorellana/acidlabs

[HasanHaghniya]

@rodrigorellana many thanks , but there is no code in your mentioned repo , am i miss something?

[rodrigorellana]

@rodrigorellana many thanks , but there is no code in your mentioned repo , am i miss something?

See dev branch

[HasanHaghniya]

@rodrigorellana yeah thanks i found it, but it seems you dont use panda to create multiple theme

[yoshi95]

Sorry to hijack the convo, does the multi-theme setup suggested in
https://panda-css.com/docs/guides/multiple-themes
allow for 1 css file per theme? maybe @segunadebayo can elaborate at your convenience

• is it 1 preset/config for each brand?

I am wondering how do I achieve multi-brand theming in Panda with the same component/build? Ideally 1 css per brand so I don't send un-used css to another brand.

For example, I have Brand1, Brand2, Brand3

• each has different design tokens, i.e. fonts/colors/spacing etc
• the user will not switch brand without refreshing the page (unlike light/dark mode theming), so each request can potentially load a different branded-css file in my mind.

What about stylings for components that are lazy imported based on user interaction? currently those lazy component styles are also part of the initial bootstrap css.

Any suggestion would be great, thanks a lot

[jamesryan-dev]

start your own discussion

[iamsuneeth]

Did we start a separate discussion for this ?.
This question matches my use case. I was planning to experiment using presets and nested conditions to make the generated styles separate for each brand but in a single css file. But if there is a way to generate multiple css files with a single build ( ie. One generated class name in the final ja build but different styles can be attached to the same class during Page generation - SSR, static generation etc ), that will be best.

[astahmer]

we have some plans to make multi-theming (and mostly importing only what you need) easier to work with

in the meantime you can:

• create a different panda.config that extends the base one and only specify the overrides for a given condition on each tokens
• use the panda cssgen -o path/to/file.css -c path/to/panda.config command multiple times to create a 1 CSS file for each theme
• import that CSS file that contains all of the tokens as CSS variables overrides in your condition (CSS selector)

[iamsuneeth]

I'm sorry I didn't understand the third step. Could I get an example for this one ?

[jamesryan-dev]

Using next-themes I was able to achieve this:

panda.config.ts

 conditions: {
    extend: {
      dark: '.dark &, [data-theme="dark"] &',
      light: ".light &",
    },
  },

 semanticTokens: {
      colors: {
        textPrimary: {
          value: {
            base: "black",
            _dark: "white",
          },
        },
        background: {
          value: {
            base: "white",
            _dark: "black",
          },
        },
      },
    },

Providers.tsx component which wraps my app in the global Layout.tsx ( next13 )

"use client";
import { ReactNode } from "react";
import { ThemeProvider } from "next-themes";

export interface ProvidersProps {
  children?: ReactNode;
}

export default function Providers({ children }: ProvidersProps) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Toggle Button:

"use client";

import { useTheme } from "next-themes";
import { css } from "../../../styled-system/css";
import { useEffect, useState } from "react";

function useThemeSwitch() {
  const theme = useTheme();
  const { setTheme, resolvedTheme } = theme;
  const isDark = resolvedTheme === "dark";

  const toggleTheme = () => setTheme(isDark ? "light" : "dark");
  const iconText = isDark ? "Dark" : "Light";

  return {
    iconText,
    toggleTheme,
  };
}

export default function ToggleModeButton() {
  const { toggleTheme, iconText } = useThemeSwitch();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <button
      onClick={toggleTheme}
      className={css({
        px: "2",
        py: "1",
        textStyle: "xl",
        fontWeight: "semibold",
        letterSpacing: "tight",
        rounded: "md",
        position: "fixed",
        top: "0",
        left: "0",
        zIndex: "20",
      })}
    >
      <span>{iconText} </span>
    </button>
  );
}

Then finally the theming in use:

 <div className={css({ bg: "background" })}>Hello</div>

[trompx]

Pigment CSS managed to generate styles based on runtime values as seen here.
Having the same feature in panda would be awesome!

[anubra266]

https://play.panda-css.com/nZadEgGmsH

[trompx]

It still requires to pre-create the styles. How would you handle the case where the hex color is returned by the server and is dynamic (like extracted from an image so I don't know it ahead of time)? Generating millions of variants values is definitely not an option.

[astahmer]

we don't support that, unlike Kuma-UI, StyleX and Pigment CSS, Panda CSS is not trying to be a hybrid (static+dynamic) solution but only a static one

those solutions will fallback to inline styling when things get too dynamic, feel free to do the same when you need it

using style={{ xxx }} you can achieve the same features (styling with runtime values)
you can even use Panda conditions by leveraging CSS variables to do runtime conditional styles from unknown values
https://play.panda-css.com/NG8Vr--oHZ

[olup]

Benchmarking panda for our next project - where clients can configure some of their styling options (hint color, etc...). The configuration is stored in DB and obtained at app startup. If I understand correctly, this use case is completely not supported in Panda ? I this is not correct, what would be the idiomatic way to archieve this ?

[astahmer]

it's supported, although not common for most Panda users

build-time solution

if you have access to each client configuration at build-time
(use-case could be multi-brand theming where there are maybe a few or dozens differents at most)

you can use the themes and create multiple distinct themes

you can either :

• hardcode those
• or make an async preset that fetches each client's theme and dynamically build itself

runtime solution

if you only have access to those at runtime:
(use-case could be some sort of CMS that allows configuring parts of the page)

• using SSR ? I'd say you can still use the above approach by directly using the @pandacss/node package (use loadConfigAndCreateContext or directly new PandaContext if you want to use an in-memory config)
• this happens (getting each client specific styles) client-side ? you can override tokens using an utility such as assignInlineVars (available in @pandabox/utils)

[itsjavi]

For runtime dynamic values, I use CSS vars in the panda styles and inject their values via the style prop. I think it's the cleaner solution. Example:

  const className = css({
    color: 'var(--fg)',
    _dark: {
      color: 'var(--fg-dark)',
    },
  })

  const cssVars = {
    '--fg': inputLightValue,
    '--fg-dark': inputDarkValue
  } as React.CSSProperties

  return <div className={className} style={cssVars}>{children}</div>

With this solution you can also take benefit of the panda conditions like dark mode, without having to write conditional assignments in JS.

[adbutterfield]

I just had to do something similar. But I group the rules like this, which I think is a little nicer:

  const className = css({
    color: {
      base: "var(--fg)",
      _dark: "var(--fg-dark)",
    },
  });