How to create light and dark mode

Ask anything you want to know
Post Reply
charmingdc
Posts: 4
Joined: Mon Mar 27, 2023 9:02 pm

How to create light and dark mode

Post by charmingdc »

please how do I create a light and dark more options in my site
obaydulbc
Posts: 29
Joined: Tue Mar 07, 2023 1:37 pm

Re: How to create light and dark mode

Post by obaydulbc »

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>Dark/Light Mode Toggle</title>
	<style>
		body {
			background-color: white;
			color: black;
		}
		.dark-mode {
			background-color: black;
			color: white;
		}
	</style>
</head>
<body>
	<h1>Dark/Light Mode Toggle</h1>
	<p>Click the button to toggle between dark and light mode:</p>
	<button onclick="toggleDarkMode()">Toggle dark mode</button>

	<script>
		function toggleDarkMode() {
			var element = document.body;
			element.classList.toggle("dark-mode");
		}
	</script>
</body>
</html>
Spidersilk
Posts: 4
Joined: Sun Apr 02, 2023 11:55 pm

Re: How to create light and dark mode

Post by Spidersilk »

charmingdc wrote: Mon Mar 27, 2023 9:08 pm please how do I create a light and dark more options in my site

Create 2 file: style.css and style.dark_mode.css
file style.css any your stylesheet, style.dark_mode.css any style dark with .class like style.css
html for select theme:

Code: Select all

<select id="select_theme" onchange="select_theme()"><option value="style.css">light</option><option value="style.dark_mode.css">dark</option></select>
and function javascript for select theme:

Code: Select all

function select_theme() {
      var theme = document.getElementById("select_theme").value; // Get theme
      const d = new Date(); 
      d.setTime(d.getTime() + (30*24*60*60*1000));
      let expires = "expires="+ d.toUTCString();
      document.cookie = "theme=" + theme + ";" + expires + ";path=/"; // set cookie for user select theme
      window.location='/'; // redirect home if user select theme
    }
use a theme if get cookie theme:

Code: Select all

#%IFNOT(%COOKIE(theme)%)@THEN(<link rel="stylesheet" href="style.css" type="text/css" />)@ELSE(<link rel="stylesheet" href="%COOKIE(name)%.css" type="text/css" />)%#
Javascript check user theme screen, if darkmode screen and not get cookie theme, auto change theme for user:

Code: Select all

    /* Function get cookie by w3schools.com */
    function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
// check user theme and use if darkmode screen
if (!getCookie('theme') && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
     document.cookie = "theme=style.dark_mode.css;2592000000;path=/"; // set cookie theme darkmod
     window.location='/'; // redirect home
     console.log( "Auto change theme dark!" ); // press F12 button for view console.log
    }
    
Code by me. No demo.

If you need an demo, check out this page: https://iui.sacmau.mobi/ (Note: It's not johncms)
I do the same but with twig code instead of wapka code
For anyone wondering
Image
Starchat
Posts: 1
Joined: Wed Apr 05, 2023 10:02 pm

Re: How to create light and dark mode

Post by Starchat »

Please message me lard2007 on extrapop bro
charmingdc
Posts: 4
Joined: Mon Mar 27, 2023 9:02 pm

Re: How to create light and dark mode

Post by charmingdc »

Please bro, will I put the codes in the header page?
charmingdc
Posts: 4
Joined: Mon Mar 27, 2023 9:02 pm

Re: How to create light and dark mode

Post by charmingdc »

And also,I tried it but not working, can you help me to do it,if I give you my wapka login
Post Reply