How to customize dark / light mode branding

default discord avatar
12 months ago

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
    12 months ago

    Hey @Oron there is a local storage key


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

  • default discord avatar
    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
    Payload Team
    12 months ago
  • default discord avatar
    last week

    I've just encountered this with my logo and icon SVGs which are in their own custom components, loaded in through 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: {
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

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