what is the best way to incorporate something like this into my site? I've tried using plugins but I cant get it to work. Doesn't have to be fancy.
Does anyone have it or have used one in the past they can recommend? Otherwise, is there a way to code it using JavaScript?
You could just set a button to trigger a boolean for example and based on its values, change the background-color of the items you want to change into dark mode.
I personally used react context for this one, something like this (kinda perfect how they used theme as an example). You should study it.
It depends on your framework, but if you use Material-UI, it has this option.
you can change palette type from light to dark and vice versa to achieve your requirements. Take a look here.
But if you don't use any framework, you should make a css structure that has two classes, light and dark, have some properties like color and background color and etc., and when the toggle theme button clicked, you will change all your classes from light to dark for example, also you can use animation for the effects.
There is a multiple solutions for this problem, if you are using a specific framework I suggest you check if there a way to do it with it, if you are not using any framework you still have multiple solutions and I suggest to create for each element you want to change his properties to dark mode another CSS class for each one, and with JavaScript create a function (that can call by a button on the html) that change all the element you want to those external classes, and if you click this button once again is reverse the function and make all the classes be with the original CSS classes
Maybe this should help you to kickstart.
<html class="theme-light">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.theme-light {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}
.theme-dark {
--color-primary: #17ed90;
--color-secondary: #243133;
--color-accent: #12cdea;
--font-color: #ffffff;
}
.container {
display: flex;
width: 100%;
height: 100%;
background: var(--color-secondary);
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
color: var(--font-color);
}
.container button {
color: var(--font-color);
background: var(--color-primary);
padding: 10px 20px;
border: 0;
border-radius: 5px;
}
</style>
<script>
// Set a Theme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// Toggle From light and dark theme and Vice-Versa
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Onload Theme
(function() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
})();
</script>
<body>
<div class="container">
<h1>Theme Switcher</h1>
<button id="switch" onclick="toggleTheme()">Switch Theme</button>
</div>
</body>
</html>
This is a simple approach that I've used several times:
On the main html file, I load the default theme, for example the light one:
<link rel="stylesheet" href="/themes/light/theme.css" id="linkTheme" />
Then, on the theme changer button/menu option, I change the CSS file of the above link to load the corresponding one, something like:
const handleToggleTheme = (dark) => {
const lightUrl = "/themes/light/theme.css";
const darkUrl = "/themes/dark/theme.css";
if (dark) {
document.getElementById('linkTheme').setAttribute('href', darkUrl);
}
else {
document.getElementById('linkTheme').setAttribute('href', lightUrl);
}
}
I have an slider range, I want to change it's background-image property using javascript. I tried the following script
document.getElementById("range").style.backgroundImage = "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)";
But it does not work. Can someone please gives me some hints how can I do it?
Here is the example that I am working on
https://codepen.io/am2222/pen/KKwZBNW
thanks
P.S: I do not want to use jquery or other js libraries
Converting what was done here from jQuery to vanilla js: how to add CSS to -webkit-slider-runnable-track using Javascript
You come to this:
var newScript = document.createElement("style");
var content = document.createTextNode(`input[type="range"]::-webkit-slider-runnable-track {
background-image: linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)
}`);
newScript.appendChild(content);
document.getElementsByTagName("head")[0].appendChild(newScript);
You can just assign the current background color of your input slider in your css to a CSS variable and then use JavaScript to change that variable at anytime using the setProperty() method.
Check and run the following Code Snippet for a practical example of the above approach:
//assign the root element of your document to a variable
let root = document.documentElement;
//change the value of "--rangeColor" accordingly
root.style.setProperty('--rangeColor', "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)");
:root {
--rangeColor: #3071a9;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 100%;
cursor: pointer;
box-shadow: none;
background: var(--rangeColor);
border-radius: 1.3px;
border: 0.1px solid #010101;
}
<input id="range" type="range" />
I'm fairly new to the front-end web developing sphere and I have only studied HTML/CSS for ~ a month and a half and just about 1 week or less into JS. Since I want to practice what I learn from different websites I make my own to test my knowledge. I want to apologize in advance if I am asking too many questions, but there aren't any people I know that I can share coding issues with.
So I wanted to make ( just for testing ) a show/hide div which is activated when you click a button with JS. I can make it show, but I wanted to try to make it hide/show with an "if/else" function. I thought my code was right but it doesn't seem to work and I can't find a solution. I'll share with you my code ( the part of it which I have problems with actually) and will be very grateful if you can help me find a solution.
HTML :
<button type="button" onclick="slide()" >Click Me</button>
<div class="divtest" id="dropdown">
<span>If you are seeing this, then your JS worked! </span>
</div>
The CSS ( some things are pointless, I just added them in to test a bit ):
.divtest {
position: absolute;
left: 25%;
bottom: 30px;
width: 50%;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
box-shadow: 5px 5px 10px 3px;
text-align: center;
padding: 40px;
margin: 0 auto;
font-family: Cooper, sans-serif;
font-weight: 100;
transition: 1s ease;
background-color: limegreen;
color: black;
display: none;
}
button {
position: absolute;
width: 50%;
left: 25%;
bottom: 130px;
padding: 10px;
border: 2px solid black;
background-color: limegreen;
box-shadow: 5px 5px 50px 3px;
color: black;
cursor: pointer;
font-family: Cooper, sans-serif;
font-weight: 100;
}
the JS:
<script>
function slide() {
var drop = document.getElementById("dropdown"); // declares the element with id="dropdown" as a var
var dropSetting = drop.style.display; // declares that the variable "drop"'s display property is also a variable
if (dropSetting == "none") { // if the current value of display = "none" ( which it is as u can see in the CSS)
dropSetting == "block"; // Then set it to "block"
}
else { // if the value of display != none
dropSetting == "none"; // then set it to "none"
}
}
</script>
If you have any questions towards the code or anything, please feel free to ask as this is a separate feature contained in my test website so it is not connected in any way to other elements/attributes. I tried this code first in another way (without declaring dropSetting as a var, just adding in a few lines in the if/else function ) but it still did not work.I don't think JS recognizes the "style.display" as a property because Brackets doesn't highlight it. Thank you very much for your time in advance, and I hope that soon I too will be able to help some people out with what I know!
Also - a side question - What are your thoughts on treehouse? I have heard very good things about them and I'm thinking about signing up to further my knowledge.
Have a nice day!
For code compatibility, try to use methods, no shortcuts, for attributes use:
var drop = document.getElementById("dropdown");
drop.setAttribute('style', 'display: block');
var display = drop.getAttribute('display'); //Here is all the inline css, better do like below:
And it is much better for a clean and faster code, make all css clases you need:
.hide{
display:none;
}
JS:
drop.classList.add('hide');
drop.classList.remove('hide');
drop.classList.toggle('hide');
Never used Treehouse, but for myself the best teacher is a good IDE for web like Atom of VScode, google Chrome console (F12), and those are your books:
-http://www.w3schools.com/js/js_examples.asp
-https://developer.mozilla.org/en-US/docs/Web/API/Element
And this is your teacher for questions:
stackoverflow.com
You dont need anything more.
PD: Your logic is ok, just don't get used to code shortcuts, they may not work in all environments. (like elem.attribute instead of elem.getAttribute(''))
Your code doesn't works because you didn't assign display property to appropriate value (block / none). you have used comparison operator("==") instead of equals ("=").
if (dropSetting == "none") { // if the current value of display = "none" ( which it is as u can see in the CSS)
dropSetting = "block"; // Then set it to "block"
}
else { // if the value of display != none
dropSetting = "none"; // then set it to "none"
}
"==" operator in your code will just return true/false without changing display property of the div.
The problem is that your dropSetting is not an object, just string. When you change it (if change) you don't change the object (style in this case). Try something like this:
var drop = document.getElementById("dropdown"); //get reference to the object
drop.style.display = drop.style.display == 'none' ? 'block' : 'none'; //if(...){do something}else{do something else}
Another possibility:
var dropStyle = document.getElementById("dropdown").style;
if(dropStyle.display == 'none'){
dropStyle.display = 'block';
}else
dropStyle.display = 'none';