Can I change the default style for only one page? RRS feed

  • Question

  • My whole app is using default ui-dark.css. I want one of my pages to use ui-light.css. It almost work, but when User navigates to the page with changed CSS to ui-light.css, all other pages also start displaying items styled with ui-light.css inspite of ui-dark.css. What should I do to fix it?

    Thanks for your help,


    Thursday, May 2, 2013 2:53 PM


  • You can to some extent, but it's a little tricky. What's happening is that because CSS stylesheets can be loaded but not unloaded (or reloaded), then if you have two stylesheets (like the WinJS ones) that have overlapping styles, then the last one loaded wins.

    However, WinJS does scope the overlapping styles with a CSS class win-ui-light and win-ui-dark in the associated stylesheets. On the one page where you want light styling, then, leave it referring to ui-dark.css but add class="win-ui-light" to your elements.


    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    P.S. I just posted a longer writeup on my blog today on this same subject. See CSS loading behaviors when using WinJS page controls
    Thursday, May 2, 2013 4:33 PM