Windows Phone 8 HTML5 App and Themes

Question

I'm working on a WP8 HTML5 Game and was trying to be responsive to the theme the user selected.

I know I can use the Background tag in the CSS

body {
    font-size: 11pt;
    font-family: "Segoe WP";
    letter-spacing: 0.02em;
    background-color: Background;
    color: #FFFFFF;
    margin-
}

So now the background changes from Black to White but not the text color, obviously due to my having it set to #FFFFFF

I tried to change it in the javascript but oddly enough when I try document.body.style.backgroundcolor it returns “” and even using a variable set by HEX or RGB returns false.

Anyone have a solution to this?

Answer 1

MainPage.xaml.cs

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    Browser.IsScriptEnabled = true;

    // Add your URL here
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));



    Browser.Navigated += (o, s) => {
        string theme = ((Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible) ?
            "light" : "dark";

        Browser.InvokeScript("eval", String.Format("document.body.className += ' {0}'", theme));
    };

}

phone.css

body {
    font-size: 11pt;
    font-family: "Segoe WP";
    letter-spacing: 0.02em;
    background-color: Background;
    margin-left: 24px;
}

.light {
    color: #000000;
}

.dark {
    color: #FFFFFF;
}

Answer 2

document.body.style.backgroundcolor is misspelled ...

Try: document.body.style.backgroundColor
With Uppercased C .

To change te color text of the body you can use document.body.style.color

---

EDIT:

By the way, probably there is a better way to solve your problem, if you are going to change a lot of css properties, you should create css classes, like this:

body {
    /* default body css */
}

.myFirstColorSet {
    background-color: #FFF;
    color: #000;
    ...
}

.mySecondColorSet {
    background-color: #000;
    color: #FFF;
    ...
}

And then with javascript, just switch the body class

document.body.className = "mySecondColorSet";

Here is the fiddle with this example: http://jsfiddle.net/promatik/K75TG/

Answer 3

While the above XAML works so does this simply jQuery script

  <script>
    if ($("body").css("background-color") == 'rgb(0, 0, 0)'){
      $("body").css("color","rgb(255, 255, 255)");
    }
    else{
      $("body").css("color","rgb(0, 0, 0)");
    }
  </script>