Zum Inhalt springen

dark/light mode


Arash.Ranjbar
 Teilen

Empfohlene Beiträge

hi

I use these codes for make a dark-light mode:

js:

const toggleSwitch = document.querySelector('.daa input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('dark-mode', currentTheme);
  
    if (currentTheme === 'night') {
        toggleSwitch.checked = true;
    }
}
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('dark-mode', 'night');
        localStorage.setItem('theme', 'night');
    }
    else {        document.documentElement.setAttribute('dark-mode', 'light');
          localStorage.setItem('theme', 'light');
    }    
}
toggleSwitch.addEventListener('change', switchTheme, false);

html:

        <label class="daa showguest" for="checkbox">
	<input class="l" type="checkbox"></label>
        <script>

css:

.1 {
	font-size: 1em;
	line-height: 1.5;
	display: block;
	margin-bottom: 1.5em;
}
html[dir="rtl"] .daa {
	padding: 1.5em 0 0 0;
	text-align: center;	
    direction:ltr;
    position:relative;
    margin-left:-21px;
    top:-5px;
}
html[dir="ltr"] .daa {
	padding: 1.5em 0 0 0;
	text-align: center;	
    direction:ltr;
    position:relative;
    margin-right:-21px;
    top:-5px;
}
html[dir="ltr"] .showguest {
  margin-right: 1px;
}
html[dir="rtl"] .showguest {
  margin-left: -7px;
}
.l {
	background-color: rgba(0, 0, 0, 0.11);
	border-radius: 0.75em;
	box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
	color: #f5f8f9;
	display: inline-flex;
	align-items: center;
	margin: auto;
	padding: 0.15em;
	width: 3em;
	height: 1.5em;
	transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.l:before, .l:after {
	content: "";
	display: block;
		box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.l:before {
	background-color: #fdea7b;
	border-radius: 50%;
	width: 1.2em;
	height: 1.2em;
	transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
	z-index: 1;
}
.l:after {
	background:
		linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
	background-repeat: no-repeat;
	border: 0.25em solid transparent;
	border-left: 0.4em solid #d8d8d8;
	border-right: 0 solid transparent;
	transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
	transform: translateX(-22.5%);
	transform-origin: 25% 50%;
	width: 1.2em;
	height: 1em;
}
/* Checked */
.l:checked {
   background-color: rgb(100, 101, 104);
   box-shadow: 0.125em 0.125em 0 0.125em rgb(100, 101, 104) inset;
}
.l:checked:before {
	background-color: currentColor;
	transform: translateX(125%)
}
.l:checked:after {
	border-left-color: currentColor;
	transform: translateX(-2.5%) rotateY(180deg);
}
/* Other States */
.l:focus {
	/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
	outline: 0;
}

in css I use this structure:

/*for dark*/
html[dark-mode="night"] body {
background: red;
}
/*for light*/
body {
background: #fff;
}

when I put HTML code in userbar template everything good works but when I wanna put this code in mobilenavbar or mobilenavigation it doesn't work and in search console I got below error:

Uncaught SyntaxError: redeclaration of const toggleSwitch

    <anonymous> http://localhost/dev/:1042
Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 2 Wochen später...
  • V0RT3X hat Thema gesperrt
Gast
Dieses Thema wurde nun für weitere Antworten gesperrt.
 Teilen

  • Wer ist Online   0 Benutzer

    • Keine registrierten Benutzer online.
×
×
  • Neu erstellen...

Wichtige Information

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.