add in a dynamic theme example (#230)

* add in a dynamic theme example

* update colour for when image is too small

* some fixups after stupid mistakes

dynamic-theme/README.md

@@ -0,0 +1,17 @@
+# Dynamic theme
+
+## What it does
+
+Checks the users time and then flips between two different themes. A "moon theme" for after 8pm and before 8am and a "sun theme" the rest of the time.
+
+To flip themes you can change the system time.
+
+## What it shows
+
+How to use the dynamic theme API and the alarm API.
+
+Images are under creative commons 2.0: https://creativecommons.org/licenses/by/2.0/ and are:
+
+https://www.flickr.com/photos/smemon/21939278025/in/photolist-zqGx1e-RRJjP9-ifAAEu-5Bb3R8-RmUdfQ-do9maE-RXiUHq-avRBYY-UrLynC-NWHX1-fND353-7Hgf3N-peAT8G-ahQje-3j9m1U-7W72M7-oNgLaF-faUP9M-SCJVpm-m3zsiB-SLjW4X-6sXzow-nzmiNW-GpiC9-4yVL8D-6sYiVd-kbJFNA-dWePSs-pGoTdJ-UCKjMC-UJtDMx-UCKjf5-9iW4rf-dnhFMq-QJAu9A-VtfjzN-RLSSGN-9dWKeu-cpmnXL-4g21qm-a4t24c-edkrrt-5cQ21P-71A3Qb-qNKJoE-oQ5qc5-2f2YeN-6RGZyS-s8g3Nc-pkjybQ
+
+https://www.flickr.com/photos/carrenho/2443850489/in/photolist-4HXnBg-5Pg5tX-538XR-4kWUM-Vqb73V-GVSn1-nzSMqa-6TZwDQ-8NjEAS-ejqFwz-9Mra6z-6QDu8y-89eHW7-6fMEWp-fdabE-8Jv15V-8Jy9QG-6KcAsE-HPMGM-fcuMuE-V6vMKB-gg4VC-9h8GQa-7d1VS2-8PkWv7-8PhofV-evJBcR-MzZKt-pWWi6w-qJuTvo-dha7vm-Bnxcee-pfu11h-cUVXx1-r6BnTV-eXnhNo-h5k9E-fcT9jW-jAtbkT-5MSiEB-sfEYVj-9h8H3K-kWqQuL-8PkthY-dGFHDa-8PkWqh-o2fFjk-TWgQHJ-71rpnG-jJK6gy

dynamic-theme/background.js

@@ -0,0 +1,49 @@
+var currentTheme = '';
+
+const themes = {
+  'day': {
+    images: {
+      headerURL: 'sun.jpg',
+    },
+    colors: {
+      accentcolor: '#CF723F',
+      textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+      headerURL: 'moon.jpg',
+    },
+    colors: {
+      accentcolor: '#000',
+      textcolor: '#fff',
+    }
+  }
+};
+
+function setTheme(theme) {
+  if (currentTheme === theme) {
+    // No point in changing the theme if it has already been set.
+    return;
+  }
+  currentTheme = theme;
+  browser.theme.update(themes[theme]);
+}
+
+function checkTime() {
+  let date = new Date();
+  let hours = date.getHours();
+  // Will set the sun theme between 8am and 8pm.
+  if ((hours > 8) && (hours < 20)) {
+    setTheme('day');
+  } else {
+    setTheme('night');
+  }
+}
+
+// On start up, check the time to see what theme to show.
+checkTime();
+
+// Set up an alarm to check this regularly.
+browser.alarms.onAlarm.addListener(checkTime);
+browser.alarms.create('checkTime', {periodInMinutes: 5});

dynamic-theme/manifest.json

@@ -0,0 +1,17 @@
+{
+  "description": "An example dynamic theme",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme",
+  "manifest_version": 2,
+  "name": "Dynamic theme example",
+  "permissions": [
+    "alarms",
+    "theme"
+  ],
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "version": "1.0",
+  "gecko": {
+      "strict_min_version": "55.0a2"
+  }
+}