Reply to thread

Message

<blockquote data-quote="Psiko" data-source="post: 29535509" data-attributes="member: 583290">Yo yoPeoplesReact 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[CODE=jsx]import { createContext, useContext, useState } from &quot;react&quot;;const ThemeContext = createContext({&nbsp; isLightMode: false,&nbsp; toggleLightMode: () =&gt; {},});export const ThemeProvider = ({ children }) =&gt; {&nbsp; const [isLightMode, setIsLightMode] = useState(false);&nbsp; const toggleLightMode = () =&gt; {&nbsp; &nbsp; setIsLightMode((prevMode) =&gt; !prevMode);&nbsp; };&nbsp; return (&nbsp; &nbsp; &lt;ThemeContext.Provider value={{ isLightMode, toggleLightMode }}&gt;&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; &lt;/ThemeContext.Provider&gt;&nbsp; );};export const useThemeContext = () =&gt; useContext(ThemeContext);[/CODE]me toggle button eka [CODE=jsx]import { useThemeContext } from &quot;../../context/Themecontext&quot;;const Lightmodetoggle = () =&gt; {&nbsp; const { isLightMode, toggleLightMode } = useThemeContext();&nbsp; return (&nbsp; &nbsp; &lt;&gt;&nbsp; &nbsp; &nbsp; &lt;button&nbsp; &nbsp; &nbsp; &nbsp; className=&quot;&quot;&nbsp; &nbsp; &nbsp; &nbsp; onClick={toggleLightMode}&nbsp; &nbsp; &nbsp; &nbsp; aria-label=&quot;Turn on the lights&quot;&nbsp; &nbsp; &nbsp; &nbsp; title={isLightMode ? &quot;Turn off the lights&quot; : &quot;Turn on the lights&quot;}&nbsp; &nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; &nbsp; {isLightMode ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;svg&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width=&quot;20&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height=&quot;20&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; viewBox=&quot;0 0 24 24&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill=&quot;none&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xmlns=&quot;http://www.w3.org/2000/svg&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;path&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d=&quot;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&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill=&quot;#fff&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/svg&gt;&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;svg&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width=&quot;20&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height=&quot;20&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; viewBox=&quot;0 0 24 24&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill=&quot;none&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xmlns=&quot;http://www.w3.org/2000/svg&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;path&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d=&quot;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&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill=&quot;#fff&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;path&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill-rule=&quot;evenodd&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clip-rule=&quot;evenodd&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d=&quot;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&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill=&quot;#fff&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/svg&gt;&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &lt;/button&gt;&nbsp; &nbsp; &lt;/&gt;&nbsp; );};export default Lightmodetoggle;[/CODE]</blockquote>

[QUOTE="Psiko, post: 29535509, member: 583290"] 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 [CODE=jsx]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); [/CODE] me toggle button eka [CODE=jsx]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; [/CODE] [/QUOTE]

Verification

Awruddata maasa keeyada?

Search

Latest ads

Reply to thread