How to customize dark / light mode branding

default discord avatar
oronoa
12 months ago
4

when white labeling using logo / icon, how can I tell the custom logo component what to render dark or light logo? is there a global parameter for knowing if we are working in light or dark mode ?

  • default discord avatar
    damnstaychill
    12 months ago

    Hey @Oron there is a local storage key

    payload-theme

    that's value is light/dark that you can read from within your logo component

  • default discord avatar
    oronoa
    12 months ago

    @damnstaychill but that only give me the user's choice, could be auto and then it's empty



    I need the actual "real time" theme that is used

  • discord user avatar
    jarrod_not_jared
    Payload Team
    12 months ago
  • default discord avatar
    herb3763
    last week

    I've just encountered this with my logo and icon SVGs which are in their own custom components, loaded in through admin.components.graphics in the payload config.



    I solved it by giving each SVG the same className attribute, then loading in custom CSS and changing the fill of the path of the SVGs. Below is the CSS snippet:


    svg.customBranding path {
        fill: var(--theme-elevation-800) !important;
    }


    Loaded in the custom CSS via admin.css in the payload config:


    export default buildConfig({
      admin: {
        user: Users.slug,
        bundler: webpackBundler(),
        avatar: 'default',
        css: path.resolve(__dirname, './admin/scss/custom.scss'),
        components: {
          graphics: {
            Logo,
            Icon,
          }
        }
      },
    ...
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.