How to set icon and logo for dark mode

haaziquelast year

7

• 

  janpeinilast year

  You could simply add a styles.scss to each component and handle the dark mode styling inside each owns scss file.

  
  
  

  .yourComponentStyles {
    ...
  }
  
  html[data-theme='dark'] {
    .yourComponentStyles {
    ...
    }
  }

• 

  haaziquelast year

  here's my code

  
  
  

  import React from "react";
  import "./custom.scss";
  
  const Logo = () => {
    return (
      <div className="dirahlogo">
        <img
          className="text-white"
          src="/icons/iconwithtext.svg"
          alt="Dirah Logo"
        />
      </div>
    );
  };
  
  export default Logo;

  
  
  

  Scss file

  
  

  :root {
    --icon-color: black; /* Default color for light mode */
  }
  
  html[data-theme='dark'] :root {
    --icon-color: white; /* Color for dark mode */
  }
  
  .dirahlogo img {
    color: var(--icon-color); /* Set fill color dynamically with currentColor */
    height: 10em;
    margin: auto;
    display: block;
  }

  
  
  

  payload.config.ts

  
  

      components: {
        graphics: {
          Logo: '@/components/graphics/logo#default',
          Icon: '@/components/graphics/icon#default',
        },
      },

  
  
  

  the logo appears black in both darkmode and light mode in the SVG i have set the fill="currentColor" for all path tags

  
  
  

  Is there something i am doing wrong

• 

  janpeinilast year

  ahhhh... you cannot fill an svg if you use an img tag to implement it. You have to insert the <svg> natively in the code there.

• 

  haaziquelast year

  okay let me try that

  
  
  

  const Logo = () => {
    return (
      <div className="dirahlogo">
        <svg
          width="130"
          height="65"
          viewBox="0 0 130 65"
          fill="none"
          className="text-white"
          // xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_1_1456)">
            ...
          </g>
          <defs>
            <clipPath id="clip0_1_1456">
              <rect width="129.37" height="65" />
            </clipPath>
          </defs>
        </svg>
      </div>
    );

  
  
  

  tried this and now nothing is visible

  
  
  

  i added a text-white just to see it it does anything but no luck

• 

  janpeinilast year

  and the fill inside the svg ist set to

  fill="currentColor"

  ?

• 

  s.laamlast year

  import { cn } from '@/utilities/cn'
  import React from 'react'
  
  export const Logo = ({ className = '' }: { className?: string }) => {
    return (
      <svg
        className={cn('max-w-[9.375rem] fill-black dark:fill-white', className)}
        width="436"
        height="89"
        viewBox="0 0 436 89"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M132.76 48.43C131.16 50.07 129.41 54.63 127.86 56.9C118.4 70.78 103.34 82.21 84.81 86.28C74.16 88.62 66.58 88.61 55.89 86.33C36.86 82.27 20.77 69.74 11.59 55.25C6.54997 47.3 2.40997 35.12 0.839972 26.2C0.689972 25.38 0.139978 22.75 0.689978 22.64C5.12998 23.94 9.56664 25.24 14 26.54C17.1866 30.7867 20.3733 35.0333 23.56 39.28C28.3733 34.6133 33.1866 29.9433 38 25.27C39.5 29.6433 41 34.0167 42.5 38.39L42.93 38.76C45.53 37.2867 48.13 35.81 50.73 34.33C55.79 40.39 60.6 46.61 66.38 52.21C73.05 46.88 77.22 39.84 81.39 33.05C85.83 37.4567 90.2733 41.8633 94.72 46.27L99.63 39.88C102.43 41.92 105.23 43.96 108.03 46C111.49 38.72 114.95 31.4367 118.41 24.15C125.117 26.7167 131.82 29.28 138.52 31.84C136.6 37.36 134.68 42.8833 132.76 48.41V48.43Z" />
  
  
      </svg>
    )
  }

  
  
  

  remove fill tag from paths

  
  
  

  try to simplify the svg, put it in figma , and select all and flatten

• 

  haaziquelast year

  Hi guys was able to solve it using this css

  
  
  

  html[data-theme='dark'] .dirahlogosmall svg {
    fill: white; /* Set specific fill color for dark mode */
  }

  
  
  

  const Logo = () => {
    return (
      <div className="dirahlogo">
        <svg
          width="130"
          height="65"
          viewBox="0 0 130 65"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_1_1456)">...</g>
          <defs>
            <clipPath id="clip0_1_1456">
              <rect width="129.37" height="65" />
            </clipPath>
          </defs>
        </svg>
      </div>
    );
  };

  
  
  

  in the path tags i removed all

  fill

  attributes