We Keep Coding

changing the theme of a website from server

I'm designing a website with react, and it's requested that it has an infinite number of themes.So I know how to set a few themes in the CSS or SCSS files and then switch the classes to get the themes whenever wanted. But my problem here is , now I have to get a palette of colors from an API. Now I don't know how I can assign these colors which I fetch in the js file, to a CSS file, since that's where I need to define the classes.

If you're trying to create themes, one way to do this would be to use CSS variables. Set each of your colored elements to use var(--some-variable) and then define it in your JS using document.documentElement.style.setProperty(name, value) after you fetch it from your API. This is roughly equivalent to using the :root{ } rule in CSS. In fact, you could use :root to set a default theme and then overwrite it in your JS after the fact.
In this snippet, I dynamically change the color of the <p> element from red to cyan after the window loads using this exact method.
window.onload=function(){
document.documentElement.style.setProperty("--myColor", "#0CC");
};
:root{
--myColor: #f00;
}
p
{
color: var(--myColor);
}
<p>Hello</p>

Is there a way to change the colour of your website on the fly?

I'm trying to add branding to a web application based on a user defined setting or sub domain. This means changing the colours throughout the website when the user accesses the site using their sub domain or login.
Are there any JavaScript libraries out there or clever ways you can achieve this using Less/Sass.
I've already discovered the more obvious solution online of having multiple style sheets or having less files that import the main styles and override the main variables etc.
I'm hoping to find some sort of JavaScript library that can change colours on the fly or replace colours in a css file before render. Or maybe there are some cool css tricks out there that can help?
Any Ideas/solutions you may have will be a great help!
Edits
I'm not really looking to do a great deal of dom manipulation. i.e. changing classes on multiple elements etc. It's just really swapping colours or being able to manipulate style sheets before the pages are rendered.
I've got the sub domain / user setting side covered so its only the changing of styles etc that this question requires answers for.
I accept that questions similar to this have been asked before but mine is different. I'm trying to find any solutions other than just swapping a style sheet and I'm only really looking to change colours of the website.

This is a solution that I have come up with it works but it may not be the best way to do it.
I think the performance implications may out weigh the flexibility. I may be able to do something using cache to help.
It requires Less.js:
http://lesscss.org/usage/#using-less-in-the-browser
function changeTheme()
{
// get via api
var brand = {
'#primary' : "#000F46",
'#secondary' : "#CD3331",
'#text' : "#F2DA00"
};
less.modifyVars(brand);
}

try (js + css)
let subdomain = window.location.host.split('.')[0];
document.body.classList.add(subdomain);
console.log('subdomain:', subdomain);
/* COOMMON styles */
.myDiv {
padding: 20px;
background: #eee;
}
/* SUBDOMAINs styles */
body.stacksnippets .myDiv {
color:red;
}
body.othersubdomain .myDiv {
color:blue;
}
<div class="myDiv">Some value</div>
After question update
You can add different stylesheet depends on subdomain to html header as follows
let subdomain = window.location.host.split('.')[0];
let url = `https://example.com/pathtostyle/${subdomain}/yourstyle.css`
document.head.innerHTML +=
`'<link rel="stylesheet" type="text/css" href="${url}">'`;
console.log(url);

How to hide and retrieve a URL in CSS with Javascript

In CSS, I want to be able to specify a background image for a given selector without it actually being downloaded or rendered. I then want to be able to read the image URL with javascript, modify it in js, and then apply the modified URL to the selector for real so it will actually download and display. (I suppose that last part will have to be done with jQuery directly changing styles on each element, but that is not what this question is about.) This is part of some devious thing I'm trying to make really easy responsive images.
I have tried:
.sneaky {
background: url("youcantseemeyet.jpg");
background-image: url("blank.jpg");
}
But I can't find a way for javascript to know about the original background property.
Also tried:
.sneaky:after {
background: url("youcantseemeyet.jpg");
}
But I don't think javascript can see pseudo-elements.
Also tried:
.sneaky {
x-background: url("youcantseemeyet.jpg");
}
and:
.sneaky {
background: x-url("youcantseemeyet.jpg");
}
But I think javascript just tosses custom properties/values out the window.
How do CSS Polyfills work? Because they allow you to use CSS properties and values that would normally be invalid in a browser, so how does javascript access the CSS?
Another idea: I don't suppose there is a way to pre-empt the CSS with javascript, read the url() but block the file from downloading, is there?

