locked
Dark UI

    Question

  • Hello

    How can i switch between the dark en white style in css ?

    regards

    Dieter

    Saturday, March 24, 2012 1:27 PM

Answers

  • Hi Dieter,

    The standard definition is in your Default.html here:

        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

    Change it to this:

    <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">


    Jeff Sanders (MSFT)

    Monday, March 26, 2012 12:16 PM
    Moderator

All replies

  • Hi Dieter,

    I haven't tested this in a Metro app myself, but normally when you change style sheets in browsers you use a link tag such as below:

    <link rel="stylesheet" type="text/css" href="dark.css" title="dark" />

    and then you can add other stylesheets by adding the 'alternate' value to the rel attribute like so:

    <link rel="alternate stylesheet" type="text/css" ref="light.css" title="light" />

    Then, from here you can use the native browser method to switch the style sheet.  But if you want a really good method you should provide controls for it in your website so the interface is browser independent.

    Here are some links to help you understand:

    http://www.alistapart.com/articles/alternate/

    http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

    I would recommend the jQuery one just because the syntax is cleaner, but they both do the same thing.

    - Matt

    Monday, March 26, 2012 4:29 AM
  • Hi Dieter,

    The standard definition is in your Default.html here:

        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

    Change it to this:

    <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">


    Jeff Sanders (MSFT)

    Monday, March 26, 2012 12:16 PM
    Moderator