在 MVC 应用程序上更新动态 css 样式表

Question

I am currently setting a light / dark theme on my MVC application

It works on one page however when i change pages or refresh the page the stylesheet goes back to the default page.

HTML

<input type="button" onclick="updateStyleSheet('bootstrap-grey')" value="Dark Mode">
                <input type="button" onclick="updateStyleSheet('bootstrap')" value="Light Mode">   

JS

  <script>
        function updateStyleSheet(filename) {

            newstylesheet = "Content/" + filename + ".css";
            if ($("#dynamic_css").length == 0) {
                $("head").append("<link>")
                css = $("head").children(":last");
                css.attr({
                    id: "dynamic_css",
                    rel: "stylesheet",
                    type: "text/css",
                    href: newstylesheet
                });
            } else {
                $("#dynamic_css").attr("href", newstylesheet);
            }

        }
    </script>

Bundle Config

 public class BundleConfig
    {

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }

Do i need to update my Home Controller or my Bundle Config.cs file? It does change between the two style sheets however as soon as it is refreshed or i change the view it goes back to the default in the Bundle config file.

Any help is appreciated

Answer 1

Ok, so you can store this value as a cookie.

As you're working with c#

Here is link about how to work with cookie in c# https://www.ryadel.com/en/asp-net-cookie-read-write-delete-c-sharp-tutorial-guide-how-to/

So the principle, the value store in the cookie, is a json object stringified, so you can set more info inside it.

In server side

if no cookie is set:

You create a cookie with content: "{theme:'light'}"

If a cookie is set you won't do anything.

If the user change of theme then:

You parse the cookie content, and modify the value of theme to 'dark', stringify it again, and send it to the client.

In client side :

You check the cookie, parse it and set the custom theme...