One of the many great benefits of building HTML clients with LightSwitch is that you can easily change the theme of your apps with standard CSS. When you install the HTML Client Preview 2 you get two themes to choose from, a dark theme (the default in Preview 2) and a light theme. However you can completely customize the CSS to whatever you want. One really easy way to do that is by using ThemeRoller for JQuery Mobile.
Over the last week or so I’ve been working on a variation of the Survey App that you build in the LightSwitch SharePoint Tutorial and sharing my experience. If you missed the posts:
- Get Started Building SharePoint Apps in Minutes with LightSwitch
- Sending Email from a LightSwitch SharePoint App using Exchange Online
However, you’ll notice that when we deploy the app to Office 365 it stands out like a sore thumb and doesn’t match the theme of the site. Depending on what your SharePoint site looks like, you may prefer the dark theme. However, for this SharePoint app I’d like to make it look more consistent with the rest of my site, which is primarily blue and white.
Switching to the Light Theme
As I mentioned, the LightSwitch HTML client also comes with an alternate light theme. To use this theme instead, first flip to File View on the Solution Explorer:
Then open up the default.htm file in the Client project. You will see the styles defined at the top of the file.
<title>SurveyApptitle><link rel="stylesheet" type="text/css"
href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile.structure-1.1.1.css" /><link rel="stylesheet" type="text/css" href="Content/msls.global.css" /><link rel="stylesheet" type="text/css" href="Content/msls.shell.css" /><link rel="stylesheet" type="text/css" href="Content/msls.controls.css" /><link rel="stylesheet" type="text/css" href="Content/dark-theme.css" /><link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
...
Just like the comments say, to use the light theme first replace the dark theme with the light one like so:
<link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
Then open the user-customization.css file located in the Content folder and replace the light images with their dark counterparts, just like the comments instruct. (Note that you can also change logos and icons here as well.)
#msls-id-app-loading .ui-icon-loading {/* If using light theme, change to Images/msls-loader-light.gif */background-image: url(Images/msls-loader-light.gif) !important; }#msls-id-app-loading .msls-app-loading-img {/* Input your own custom logo here */
background-image: url(Images/user-splash-screen.png); }#msls-id-progress-overlay .msls-progress {/* If using light theme, change to msls-loader-light.gif */background: url(Images/msls-loader-light.gif) no-repeat bottom !important;}.msls-header .msls-large-icon .ui-icon {/* If using light theme, change 'white' to 'black' */background-image: url(images/msls-black-icons-36.png)!important;
background-color:transparent; }
Now when we run our app, we have a lighter version.
This is definitely a step in the right direction for making this app look like it’s part of my SharePoint. However, I’d like to customize this a bit further, particularly the blue selection and links need to be darker to match the SharePoint chrome at the top. ThemeRoller to the rescue!
Customizing with ThemeRoller for jQuery Mobile
To start using ThemeRoller head to http://jquerymobile.com/themeroller/. To make it easy, you can import a stylesheet and then just tweak the elements you want. So in Visual Studio open the stylesheet we’re using /Content/light-theme.css and copy all the contents into your clipboard. Then using ThemeRoller, click the Import button at the top of the screen, paste in the CSS, and then click Import:
This will load the light theme into a swatch on the design surface. Now you can customize any of the elements by changing the properties on the left. Alternatively, you can select from a variety of pre-built themes and colors and simply drag them onto the swatch.
Now all I need to do is figure out the hex values for the colors I want. A really easy way to do this is by using the color eyedropper tool in Visual Studio. Just open any CSS file, right-click on any style, then you can click on a color property and use the eyedropper tool to select any color on your screen.
I just pointed the eyedropper to the blue SharePoint chrome bar and it looks like the value of blue color I want is #0072C6. Back in ThemeRoller, add it to your recent colors:
Then drag the new color onto the hyperlink and the button.
Finally, in order to change the pressed state of options (pick lists & dropdowns), expand the “Button: Pressed” section of the properties and change the background to the new color (by dragging or typing).
Using the Custom Theme
Now that we got the theme looking how we want, let’s get this back into our app. First we need to export the theme we just created. Click the Download button at the top of ThemeRoller, name the theme, and click Download. This will download a ZIP with your theme (the ZIP includes a version that is readable and a min version that has the whitespace taken out).
Extract the contents of the ZIP, and in the theme folder, copy the CSS file (I named mine MyOffice365) then back in Visual Studio paste it into the client’s Content folder.
Finally open up default.htm again and now replace the light-theme.css with ours.
<link rel="stylesheet" type="text/css" href="Content/MyOffice365.css" /><link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
...
Now when we run the LightSwitch SharePoint app, it looks a lot more integrated with the rest of the site. Nice!
And it looks pretty good on my phone too :-)
I hope I’ve shown how easy it is to incorporate your own style into your LightSwitch HTML apps. Using standard CSS and with the help of ThemeRoller, anyone can make their mobile apps look “maaaaarvelous”.
Enjoy!