Jump to content

dark/light mode


Arash.Ranjbar
 Share

Recommended Posts

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 to comment
Share on other sites

  • 2 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important 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 Privacy Policy.