Html Question posted in
Some basic documentation can be found here.

Html – How to set dark mode for SVG circle and it's properties

I am using tailwind css in one of my react application where i used one SVG tag for circular progress bar. In the page i used to set the dark theme, Where in click of theme icon page converts to black and white. Other control used in the page is working fine. But the SVG image used for polygon and circle which have properties like stroke and fill. Which i am not able to convert to dark.

Below is the code and image used for normal screen:

<div className="mt-5 flex h-full w-full items-center justify-center">
      <svg
        className="progress-bar bg-white dark:bg-slate-800"
        width="300"
        height="300"
        viewBox="0 0 100 110"
        fill="none"
      >
        <defs>
          <linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)">
            <stop offset="0%" stopColor="#eee" />
            <stop offset="100%" stopColor="#ddd" />
          </linearGradient>
          <mask id="m1">
            <circle
              transform="rotate(135)"
              stroke="white"
              strokeWidth="12"
              r="44"
              strokeDasharray="270 360"
              pathLength="360"
            />
          </mask>
          <radialGradient id="rg1">
            <stop offset="0%" stopColor="#aaa" />
            <stop offset="40%" stopColor="#ccc" />
            <stop offset="90%" stopColor="white" />
          </radialGradient>
        </defs>
        <ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)" />
        <g transform="translate(50 50)">
          <circle stroke="#eee" strokeWidth="12" r="44" />
          <g mask="url(#m1)">
            <rect
              transform="translate(-50 -50)"
              width="100"
              height="100"
              fill="url(#lg1)"
            />
            <circle
              stroke="#ccc"
              strokeWidth="12"
              r="44"
              strokeDasharray=".5 4.5"
              pathLength="360"
            />
            <circle stroke="#bbb" strokeWidth="6" r="41" />
          </g>
          <g transform="rotate(135)">
            <circle
              id="c1"
              ref={circleRef}
              stroke="#0074F0"
              strokeWidth="12"
              r="44"
              strokeDasharray="100 133"
              pathLength="133"
            />
          </g>
          <line
            transform="rotate(45) translate(38 0)"
            stroke="#aaa"
            strokeWidth="1"
            x2="12"
          />
          <line
            transform="rotate(135) translate(38 0)"
            stroke="#aaa"
            strokeWidth="1"
            x2="12"
          />
          <g id="g1" ref={tickerRef} transform="rotate(216)">
            <line
              transform="rotate(-225) translate(38 0)"
              stroke="#000"
              strokeWidth=".5"
              x2="12"
            />
            <polygon
              transform="rotate(-225) translate(32 0)"
              points="0,-4.5 0,3.2 5,0"
              fill="#000"
            />
          </g>
          <text
            id="t3"
            x="10px"
            y="-13px"
            fontFamily="sans-serif"
            fontSize="9"
            fontWeight="200"
            textAnchor="right"
            dominantBaseline="right"
            fill="#0074F0"
          >
            {props.unit}
          </text>
          <text
            id="t1"
            fontFamily="sans-serif"
            fontSize="20"
            fontWeight="400"
            textAnchor="middle"
            dominantBaseline="middle"
            fill="#0074F0"
          >
            {targetValue}
          </text>
          <text
            id="t2"
            y="10"
            fontFamily="sans-serif"
            fontSize="9"
            fontWeight="400"
            textAnchor="start"
            dominantBaseline="hanging"
            fill="#626d7c"
          >
            {maxValue}
          </text>
        </g>
      </svg>
    </div>

Below is the generated html element for SVG progress bar

<div class="mt-5 flex h-full w-full items-center justify-center"><svg class="progress-bar polygonFill bg-white dark:bg-slate-800" width="300" height="300" viewBox="0 0 100 110" fill="none"><defs><linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)"><stop offset="0%" stop-color="#eee"></stop><stop offset="100%" stop-color="#ddd"></stop></linearGradient><mask id="m1"><circle transform="rotate(135)" stroke="white" stroke-width="12" r="44" stroke-dasharray="270 360" pathLength="360"></circle></mask><radialGradient id="rg1"><stop offset="0%" stop-color="#aaa"></stop><stop offset="40%" stop-color="#ccc"></stop><stop offset="90%" stop-color="white"></stop></radialGradient></defs><ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)"></ellipse><g transform="translate(50 50)"><circle stroke="#eee" stroke-width="12" r="44"></circle><g mask="url(#m1)"><rect transform="translate(-50 -50)" width="100" height="100" fill="url(#lg1)"></rect><circle stroke="#ccc" stroke-width="12" r="44" stroke-dasharray=".5 4.5" pathLength="360"></circle><circle stroke="#bbb" stroke-width="6" r="41"></circle></g><g transform="rotate(135)"><circle id="c1" stroke="#0074F0" stroke-width="12" r="44" stroke-dasharray="100 133" pathLength="133" stroke-dashoffset="20"></circle></g><line transform="rotate(45) translate(38 0)" stroke="#aaa" stroke-width="1" x2="12"></line><line transform="rotate(135) translate(38 0)" stroke="#aaa" stroke-width="1" x2="12"></line><g id="g1" transform="rotate(216)"><line transform="rotate(-225) translate(38 0)" stroke="#000" stroke-width=".5" x2="12"></line><polygon transform="rotate(-225) translate(32 0)" points="0,-4.5 0,3.2 5,0" fill="#000"></polygon></g><text id="t3" x="10px" y="-13px" font-family="sans-serif" font-size="9" font-weight="200" text-anchor="right" dominant-baseline="right" fill="#0074F0">C/h</text><text id="t1" font-family="sans-serif" font-size="20" font-weight="400" text-anchor="middle" dominant-baseline="middle" fill="#0074F0">160</text><text id="t2" y="10" font-family="sans-serif" font-size="9" font-weight="400" text-anchor="start" dominant-baseline="hanging" fill="#626d7c">200</text></g></svg></div>

Below is the image i found when use above code:

enter image description here

And below is the dark theme for same image:

enter image description here

How could i achieve the same theme using above code.

Need help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have fixed this by using useState hooks where when user click on dark mode i accessed the click event and based on that set the hook to dark or light then in each part of SVG tag e.g: polygon, eclipse, circle and text based on the condition used the exact color used like below:

    const [theme, setTheme] = useState("light_mode");

  var btnDiv = document.getElementById("btnDark");
  btnDiv?.addEventListener("click", function () {
    var darkAndLightSpan = btnDiv?.firstChild;
    if (
      darkAndLightSpan?.textContent !== null &&
      darkAndLightSpan?.textContent !== undefined
    ) {
      setTheme(darkAndLightSpan.textContent);
    }
  });
    <svg
        className={`progress-bar ${theme === "light_mode" ? "bg-white" : "#515A67"}`}
        
         <circle
            stroke={theme === "light_mode" ? "url(#b1)" : "url(#darkb1)"}
            strokeWidth="12"
            r="44"
          />
          <g mask="url(#m1)">
            <rect
              transform="translate(-50 -50)"
              width="100"
              height="100"
              fill={theme === "light_mode" ? "url(#lg1)" : "#343E4B"}
            />

    using above code i am able to achieve the requirement, Which i was needed. Thank you everyone for their help and support.


  2. 0

    Add this to your tailwind classes for the the SVG container:

    dark:text-green-500

    I think that should resolve the whole thing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search