I'd like to add dark mode to my website with javascript. It works technically, but not the way I wanted it to. It only set the body color to black. But the challange is to set color to the "< div >" tags. Honestly I don't really know JavaScript, so I don't know how to do it.
Here is my code:
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
document.div.style.color = sessionStorage.getItem('cardcc');
function darker() {
if ( sessionStorage.getItem('bg') === 'rgb(241, 241, 241)') {
sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
sessionStorage.setItem('cc', '#fff');
sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
sessionStorage.setItem('cardcc', '#fff');
}
else if (sessionStorage.getItem('bg') == null || undefined) {
sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
sessionStorage.setItem('cc', '#000');
sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
sessionStorage.setItem('cardcc', '#fff');
}
else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {
sessionStorage.setItem('bg', 'rgb(241, 241, 241)');
sessionStorage.setItem('cc', '#000');
sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
sessionStorage.setItem('cardcc', '#fff');
}
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
document.div.style.color = sessionStorage.getItem('cardcc');
}
<html>
<head>
<style>
body {
background-color: #f1f1f1;
color: #000;
}
.card {
background-color: red;
color: black;
}
</style>
</head>
<body>
<div class="card">
<h5>Title</h5>
<p>Some text...</p>
<p>Another text..</p>
</div>
</body>
<script src="assets/js/darker.js"></script>
</html>
You could store your themes in an object and switch them during runtime using document.documentElement.style.setProperty()
Example:
const dark = {
'background-color': '#FFFFFF'
}
const light = {
'background-color': '#000000'
}
In your CSS (Note: to only style div's use body > div)
--background-color: #000000 // this is the default
body > div {
background-color: var(--background-color);
}
And finally if you need to switch the theme you can do:
function setTheme(a_oTheme) {
Object.keys(a_oTheme).forEach(k =>
document.documentElement.style.setProperty(`--${k}`, a_oTheme[k])
);
}
Related
if( localStorage.getItem("color") == "black" ) {
{
var element = document.getElementById("body");
element.classList.toggle("bdark");
}
{
var element = document.getElementById("theader");
element.classList.toggle("hdark");
}
{
var element = document.getElementById("sh");
element.classList.toggle("shh");
}
}
function myFunction() {
{
var element = document.getElementById("body");
element.classList.toggle("bdark");
}
{
var element = document.getElementById("theader");
element.classList.toggle("hdark");
}
{
var element = document.getElementById("sh");
element.classList.toggle("shh");
}
var hs = document.getElementById("hs");
var color;
if(localStorage.getItem("color") == "black") {
color = "black";
localStorage.setItem("color",color)
}
.bdark {
background-color: #333;
color: white;
}
.hdark {
background-color: black;
color: white;
}
.shh {
display: none;
}
.hs {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="body" class="light">
<p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>
<button id="button" onclick="myFunction()">Try it</button>
<div id="aaas">
<div id="sh" class="sh">☾</div>
<div id="hs" class="hs">☀</div>
</div>
</body>
</html>
i want this code to onclick toggle class and when i refresh the page those toggled class remain same as they were before reloading the page with localstorage. so can someone check what's wrong with this code. help me with something similar/alternative to this one. thanks for reading this.
Details:-
i want this code to work as (onclick class change + saved with cokies/localstorage/or anything) so whenever i refresh or reopen the page it would be same class as it was when i left. or some alternative code that works same.
I fixed your code
if( localStorage.getItem("color") == "black" ) {
{
let element = document.getElementsByTagName("body");
element.classList.toggle("bdark");
}
{
let element = document.getElementById("theader");
element.classList.toggle("hdark");
}
{
let element = document.getElementById("sh");
element.classList.toggle("shh");
}
}
function myFunction() {
{
let element = document.getElementsByTagName("body");
element.classList="bdark";
}
{
let element = document.getElementById("theader");
element.classList="hdark";
}
{
let element = document.getElementById("sh");
element.classList="shh";
}
{
let hs = document.getElementById("hs");
}
let color;
if(localStorage.getItem("color") != "black") {
color = "black";
localStorage.setItem("color", color)
}
}
.bdark {
background-color: #333;
color: white;
}
.hdark {
background-color: black;
color: white;
}
.shh {
display: none;
}
.hs {
display: none;
}
<p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>
<button id="button" onclick="myFunction()">Try it</button>
<div id="aaas">
<div id="sh" class="sh">☾</div>
<div id="hs" class="hs">☀</div>
</div>
I have 3 containers where the first two of them have a drag and drop function, so that when I drop an element there, it changes that container color. This works correctly, but what I want to do is that when the 1st and 2nd container have a color, the 3rd one automatically updates to a new color. I am using Vuejs.
For instance: Container 1 has red color and container 2 has yellow color. The 3rd container would automatically update to an orange color. This would happen everytime I change the color of the containers.
This is my code:
HTML
<!-- the containers where I drop the elements -->
<div class="box-flex">
<div class="box" #dragover.prevent #drop="drop" id="box-1"></div>
<div class="box" #dragover.prevent #drop="drop2" id="box-2"></div>
<div class="box" id="box-3"></div>
</div>
<!-- the elements I want to drag -->
<div v-for="(flower, i) in flowers" :key="i">
<div v-if="flower_type == flower.type">
<p>{{ flower.type }}</p>
<p v-for="(color, j) in flower.colors" :key="j">
<span
:id="flower.type + '-' + color"
:draggable="true"
#dragstart="dragStart"
#dragover.stop
>{{ color }}</span>
</p>
</div>
</div>
SCRIPT
data() {
return {
//flowers
flowers: [
{
type: "Cosmos",
colors: ["red", "yellow", "orange", "black", "pink", "white"]
},
],
};
},
methods: {
dragStart(e) {
let target = e.target;
e.dataTransfer.setData("color_id", target.id);
e.dataTransfer.setData("box_el", target);
let box1 = document.getElementById("box-1");
},
//first container drop
drop(e) {
let colorId = e.dataTransfer.getData("color_id"); //id of the color (red, yellow...)
let colorEl = e.dataTransfer.getData("box_el"); //element of the color
let box1 = document.getElementById("box-1");
box1.classList.add(colorId);
if (box1.classList.length > 2) { //I only want one color-class in the container
box1.classList.remove(box1.classList[1]);
}
},
//second container drop
drop2(e) {
let colorId = e.dataTransfer.getData("color_id"); //id of the color (red, yellow...)
let colorEl = e.dataTransfer.getData("box_el"); //element of the color
let box2 = document.getElementById("box-2");
box2.classList.add(colorId);
if (box2.classList.length > 2) {
box2.classList.remove(box2.classList[1]);
}
}
},
computed: {
evFlower() {
let box1 = document.getElementById("box-1");
let box2 = document.getElementById("box-2");
let box3 = document.getElementById("box-3");
if (
box1.classList.contains("Cosmos-red") &&
box2.classList.contains("Cosmos-yellow")
) {
box3.classList.add("Cosmos-orange");
}
}
}
CSS
.box-flex {
height: 50%;
display: flex;
justify-content: space-around;
align-items: center;
}
.box,
.box-1,
.box-2 {
width: 20%;
height: 20%;
border: 2px solid black;
}
.Cosmos-red {
background: red;
}
.Cosmos-yellow {
background: yellow;
}
.Cosmos-orange {
background: orange;
}
I've tried with a watcher but haven't found a way to 'watch' on DOM changes.
Thanks in advance!!
I think you are over complicating things, it is better to avoid DOM manipulations unless it is strictly needed.
It is a better solution to add inline styles, or switch classes on the vue templates with reactive data instead of adding and removing classes directly on the DOM as you'd do with the old Jquery.
This is reactive, easy and cheap to control:
<div :style="{ background: box1}"></div>
I've rewrited your code following this rules:
<template>
<div>
<div class="box-flex">
<div class="box" #dragover.prevent #drop="drop" id="box-1" :style="{ background: box1}"></div>
<div class="box" #dragover.prevent #drop="drop2" id="box-2" :style="{ background: box2}"></div>
<div class="box" :style="{ background: box3}"></div>
</div>
<!-- the elements I want to drag -->
<div v-for="(flower, i) in flowers" :key="i">
<div>
<p>{{ flower.type }}</p>
<p v-for="(color, j) in flower.colors" :key="j">
<span
:id="color"
:draggable="true"
#dragstart="dragStart"
#dragover.stop
>{{ color }}</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Intro',
components: {
},
data() {
return {
//flowers
flowers: [
{
type: "Cosmos",
colors: ["red", "yellow", "orange", "black", "pink", "white"]
},
],
box1: 'white',
box2: 'white',
box3: 'white',
};
},
methods: {
dragStart(e) {
let target = e.target;
e.dataTransfer.setData("color_id", target.id);
e.dataTransfer.setData("box_el", target);
},
//first container drop
drop(e) {
this.box1 = e.dataTransfer.getData("color_id");
if ( this.box1 == 'red' && this.box2 == 'yellow') {
this.box3 = 'orange'
}
else {
this.box3 = 'white'
}
},
//second container drop
drop2(e) {
this.box2 = e.dataTransfer.getData("color_id");
if ( this.box1 == 'red' && this.box2 == 'yellow') {
this.box3 = 'orange'
}
else {
this.box3 = 'white'
}
}
},
};
</script>
<style>
.box-flex {
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.box,
.box-1,
.box-2 {
width: 20px;
height: 20px;
border: 2px solid black;
}
.Cosmos-red {
background: red;
}
.Cosmos-yellow {
background: yellow;
}
.Cosmos-orange {
background: orange;
}
</style>
I have to add red background Colour for false, and green background for true based on the result column in a table, I am using elementUI + paginations of data-tables + vuejs. I am try to add in the column declarations by using style binding on result column thanks in advance
My template code
<template slot="header" slot-scope="table" :style = "customRowBackground(table.row)">
<template slot-scope="table">{{ table.row.launch_success }}</template>
</el-table-column>
my customRowBackgrond() function
customRowBackgrond({row}){
if (row.launch_success == true) {
return {'backgrondColor': 'rgb(252, 230, 190)'};
}
else if (row.launch_success == false) {
return { backgrondColor: 'rgb(252, 230, 190)'};
}
else {
return {backgrondColor: 'rgb(252, 230, 190)'};
}
},
I need to get the true value to green and false to red to my whole table.... Thanks in advance.
Try this
:style = "table.row.launch_success == true ? '{"backgrondColor": "rgb(252, 230, 190)"}' : table.row.launch_success == false ? '{"backgrondColor": "rgb(252, 230, 190)"}' : '{"backgrondColor': "rgb(252, 230, 190)"}'
Or
In template
<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">
Update method as below
methods: {
tableRowClassName({row, rowIndex}) {
if (row.launch_success == true) {
return 'success-row';
} else if (row.launch_success == false) {
return 'warning-row';
}
return 'other-row';
}
},
Update CSS as below
.el-table .warning-row {
background: 'rgb(252, 230, 190)';
}
.el-table .success-row {
background: 'rgb(252, 230, 190)';
}
.el-table .other-row {
background: 'rgb(252, 230, 190)';
}
It needs some class bindings or style binding in vueJs.https://v2.vuejs.org/v2/guide/class-and-style.html
I need to minimize the following class binding logic.
My Template Code:
<span :class="[{'row_success':table.row.launch_success},{'row_fail':!table.row.launch_success},{'row_schedule':table.row.launch_success == null}]">
<span class="cell_text_wrapper">{{ table.row.flight_number }}</span>
</span>
My Css Code
.el-table td .row_success {
color: #1caa14;
background-color: #defdde;
padding: 0;
display: table;
}
.el-table td .row_fail {
color: #f83364;
background-color: #fdecec;
padding: 0;
display: table;
}
.el-table td .row_schedule {
color: #0e0e83;
background-color: #d2f8f7;
padding: 0;
display: table;
}
Needs some other css class modifications which are creating dynamically at run time.
So I created some custom color classes for my sliders and it works well...this is how it looks:
All I simply did was created the following classes:
.red .noUi-connect {
background: #c0392b;
}
.orange .noUi-connect {
background: #2980b9;
}
.green .noUi-connect {
background: #27ae60;
}
And applied them to my divs like so:
<div id="slider-speed" class="slider red"></div>
<div id="slider-speed" class="slider orange"></div>
<div id="slider-speed" class="slider green"></div>
However, what I want to do is whenever the user moves the slider left or right, the color of the slider changes based on the value.
So 1 - 3 = red, 4 - 6 = orange, 7 - 10 = green.
How do I do that?
You could try using the event callback for "update" like this:
slider.noUiSlider.on('update', function(values, handle){
updateColorClass(document.getElementById('slider-speed'), values[handle]);
});
function updateColorClass(element, value) {
var color;
if (value < 4) {
color = 'red';
} else if (value < 7) {
color = 'orange';
} else {
color = 'green';
}
element.classList.remove("red", "orange", "green");
element.classList.add(color);
}
So say I have this in my body:
<body>
<h1>Hello world!</h1>
<h2 style="color: Blue;">This is my webpage</h2>
<a style="color: Blue;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>
I want to create function changeElem() such that it will change the content that is blue to black. So this is the result I want to get after using this function:
<h1>Hello world!</h1>
<h2 style="color: Black;">This is my webpage</h2>
<a style="color: Black;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
How can this be done?
You're much better off doing this with CSS, not inline styles.
<head>
<style>
/* By default, elements with class="some-class" are blue */
.some-class {
color: blue;
}
/* But if body has the class "updated", they turn black */
body.updated .some-class {
color: black;
}
</style>
<h1>Hello world!</h1>
<h2 class="some-class">This is my webpage</h2>
<a class="some-class" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>
...where changeElem is:
function changeElem() {
document.body.className += " updated";
}
Live Example | Live Source
If you're dead set on using inline styles, which is not a good idea, you can still do it easily enough:
function changeElem() {
var div, colorValue, list, index, element;
// Figure out what this browser returns for `color: Blue`
// (it might be "Blue", "blue", "rgb(0, 0, 255)",
// "rgba(0, 0, 255, 0)", "#0000FF", "#0000ff",
// or possibly others)
div = document.createElement('div');
document.body.appendChild(div);
div.innerHTML = '<span style="color: Blue;"></span>';
colorValue = div.firstChild.style.color;
document.body.removeChild(div);
// Get list of all elements that have any `style` attribute at all
list = document.querySelectorAll('[style]');
// Loop through looking for our target color
for (index = 0; index < list.length; ++index) {
element = list[index];
if (element.style.color === colorValue) {
element.style.color = "black";
}
}
}
Live Example | Live Source
I suggest working with Class Selectors.
<body onLoad="getElem();">
<h1>Hello world!</h1>
<h2 class="blue">This is my webpage</h2>
<a class="blue">Welcome!</a><br>
<h3>Goodbye</h3>
</body>
Then you could easily select all Elements with a common class via document.querySelectorAll():
document.querySelectorAll(".blue")
for all Elements with the class blue (e.g.)
Then you could set the class of each element simply to black.
function getElem(){
var items = document.body.getElementsByTagName("*");
for (var i = items.length; i--;) {
style = window.getComputedStyle(items[i].innerHTML);
color = style.getPropertyValue('color');
if(color =="rgb(0,0,255)"){
items[i].style.color="black";
}
}
}