We Keep Coding

How can i replace text and background color in wordpress?

I want to change my website WordPress theme from light to dark mode. I want to use JS to make it much faster and easier. My question is, how can I replace the dark text color with white and the white background color with dark?
I can't add a tag to the classes, because I'm using elementor for WordPress.
I already have this code to change white backgrounds into dark ones, but how can I do that for fonts too?
(function () {
if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") {
console.log("Setting new background color...");
document.body.setAttribute("style", "background-color: #121212;");
}
})();

I don't recommend using * for global style changes other than the standard ones. However, if you really want to use this script. This takes precedence over inline styles and CSS styles containing the !important rule.
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
all[i].setAttribute('style', 'background-color: green !important; color: red !important;');
}
/* to demonstrate */
body {
background: white !important;
}
div {
color: blue;
}
<div style="color: blue;">i'm red? maybe?</div>

Format cell text color

This column formatter sets background color fine, but then I cannot see the text at all.
function truthFormatter(cell, formatterParams, onRendered) {
var cellValue = cell.getValue();
var cellElement = cell.getElement();
if (cellValue == "T") {
cellElement.style.backgroundColor = "#0000B3";
cellElement.style.color = "#FFFFFF";
}
else if (cellValue == "F") {
cellElement.style.backgroundColor = "#B30000";
cellElement.style.color = "#FFFFFF";
}
}
Chrome's style inspector on one of these cells suggests everything should be fine:
element.style {
width: 40px;
text-align: center;
background-color: rgb(0, 0, 179);
color: rgb(255, 255, 255);
height: 25px;
}
I get the same behavior in a stand-alone, test configuration---no other CSS applied.
Also, text in cells where the formatter should not apply is not visible---even though style inspection here also seems to be fine:
element.style {
width: 151px;
text-align: right;
color: rgb(0, 0, 0);
height: 32px;
}
Link to screenshot of table as rendered
Link to rendering without the formatter

Your line of :
cellElement.style.color = "#FFFFFF";
Should work just fine, i have run some tests and it works this end.
I would suggest using your browser inspector to see what CSS is overriding it.
You are also not returning the value of the cell in the formatter, so nothing will will be displayed inside the cell.
you need to add this line to the bottom of your formatter function
return cell.getValue();

Trouble assigning background color on scroll

I'm trying to change the design of my hamburger navigation as the user scrolls. I feel I have come semi close https://jsfiddle.net/g95kk7yh/6/
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 10) {
$(".navigation").css('background', 'rgba(255, 0, 0, 0.5)');
$(".navigation span").css('background', '#bdccd4');
} else {
$(".navigation").css('background', 'transparent');
$(".navigation span").css('background', '#fff');
}
});
});
Here is what I'm trying to achieve
The main problem I'm having is assigning the correct width and height of the red box without repositioning the navigation menu as a whole.
Also is it possible to only have these changes at 600px and under (as you can see this is when the hamburger menu shows).

I have used #potatopeelings post and have changed few lines and added.
.myClass {
margin-right: -25px;
width: 85px;
height: 85px;
background-color: rgba(255, 0, 0, 0.5);
}
Fiddle: https://jsfiddle.net/moj7z2b4/2/

This covers only the 2nd part of the question (thanks #webeno and #MarcusPorter for catching that). Refer to 7urkm3n's solution for an answer that covers both parts of the question.
Instead of changing the CSS properties in your script, just add / remove a class that has the properties you need.
...
if(scroll_pos > 10) {
$(".navigation").addClass('myClass')
} else {
$(".navigation").removeClass('myClass')
}
...
Then wrap your class CSS rules with
#media screen and (max-width: 600px) {
.myClass {
...
}
.myClass span {
...
}
}
so that these rules only apply on screen size < 600px
Fiddle - https://jsfiddle.net/moj7z2b4/

I have come across this problem as well, it was when I was creating the 'preloader' thing for my website. Anyway, the way I resolved my problem was to change background-color with backgroundColor. Make sure backgroundColor isn't in quotation marks, just type it in as you would do with a variable or a function, etc.
From jQuery API Docs:
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.
This code should work but I haven't tested it. I changed your .css('property', 'value') to .css({'property': 'value'});
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 10) {
$(".navigation").css({
backgroundColor: 'rgba(255, 0, 0, 0.5)'
});
$(".navigation span").css({
'background': '#bdccd4'
});
} else {
$(".navigation").css({
backgroundColor: 'transparent'
});
$(".navigation span").css({
'background': '#fff'
});
}
});
});

How can I change the background color of a Leaflet popup?

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It seems that basic background color css syntax won't cut it. Any advice?
Thanks,
-Scott

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.
.leaflet-popup-content-wrapper, .leaflet-popup.tip {
background-color: #000
}
Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage. Let me know if you have any more questions. Cheers.

Open leaflet.css and search for:
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: rgb(111, 51, 51);
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Then change the background value to whatever color you want.

const marker = new L.marker(lastPoint, {
icon: markerIconSnake
}).bindPopup(getDataInHtml(dataPopup), {
className: 'stylePopup'
})
If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.
.stylePopup .leaflet-popup-content-wrapper,
.stylePopup .leaflet-popup-tip {
background-color: #f4913b;
padding: 8px;
}
If you wanna know more head to the docs!

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function
const updatePopupCss = (color) => {
let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
let htmlPopupElement;
if (popupElement[0] instanceof HTMLElement) {
htmlPopupElement = popupElement[0] as HTMLElement;
htmlPopupElement.style.backgroundColor = color;
console.log(htmlPopupElement)
}
}
Then called it from the onOpen attribute like so
<Popup onOpen={() => {updatePopupCss("#036597")}} >

Add Alpha Channel to Background Color using jQuery / JavaScript

I have a jQuery function that adds an Alpha channel to a background-color when an event occur.
Here is my jsFiddle.
CSS
div { background-color: rgb(100,100,100); }
JavaScript
function addAlphaChannel() {
var oldBGColor = $('div').css('backgroundColor'); //rgb(100,100,100)
var newBGColor = oldBGColor.replace('rgb', 'rgba').replace(')', ',.8)'); //rgba(100,100,100,.8)
$('div').css({ backgroundColor: newBGColor });
}
This code works fine, however I wonder if there is a better way of adding/changing alpha channel?
Any help will be much appreciated.

If you want to change the rgba css property using javascript, you'll need to use the replace method, however, you can improve your code like this:
CSS
div { background-color: rgba(100, 100, 100, 1.0); }
JS
function addAlphaChannel() {
var oldBGColor = $('div').css('background-color'), //rgb(100,100,100),
newBGColor = oldBGColor.replace(/[^,]+(?=\))/, '0.8'); //rgba(100,100,100,.8);
$('div').css({ backgroundColor: newBGColor });
}
Hope this can help you.