1

I am trying to have 2 different themes (basically 2 different CSS). User has an option to choose either light or dark theme. If he chooses the light theme, I need to load the light themed CSS and if he chooses the dark theme, I need to load the dark themed CSS.

I tried this

.NET MVC: How to implement different page appearance per user?

but was not able to make it working because Url.Action was just generating the link and it was not returning the result from the Action method.

I have a layout page which all the pages in my website inherits and I somehow want to have this to be loaded in the Layout page.

The other approach is http://forums.asp.net/t/1892421.aspx?Dynamic+Themes+in+MVC+Razor

Is it ok to set the css in HttpContext.Application["Theme"]?

The other approach I came across was setting the css file using javascript while loading the page.

Which approach do you think is better?

Community
  • 1
  • 1
Bala
  • 1,129
  • 1
  • 9
  • 23

1 Answers1

1

I would use the following way inside the layout page. Perhaps I would/could improve the "GetThemeName" method so that it returns the full link string. So that the layout page only contains layout features instead of code.

ex:

@switch (UserSettings.GetThemeName())
    {
        case "Red":
            <link rel="stylesheet" href="/Content/ThemeRed/css/default.css" />
            break;
        case "Blue":
            <link rel="stylesheet" href="/Content/ThemeBlue/css/default.css" />
            break;
        default:
            <link rel="stylesheet" href="/Content/Default/css/default.css" />
            break;
    }

the UserSettings.GetThemeName is a public static function which gets the users current "theme name" or "theme id"

Ronald van Meer
  • 76
  • 6
  • Thanks Ronald. your answer generated few ideas and I have implemented it. So basically what I did was very simple @{ string stylepathname = @Html.Action("action","controller"} and then use stylepathname in css like – Bala Apr 16 '15 at 04:42