How to customize dark / light mode branding

oronoa2 years ago

4

• 

  damnstaychill2 years 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

• 

  oronoa2 years 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

• 

  jarrod_not_jared

  2 years ago

  This should steer you in the right direction:

  https://discord.com/channels/967097582721572934/1065405847376769146/1065426167479402548
• 

  herb3763last year

  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,
        }
      }
    },
  ...