I've created a script to change the color scheme of a site I'm recreating in ASP.NET Core. It is more than just a CSS file; it includes jQuery UI CSS created using ThemeRoller. The 13 buttons on the _Layout.cshtml file are connected to click functions in the script. The functions all trigger a "switch style" function that takes in the name of the theme and applies the appropriate stylesheets. I gave the classes names so that the jQuery could identify them - i.e. "BaseStyle" for the CSS I wrote "UI, UiStructure, and UiTheme" for the jQuery UI themes I created using their ThemeRoller. Nothing happens when I click any of the theme buttons. The tutorials I've read put all of the stylesheet themes between the <head> tags. I think this is inefficient; that's why I gave the theme links classes. Is there anything better I can do? The "Reverse" checkbox is supposed to add "Reversed" to the theme name, making the background dark and the text light.
Here is my JavaScript:
$(document).ready(function () {
function switch_style(theme) {
switch (theme) {
case "Red":
if ($('#CB_Reverse').checked = false) {$('.themeBase').href = "~/lib/Themes/" + theme + "/" + theme + ".css";$('.UiTheme').href = "~/lib/Themes/" + theme + "/jquery-ui.theme.css";$('.UiStructure').href = "~/lib/Themes/" + theme + "/jquery-ui.structure.css";$('.Ui').href = "~/lib/Themes/" + theme + "/jquery-ui.css";$('.UiThemeMin').href = "~/lib/Themes/" + theme + "/jquery-ui.theme.min.css";$('.UiStructureMin').href = "~/lib/Themes/" + theme + "/jquery-ui.structure.min.css";$('.UiMin').href = "~/lib/Themes/" + theme + "/jquery-ui.min.css";
}
else {$('.themeBase').href = "~/lib/Themes/" + theme + " Reversed/" + theme + " Reversed.css";$('.UiTheme').href = "~/lib/Themes/" + theme + " Reversed/jquery-ui.theme.css";$('.UiStructure').href = "~/lib/Themes/" + theme + " Reversed/jquery-ui.structure.css";$('.Ui').href = "~/lib/Themes/" + theme + " Reversed/jquery-ui.css";$('.UiThemeMin').href = "~/lib/Themes/" + theme + "/jquery-ui.theme.min.css";$('.UiStructureMin').href = "~/lib/Themes/" + theme + "/jquery-ui.structure.min.css";$('.UiMin').href = "~/lib/Themes/" + theme + "/jquery-ui.min.css";
}
break;
//Other Color Cases...
}
}
function BTN_Red_Click(theme) {
switch_style(theme);
}
//12 Other Button Functions...
function CB_Reverse_Click() {
switch_style(theme + "Reversed");
}
});Here is part of the <head> and the themes dialog in my _Layout.cshtml:
<head><link rel="stylesheet" class="themeBase" href="~/lib/Themes/Blue/Blue.css" /><link rel="stylesheet" class="UiTheme" href="~/lib/Themes/Blue/jquery-ui.theme.min.css" /><link rel="stylesheet" class="UiStructure" href="~/lib/Themes/Blue/jquery-ui.structure.min.css" /><link rel="stylesheet" class="Ui" href="~/lib/Themes/Blue/jquery-ui.min.css" /></head><body><button type="button" class="Button" data-toggle="modal" data-target="#Themes">Themes</button><div class="modal fade" id="Themes" tabindex="-1" role="dialog" aria-labelledby="ThemeTitle" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><div class="container"><div class="row"><div class="col-md-11"><h4 class="modal-title" id="ThemeTitle">Themes</h4></div><div class="col-md-1"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div></div></div></div><div class="modal-body"><div class="btn-group" data-toggle="buttons"><label for="CB_Reverse" class="btn btn-default btn-lg btn-block"><input type="checkbox" id="CB_Reverse" name="reverse" autocomplete="off" />Reverse!</label></div><input type="button" id="BTN_Red" value="Red" class="btnRed themeBtn" onclick="BTN_Red_Click('Red')" /></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></body>