CODEWITHSUNDEEP
javascripthtmlwindows-phone-8
Torvos
Torvos

Reputation: 242

Windows Phone 8 HTML5 App and Themes

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?

Upvotes: 3

Views: 694

Answers (3)

Torvos
Torvos

Reputation: 242

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>

Upvotes: 0

Sergei Grebnov
Sergei Grebnov

Reputation: 2623

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;
}

Upvotes: 1

Ant&#243;nio Almeida
Ant&#243;nio Almeida

Reputation: 10117

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/

Upvotes: 0

Related Questions