I upvoted the question for your motivation to do this. Resposive Image resizing for Performance gain is a great way to reduce the bytes downloaded without affecting the quality of the page.
Here's one way of doing it: http://codepen.io/anon/pen/bNGgLZ
You can use html5 data attribute to store the url (so that the image is not downloaded initially) and then apply the image size based on the window size using javascript
<div class="sneaky" data-url="img_test.png">abcd</div>
<style>
.sneaky {
background: #000 url("transparent_placeholder.png");
color:#fff;
}
</style>
<script>
var el = document.querySelector(".sneaky");
alert(el.getAttribute("data-url"));
//Decide image size based on client window size and then assign backgroundImage property to download it from server
var size = "smaller";
el.backgroundImage = "url("+size+"_img_test.png)"
</script>

You can use the background position property to remove the image from rendering area and use window.getComputedStyle to retrieve the url
CSS
.sneaky {
background-image:url(youcantseemeyet.jpg);
background-position:-9999px -9999px;
}
Javascript
var url=window.getComputedStyle(document.querySelector('.sneaky'),null).backgroundImage
If you want to apply a second background images to .sneaky, better to include a sub div without padding/margin and apply second background to it

I figured out what to do. Kind of obvious now that I thought about it. Just hide the desired URL in a query string, like: url('/img/placeholder.gif?/path/to/real/image.jpg'). Ah, query strings, I love them.
UPDATE
A problem with using a query string is that every unique query string still results in a new HTTP request, even if it is ultimately returning the same resource. So, alternatively you can use a hash mark, like url('/img/placeholder.gif#/path/to/real/image.jpg'). When the image is requested, it will completely ignore the hash tag part, BUT you can still retrieve that information with javascript. It is just a bit tricky. Assuming you have no other URLs with hash tags in them (because why would you), you can simply retrieve a list of all selectors in all stylesheets which do use the hash tag part with the following script.
var selection = []
, sheets = document.styleSheets
, sheet, rule, i, j
for (i in sheets){
sheet = sheets[i]
for (j in sheet.cssRules) {
rule = sheet.cssRules[j]
if (/url\(.*#.*\)/.test(rule.cssText)) selection.push( rule.selectorText );
}
}

change colour of the default jstree search and error if not found in the node list

I am using jstree plugin to search for nodes. It works and when found the defaul color is very bright blueish color. How do you chanage the default color to something else.
Also, if the search text is not found, I would like to be able to display error to the users. Any ideas how I would do this?
function myFunction()
{
$(document).ready(function(){
var value=document.getElementById("search_field").value;
$("#search_tree").click(function () {
$("#tree").jstree("search",value)
});
});
}
This is my function that returns if it finds the text in the node list.
I would like to highligh the node with navy blue and also, move the window to that node (sometimes, three maybe too big and browser window needs to be adjusted to see the highlighted node). Very new to this type of scripting language and appreciate any input. Thanks.

To change the color you just need to edit line 45 of the theme CSS file:
.jstree-default a.jstree-search { color:aqua; }
Change aqua to whatever you like.

One further suggestion -- there are a bunch of different shades of blue used for various things in the style.css file for jsTree. My web page has a dark background, so the colors did not look good.
To simplify color changes, I created some variables at the top of the style.css file like this:
:root {
--jstree-hover-color: transparent;
--jstree-clicked-color: #4a4a4a;
--jstree-search-color: #E0CD1F;
}
Then I replaced the hard-coded colors in the CSS with these variables. That way if I don't like a color, I can change it in one place and refresh the page to see how it looks.
In your case, this is where you change the color for the search results (this is from jsTree v3.x). I commented out the existing color value so I would know what it was originally:
.jstree-default .jstree-search {
font-style: italic;
/*color: #8b0000;*/
color: var(--jstree-search-color);
font-weight: bold;

How to make custom TinyMCE button in Wordpress change icon on hover

I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC

I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:

There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }