add dark theme

app/assistants/main-assistant.js

@@ -13,10 +13,11 @@ function MainAssistant() {
 }
 
 MainAssistant.prototype.setup = function() {
+    //Default to light theme
+    if (Object.keys(appModel.AppSettingsCurrent).indexOf('ThemePreference') == -1)
+        appModel.AppSettingsCurrent["ThemePreference"] = "palm-default";
+    appModel.SetThemePreference(this.controller);
 
-    //Load preferences
-    appModel.LoadSettings();
-    Mojo.Log.info("settings now: " + JSON.stringify(appModel.AppSettingsCurrent));
     this.deviceType = systemModel.DetectDevice();
     this.errorCount = 5;
     
@@ -67,7 +68,7 @@ MainAssistant.prototype.setup = function() {
     //Command Buttons
     this.cmdMenuAttributes = {
         spacerHeight: 40,
-        //menuClass: 'no-fade'
+        menuClass: 'no-fade'
     },
     this.cmdMenuModel = {
         visible: false,

app/assistants/preferences-assistant.js

@@ -8,6 +8,16 @@ function PreferencesAssistant() {
 PreferencesAssistant.prototype.setup = function() {
     /* setup widgets here */
 
+    //Theme picker
+    this.controller.setupWidget("listThemePreference",
+    {label: $L({value:"Theme", key:"theme"}),
+        labelPlacement: Mojo.Widget.labelPlacementLeft,
+        choices: [
+            {label: $L({value:"Light", key:"themeLight"}), value: "palm-default"},
+            {label: $L({value:"Dark", key:"themeDark"}), value: "palm-dark"},
+            {label: $L({value:"System Pref", key:"themeSystem"}), value: "system-theme"}
+        ]},
+    { value: appModel.AppSettingsCurrent["ThemePreference"] });
     //Refresh timeout picker
     this.controller.setupWidget("listRefresh",
         this.attributes = {
@@ -186,6 +196,7 @@ PreferencesAssistant.prototype.activate = function(event) {
        example, key handlers that are observing the document */
 
     /* add event handlers to listen to events from widgets */
+    Mojo.Event.listen(this.controller.get("listThemePreference"), Mojo.Event.propertyChange, this.handleValueChange.bind(this));
     Mojo.Event.listen(this.controller.get("listRefresh"), Mojo.Event.propertyChange, this.handleValueChange.bind(this));
     Mojo.Event.listen(this.controller.get("toggleAutoDownload"), Mojo.Event.propertyChange, this.handleValueChange.bind(this));
     Mojo.Event.listen(this.controller.get("listAutoDownloadTime"), Mojo.Event.propertyChange, this.handleValueChange.bind(this));
@@ -208,6 +219,10 @@ PreferencesAssistant.prototype.handleValueChange = function(event) {
 
     Mojo.Log.info(event.srcElement.id + " value changed to " + event.value);
     switch (event.srcElement.id) {
+        case "listThemePreference":
+            appModel.AppSettingsCurrent["ThemePreference"] = event.value;
+            appModel.SetThemePreference(this.controller);
+            break;
         case "toggleCustomClientId":
             {
                 var thisWidgetSetup = this.controller.getWidgetSetup("txtCustomClientId");
@@ -290,6 +305,7 @@ PreferencesAssistant.prototype.deactivate = function(event) {
 
     /* remove any event handlers you added in activate and do any other cleanup that should happen before
        this scene is popped or another scene is pushed on top */
+    Mojo.Event.stopListening(this.controller.get("listThemePreference"), Mojo.Event.propertyChange, this.handleValueChange);
     Mojo.Event.stopListening(this.controller.get("listRefresh"), Mojo.Event.propertyChange, this.handleValueChange);
     Mojo.Event.stopListening(this.controller.get("toggleAutoDownload"), Mojo.Event.propertyChange, this.handleValueChange);
     Mojo.Event.stopListening(this.controller.get("listAutoDownloadTime"), Mojo.Event.propertyChange, this.handleValueChange);

app/models/app-model.js

@@ -19,6 +19,7 @@ var AppModel = function() {
     //Define your app preferences (to be saved by OS)
     this.AppSettingsCurrent = null;
     this.AppSettingsDefaults = {
+        ThemePreference: "palm-default",
         Username: "",
         Credential: "",
         SharePhrase: "",
@@ -40,6 +41,21 @@ var AppModel = function() {
     };
 }
 
+
+AppModel.prototype.SetThemePreference = function(theController) {
+    if (appModel.AppSettingsCurrent["ThemePreference"] != "system-theme") {
+        theController.document.body.className = appModel.AppSettingsCurrent["ThemePreference"];
+        Mojo.Log.info("Using local theme pref: " + appModel.AppSettingsCurrent["ThemePreference"]);
+    } else {
+        systemModel.LoadWOSAPrefs(function(response) {
+            if (response) {
+                Mojo.Log.error("Using system theme pref: " + systemModel.WOSAPrefs.theme);
+                theController.document.body.className = systemModel.WOSAPrefs.theme;
+            }
+        }.bind(this))
+    }
+}
+
 AppModel.prototype.ShowDownloaderStage = function() {
     Mojo.Log.info("App Model checking if we should to show Dashboard stage...");
     this.serviceEndpointBase = appModel.ServiceEndpointBase;

app/views/main/main-scene.html

@@ -1,4 +1,4 @@
-<div class="palm-page-header">
+<div class="palm-page-header multi-line">
     <div class="header-icon sharespace"></div>
     <div class="header-text">
         <span x-mojo-loc=''>Share Space</span>

app/views/newshare/newshare-scene.html

@@ -1,4 +1,4 @@
-<div class="palm-page-header">
+<div class="palm-page-header multi-line">
     <div class="header-icon sharespace"></div>
     <div class="header-text">
         <span x-mojo-loc=''>Share Space</span>

app/views/newuser/newuser-scene.html

@@ -1,4 +1,4 @@
-<div class="palm-page-header">
+<div class="palm-page-header multi-line">
     <div class="header-icon sharespace"></div>
     <div class="header-text">
         <span x-mojo-loc=''>Share Space - New User</span>

app/views/preferences/preferences-scene.html

@@ -10,6 +10,12 @@
     </div>
     <div class="palm-list" id="listBasic">
         <div class="palm-row first">
+            <div class="palm-row-wrapper">
+                <div x-mojo-element="ListSelector" title="ThemePreference" id="listThemePreference"></div>
+            </div>
+        </div>
+
+        <div class="palm-row">
             <div class="palm-row-wrapper">
                 <div id="listRefresh" x-mojo-element="ListSelector" title="RefreshTimeout" class="right"></div>
             </div>

app/views/welcome/welcome-scene.html

@@ -1,4 +1,4 @@
-<div class="palm-page-header">
+<div class="palm-page-header multi-line">
     <div class="header-icon sharespace"></div>
     <div class="header-text">
         <span x-mojo-loc=''>Share Space - Welcome</span>

stylesheets/sharespace.css

@@ -5,6 +5,10 @@
     background-size: 32px 32px;
 }
 
+.palm-dark .header-text {
+    color:lightgray !important;
+}
+
 .task-title.new {
     color: dimgray;
     font-style: italic;
@@ -34,6 +38,10 @@
     color: #000;
 }
 
+.palm-dark .explanation-text {
+    color: lightgray;
+}
+
 .palm-group-title.detail {
     color: #000;
     margin-left: -4px;
@@ -47,6 +55,10 @@
     font-style: italic;font-size: smaller; color:dimgray;
 }
 
+.palm-dark .explainer {
+    color: lightgray;
+}
+
 #welcome-data {
     margin-left: 8px;
     padding-left: 3px;