Page 1 of 1
How to create light and dark mode
Posted: Mon Mar 27, 2023 9:08 pm
by charmingdc
please how do I create a light and dark more options in my site
Re: How to create light and dark mode
Posted: Tue Mar 28, 2023 11:09 am
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>
Re: How to create light and dark mode
Posted: Mon Apr 03, 2023 11:27 pm
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
Re: How to create light and dark mode
Posted: Thu Apr 06, 2023 1:48 pm
by Starchat
Please message me lard2007 on extrapop bro
Re: How to create light and dark mode
Posted: Tue Apr 18, 2023 5:57 am
by charmingdc
Please bro, will I put the codes in the header page?
Re: How to create light and dark mode
Posted: Tue Apr 18, 2023 7:22 am
by charmingdc
And also,I tried it but not working, can you help me to do it,if I give you my wapka login