Hey there, I want my users to be able to change the theme on the index page. Currently, I have implemented a code that works with a form select and submit button, but it's not very user-friendly. I would like it so that when a user selects option x, the corresponding CSS files for x are loaded, and if they choose option y, the styles for y are loaded without needing to click on a submit button. The current code is in the razor layout.csthml file.
var totalMessage = "";
if (IsPost)
{
var num = Request["number"];
if (num.AsInt() == 1)
{
totalMessage = "dark mode";
@Styles.Render("~/Styles/defaultdark.css")
@Styles.Render("~/Styles/regaldark.css")
@Styles.Render("~/Styles/globaldark.css")
}
if (num.AsInt() == 2)
{
totalMessage = "white mode";
@Styles.Render("~/Styles/1/defaultwhite.css")
@Styles.Render("~/Styles/1/regalwhite.css")
@Styles.Render("~/Styles/1/globalwhite.css")
}
The HTML form code I am currently using:
<form action="" method="post>
<p>
<select name="number">
<option value="">Dear user, please select your favorite theme</option>
<option value="1">>Dark Mode</option>
<option value="2">>White Mode</option>
</select>
</p>
<p><input type="submit" value=" Add "></p>
</form>
<p>@totalMessage</p>
Everything is functioning as intended, but I am looking to make the user experience more streamlined. Ideally, I would like the code to automatically apply the selected theme without the need for the user to click on a submit button.