Search code examples
windows-8windows-runtimewinjstoggleswitch

how to change color of text for WinJS.UI.ToggleSwitch

I am using a Toggle Switch in the settings pane. Problem is that the text in the title and labelOff, labelOn is not visible. I am not sure how can I change the front color or styles from the WinJS.UI.ToggleSwitch so that this text start displaying. Any examples will be highly appreciated. Here is my html.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="mypage fragment"
            id="mysettings" 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{width:'narrow'}">
            <div class="win-header">       
                    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
                    </button>
                <div class="win-label">My Settings</div>
            </div>
            <div class="mytoggle"  data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
        </div>  
    </body>
</html>

Below is my css

.fragment.mypage .mytoggle .win-title .win-labelOff{ color: green; }

Solution

  • you can refer the css styling classes for WinJS.UI.ToggleSwitch here.

    default.js: 

    app.onsettings = function onsettings(e)
{
    e.detail.applicationcommands = {
        about: { title: 'About', href: '/pages/settings/about.html' },
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

    /pages/about/about.css:

    .myflyout .win-content .mytoggle .win-title
{
    color: blue;
}

    /pages/about/about.html page:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
    <!-- BEGINSETTINGFLYOUT -->
    <div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout" 
       data-win-options="{settingsCommandId:'about'}">
        <div class="win-ui-light win-header" >
           <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" 
            class="win-backbutton"></button>
           <div class="win-label">About</div>
           <img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
        </div>                
        <div class="win-content">
            <div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" 
               data-win-options="{title: 'example of toggle'}" >
            </div>
        </div>
    </div>
    <!-- ENDSETTINGSFLYOUT -->
</body>
</html>