React Dark Mode

[Psiko]

Yo yoPeoples


React Site eke pages tiyanawa sperate components ewata wena wenama css files tiyanawa ... meke darkmode thamai default colors tiyenne .

Header eke button ekk dala toggle karanne . eka toggle karhama mulu site eka purawatama colors light karanne kohomada?

me ThemeContexts.jsx file eka

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext({
  isLightMode: false,
  toggleLightMode: () => {},
});

export const ThemeProvider = ({ children }) => {
  const [isLightMode, setIsLightMode] = useState(false);

  const toggleLightMode = () => {
    setIsLightMode((prevMode) => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ isLightMode, toggleLightMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useThemeContext = () => useContext(ThemeContext);

me toggle button eka

import { useThemeContext } from "../../context/Themecontext";



const Lightmodetoggle = () => {
  const { isLightMode, toggleLightMode } = useThemeContext();

  return (
    <>
      <button
        className=""
        onClick={toggleLightMode}
        aria-label="Turn on the lights"
        title={isLightMode ? "Turn off the lights" : "Turn on the lights"}
      >
        {isLightMode ? (
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.5163 2.04299C10.6958 2.27652 10.722 2.59348 10.5832 2.85329C9.99927 3.94693 9.66792 5.1961 9.66792 6.52489C9.66792 10.8367 13.1633 14.3321 17.4751 14.3321C18.8039 14.3321 20.0531 14.0008 21.1467 13.4168C21.4065 13.2781 21.7235 13.3043 21.957 13.4837C22.1906 13.6632 22.2974 13.9628 22.2302 14.2495C21.1556 18.835 17.0409 22.25 12.1269 22.25C6.39589 22.25 1.75 17.6041 1.75 11.8732C1.75 6.95909 5.16505 2.84448 9.7505 1.76982C10.0373 1.70261 10.3368 1.80947 10.5163 2.04299Z"
              fill="#fff"
            />
          </svg>
        ) : (
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.5 12C17.5 15.0376 15.0376 17.5 12 17.5C8.96243 17.5 6.5 15.0376 6.5 12C6.5 8.96243 8.96243 6.5 12 6.5C15.0376 6.5 17.5 8.96243 17.5 12Z"
              fill="#fff"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12 1C12.5523 1 13 1.44772 13 2V3.5C13 4.05228 12.5523 4.5 12 4.5C11.4477 4.5 11 4.05228 11 3.5V2C11 1.44772 11.4477 1 12 1ZM4.22149 4.22149C4.61202 3.83097 5.24518 3.83097 5.6357 4.22149L6.69636 5.28215C7.08689 5.67268 7.08689 6.30584 6.69636 6.69636C6.30584 7.08689 5.67268 7.08689 5.28215 6.69636L4.22149 5.6357C3.83097 5.24518 3.83097 4.61201 4.22149 4.22149ZM19.7784 4.2216C20.1689 4.61213 20.1689 5.24529 19.7784 5.63582L18.7177 6.69648C18.3272 7.087 17.694 7.087 17.3035 6.69648C16.913 6.30595 16.913 5.67279 17.3035 5.28226L18.3642 4.2216C18.7547 3.83108 19.3879 3.83108 19.7784 4.2216ZM1 12C1 11.4477 1.44772 11 2 11H3.5C4.05228 11 4.5 11.4477 4.5 12C4.5 12.5523 4.05228 13 3.5 13H2C1.44772 13 1 12.5523 1 12ZM19.5 12C19.5 11.4477 19.9477 11 20.5 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H20.5C19.9477 13 19.5 12.5523 19.5 12ZM17.303 17.3035C17.6936 16.913 18.3267 16.913 18.7172 17.3035L19.7779 18.3642C20.1684 18.7547 20.1684 19.3879 19.7779 19.7784C19.3874 20.1689 18.7542 20.1689 18.3637 19.7784L17.303 18.7177C16.9125 18.3272 16.9125 17.694 17.303 17.3035ZM6.69685 17.3036C7.08738 17.6942 7.08738 18.3273 6.69685 18.7178L5.63619 19.7785C5.24567 20.169 4.6125 20.169 4.22198 19.7785C3.83145 19.388 3.83145 18.7548 4.22198 18.3643L5.28264 17.3036C5.67316 16.9131 6.30633 16.9131 6.69685 17.3036ZM12 19.5C12.5523 19.5 13 19.9477 13 20.5V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V20.5C11 19.9477 11.4477 19.5 12 19.5Z"
              fill="#fff"
            />
          </svg>
        )}
      </button>
    </>
  );
};

export default Lightmodetoggle;

 

[ST.PIERRE]

Context?

 

[Psiko]

Context?

mata tiyn prashne context eken maaru karahama hama page ekkm ewa maru wenne kohomadA?

 

[ST.PIERRE]

Context eken yawana bg colors anith page Wala use karanna puluwan neda

 

[wissnshaftler]

@nevermindNevergiveup pora දන්නවා

 

[Software_Eng]

css varibles wala value eka dark mood ekedi dark mood colors dana eka karanne.
Google karala balapan. Codepen ona tharam thiyenawa

 

[tharuka1989]

bumps

 

[Psiko]

css varibles wala value eka dark mood ekedi dark mood colors dana eka karanne.
Google karala balapan. Codepen ona tharam thiyenawa

man variable dmme nane hardcode colors dala tynne

 

[Software_Eng]

man variable dmme nane hardcode colors dala tynne

inline css da gehuwe, jsx ethule

 

[Anonymous_Abstract]

Main component eka thiyenava na. Oya component eka isLightMode global variable vidiyata use karapan. Sub component vala params vidiyata isLightMode pass karapan. Change kara vithara okkoma change venava.

 

[Hasistranger]

bump

 

[Psiko]

inline css da gehuwe, jsx ethule

external

 

[Anonymous_Abstract]

external

Component athule css gapan ban. StyledComponents use karala. Ubala react use karata react features use karanne nethi eka na prash na.

 

[Psiko]

Main component eka thiyenava na. Oya component eka isLightMode global variable vidiyata use karapan. Sub component vala params vidiyata isLightMode pass karapan. Change kara vithara okkoma change venava.

saaariiii .. meh page eken page ekata context eka pass karala e page eke css walata light-mode class liyanna one neda ... hari giyaaa

---

Component athule css gapan ban. StyledComponents use karala. Ubala react use karata react features use karanne nethi eka na prash na.

stylescomopnents gahpuwama html tags wala nam ehema api daana eka neda tynne
------ Post added on Jan 22, 2024 at 3:03 PM