-1

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.

JordanGW
  • 174
  • 1
  • 12
  • 2
    i think you are in the right direction. you have to implement it. that's all. The CSS frameworks and CSS pre-processor libraries are actually doing them as you tool it down. – Keerthivasan Mar 28 '19 at 09:11
  • Just swap the stylesheet? Or add a different class/ID to the `` element, and have each of your different styles use that in their selectors, so `.style1 .someClass` can be red `.style2 .someClass` can be blue. – VLAZ Mar 28 '19 at 09:11
  • It's literally just swapping the style sheets. Not really looking to do any dom manipulation. What I'm trying to avoid is having to do large amounts of work converting old css files into less files with variables etc. I'm hoping for a simpler solution – JordanGW Mar 28 '19 at 09:17
  • 1
    So, [like this](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page)? – VLAZ Mar 28 '19 at 09:26
  • @VLAZ yes that is a solution but one I've already come across. Do you thing its a bit far fetched hoping there is another solution for changing website colours other than having multiple style sheets? – JordanGW Mar 28 '19 at 09:31
  • @JordanGW your question third point from the update makes very little sense. You don't want to change the stylesheet but you want to change the colours? The colours are *in* the stylesheet. You also don't want to do DOM manipulation, so you can't even have a single stylesheet with different selectors for each "theme". The only possible solution I can think of here is to have a *separate build* for each website and you apply the specific branding at build time. Then each subdomain will route to a different deployment. But that's hardly "on the fly". The requirements disallow "on the fly". – VLAZ Mar 28 '19 at 09:48
  • @VLAZ I do want to change the style sheet but I'm trying not to just swap the style sheet for a totally different one. – JordanGW Mar 28 '19 at 09:55
  • 1
    @JordanGW you want to swap the stylesheet but without swapping the stylesheet? I hope you can see that this doesn't make sense. If you swap the stylesheet, then *by definition* it's a different one. If you want to do a "partial swap" then you will have more than one stylesheet included already and still swap *one* of those to a *different* one. That's what swapping does. – VLAZ Mar 28 '19 at 09:58
  • @VLAZ Ok you mustn't be fully understanding what I'm saying. I'd like to _modify_ the style sheet before render rather than having multiple style sheet that require maintenance that I would have to switch between. I'm trying to avoid having hundreds of style sheets and instead find a solution where I can just _modify_ the one style sheet on load with updated colour using JS or something. If that is not possible just say. – JordanGW Mar 28 '19 at 10:01
  • @JordanGW "*I'd like to modify the style sheet before render rather than having multiple style sheet that require maintenance*" I'd argue that "modifying" before render will be the harder to maintain solution. And you can very easily produce multiple themese with Sass - you'd have a single core stylesheet and just change few colours here and there for each different theme. You can use variables in your sheets so, you could literally just have a core sheet and each other will set what the variables are and do `@import core` to use those variables. But having that as "on-the-fly" is overkill. – VLAZ Mar 28 '19 at 10:07
  • So, you produce different themes *once* and then swap the preadsheet at runtime based on whatever you want: user preferences, subdomain, both, etc. When developing the application, you still have a single spreadsheet to maintain - Sass handles the generation of many of them. [Here is an article on how to make a branding with Sass](https://webdesign.tutsplus.com/tutorials/how-to-use-sass-to-build-one-project-with-multiple-themes--cms-22104). – VLAZ Mar 28 '19 at 10:10
  • @VLAZ but what If I had over 600 "modifying" less files and I wanted to add another variable? Would I not have to go through all 600 less files and add this new variable? – JordanGW Mar 28 '19 at 10:40
  • So, your preference is to have something that builds *over 600* different variations of a stylesheet *on the fly*? And if you introduce a new variable, then you'd have your CSS-on-the-fly-building contraption have to account for that as well. Presumably, without structuring your CSS in a way that makes it trivial to modify. I don't believe such a system exists. And I really don't know why you'd need so many variables *and* add more on a regular basis. – VLAZ Mar 28 '19 at 11:15
  • @VLAZ You do a lot of assuming based on my comments. No I would not like to build 600 different variations of a stylesheet on the fly. And I'd like to avoid doing so "not on the fly" as you suggest. I may have a bunch colour settings (brands) saved to a database that I will allow the user to chose and then some how implement those chosen colours into dedicated variable slots in a css/less file. Maybe I need to inject some style into the parent view to override "theme" classes or use less.js to compile less files that are generated when the user selects the colour settings. – JordanGW Mar 28 '19 at 11:25
  • "*No I would not like to build 600 different variations of a stylesheet on the fly*" then why did you mention the over 600 figure? That's not an assumption I made, I literally used the information you gave me. Every new comment from you is a new requirement for this system. I am not sure if either of us understands what *should* be happening. You should probably sit down and workout everything that needs to happen and post a clearer question. – VLAZ Mar 28 '19 at 11:33
  • @VLAZ Yes my 600 figure was in response to your suggestion. It would make no sense to do as you suggested if I had over 600 brands that required their own less file. So in my response I was saying that your suggestion would cause more unwanted maintenance and thus denouncing the idea of having 600 style sheets. The original question asked if you could change the colours of the site without using the obvious methods. The requirement's are irrelevant at this point as they have nothing to do with the question. – JordanGW Mar 28 '19 at 11:39
  • I'm asking for other ideas on how to switch colours on a website not how to solve this complex issue that I can ultimately solve myself along with the answer to this question. – JordanGW Mar 28 '19 at 11:43
  • "*The requirement's are irrelevant*" and then you say "*this complex issue*"? The *requirements* are what is making it complex. Most of which you haven't specified, so when I attempt to suggest something working within what you *have* stated, you spring a new requirement on me. Moreover, I'm not convinced this is as complex as you try to make it out to be. But I really can't suggest anything because another requirement (that is irrelevant...) will suddenly spring up. Lay down *clearly* what you need and why and you might get a better answer. – VLAZ Mar 28 '19 at 12:01
  • Ok - it's clear you're unable to answer the question above so we'll leave it here. My questions is simple and it requires simple answers. I'm going to post a solution that I have come up with that I'd be grateful if you could add your input to if you're able to point me in the right direction – JordanGW Mar 28 '19 at 12:10
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190836/discussion-between-jordangw-and-vlaz). – JordanGW Mar 28 '19 at 12:24

2 Answers2

0

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);
}
JordanGW
  • 174
  • 1
  • 12
-2

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);
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345