Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Customizing the UI with Built-in Themes
In the development community, one of the most frequently asked questions about the HTML client in LightSwitch is how to replace the default colors and styles with custom versions. The HTML client provides two built-in themes: the Light theme, which is the default option, and the Dark theme. You can change the theme easily in the default.htm file. Locate the following snippet:
<!-- Change light-theme.css and msls-light.css to dark-theme.css and msls-dark.css respectively to use the dark theme. Alternatively, you may replace light-theme.css with a custom jQuery Mobile theme. -->
<link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
<link rel="stylesheet" type="text/css" href="Content/msls-light.css" />
As the comments suggest, replace these lines with the following:
<link rel="stylesheet" type="text/css" href="Content/dark-theme.css" /> <link rel="stylesheet" type="text/css" href="Content/msls-dark.css" />
If you run the application, you'll see that the HTML client has a new dress, as shown in Figure 4.
)
Figure 4 Applying the Dark theme to the HTML client.
The Dark theme is very interesting, and it's a quick way to change how your application looks. I'll leave it to your curiosity to see how the other screens look with the new theme.
What if you're not satisfied with the built-in themes, and you want to implement a custom theme? Themes in the HTML client are based on jQuery Mobile, so you must adhere to its standards. Fortunately, there's an easy solution, which I'll cover in the next section.