diff --git a/dynamic-theme/README.md b/dynamic-theme/README.md new file mode 100644 index 00000000..ac1d82fe --- /dev/null +++ b/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 diff --git a/dynamic-theme/background.js b/dynamic-theme/background.js new file mode 100644 index 00000000..dbf6d6d8 --- /dev/null +++ b/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}); diff --git a/dynamic-theme/manifest.json b/dynamic-theme/manifest.json new file mode 100644 index 00000000..f98a0027 --- /dev/null +++ b/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" + } +} diff --git a/dynamic-theme/moon.jpg b/dynamic-theme/moon.jpg new file mode 100644 index 00000000..2e5d6a66 Binary files /dev/null and b/dynamic-theme/moon.jpg differ diff --git a/dynamic-theme/sun.jpg b/dynamic-theme/sun.jpg new file mode 100644 index 00000000..619e98c8 Binary files /dev/null and b/dynamic-theme/sun.jpg differ