Windows Phone 8 HTML5應用程序和主題

Question

我正在研究WP8 HTML5游戲，並試圖響應用戶選擇的主題。

我知道我可以在CSS中使用Background標簽

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

所以現在背景從黑色變為白色而不是文本顏色，顯然是由於我將其設置為#FFFFFF

我嘗試在javascript中更改它，但奇怪的是，當我嘗試document.body.style.backgroundcolor它返回“”，甚至使用由HEX或RGB設置的變量返回false。

有人有解決方案嗎？

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拼寫錯誤...

嘗試： document.body.style.backgroundColor
使用Uppercased C

要更改正文的te顏色文本，可以使用document.body.style.color

---

編輯：

順便說一下，可能有更好的方法來解決你的問題，如果要改變很多css屬性，你應該創建css類，如下所示：

body {
    /* default body css */
}

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

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

然后使用javascript，只需切換正文類

document.body.className = "mySecondColorSet";

這是這個例子的小提琴： http ： //jsfiddle.net/promatik/K75TG/

Answer 3

雖然上面的XAML工作，但這只是jQuery腳本

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