Looking at it broadly, there are two main approaches to changing the style of a website while utilizing a single CSS source, which may or may not require multiple files.

1. Create various classes like .blueBorder, .redBorder, etc., and then with JavaScript, dynamically add and remove these classes on elements as needed.
2. Alternatively, define classes and use JavaScript once again to modify the properties of these classes.

It is feasible to combine both methods, although the rationale for doing so is unclear.

Here's a demonstration using the second approach in a JSFIDDLE.

Instead of relying on jQuery for simplicity in coding due to its powerful selectors, I opted for a pure JavaScript solution. The core of this solution was not authored by me but rather borrowed from the function getCSSRule created by Patrick Hunlock, available here. Although commented lines were removed in the Fiddle because of formatting constraints.

The provided function offers a reference to a CSS rule that can be easily manipulated. For instance:

// obtain a class rule (ensure valid return value in production code)
var r = getCSSRule('.primaryColor');
// modify its definition
r.style.backgroundColor = "#f00";

Upon execution of the above two lines, any element assigned the primaryColor class will have its background color changed to red (#f00), requiring no further action.

NOTE: The naming conventions within the stylesheet nodes might differ slightly from the CSS rules (backgroundColor vs. background-color). While w3Schools.com isn't favored by many here, it does offer a comprehensive style object reference that can be accessed here.

Below you'll find the provided code snippets:

CSS Styles:

<style type="text/css">

        #box1 {width: 50%; height: 200px; margin: 40px auto;  padding-top: 20px;}
        #box2 {width: 50%; height: 120px; margin: 20px auto 20px; padding: 10px;}
        .primaryColor {background-color: #f00;}
        .primaryBorder {border: 10px solid #000;}
        .secondaryColor {background-color: #ff0;}
        .secondaryBorder {border: 5px solid #fff;}
        .t {color: #f00;}
    </style>

HTML:

<div id="box1" class="primaryColor primaryBorder">
    <div id="box2" class="secondaryColor secondaryBorder"><p class="t">Theme Demonstration</p>
    </div>
</div>

<form style="margin: 40px auto; width:50%">
    <div role="radio" style="text-align:center" aria-checked="false">
    <input type="radio" name="theme" CHECKED value="theme1" onClick="setThemeOne()" >Theme 1
    <input type="radio" name="theme" value="theme2" onClick="setThemeTwo()" >Theme 2
    <input type="radio" name="theme" value="theme3" onClick="setThemeThree()">Theme 3
    </div>
</form>

Included JavaScript Functionality:

function getCSSRule(ruleName, deleteFlag) {
     ruleName=ruleName.toLowerCase();
     if (document.styleSheets) {
            for (var i=0; i<document.styleSheets.length; i++) {
                 var styleSheet=document.styleSheets[i];
                 var ii=0;
                 var cssRule=false;
                 do {
                        if (styleSheet.cssRules) {
                             cssRule = styleSheet.cssRules[ii];
                        } else {
                             cssRule = styleSheet.rules[ii];
                        }
                        if (cssRule)  {
                             if (cssRule.selectorText.toLowerCase()==ruleName) {
                                    if (deleteFlag=='delete') {
                                         if (styleSheet.cssRules) {
                                                styleSheet.deleteRule(ii);
                                         } else {
                                                styleSheet.removeRule(ii);
                                         }
                                         return true;
                                    } else {
                                         return cssRule;
                                    }
                             }
                        }
                        ii++;
                 } while (cssRule)
            }
     }
     return false;
}

function setThemeOne() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#f00";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #000;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#ff0";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #fff";
    r = getCSSRule('.t');
    r.style.color = "#000";
};


function setThemeTwo() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#ff0";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #ccc;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#f00";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #000";
    r = getCSSRule('.t');
    r.style.color = "#ccc";

};


function setThemeThree() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#ccc";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #000;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#000";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #fff";
    r = getCSSRule('.t');
    r.style.color = "#fff";

};

Compatibility Consideration:

This specific example has been tested in IE11 and the latest version of Chrome. A similar code structure that I deployed around 2011 supported browsers as far back as IE7 or IE8 without any reported issues. However, I did make a minor adjustment to the getCSSRule function for better compatibility with Chrome. The patch implemented:

if (cssRule){ 
   // [KT] 04/24/2012 - added condition to check for undefined selector for Chrome
if ((cssRule.selectorText != undefined) && cssRule.selectorText.toLowerCase()==ruleName){