New theme examples (#248)

themes/animated/README.md

@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an animated PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to use an animated image in a theme.

themes/animated/manifest.json

@@ -0,0 +1,19 @@
+{
+
+  "description": "Theme using an animated PNG file as the headerURL image. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "animated",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/animated",
+
+  "theme": {
+    "images": {
+      "headerURL": "parrot.png"
+    },
+    
+    "colors": {
+       "accentcolor": "#ffffff",
+       "textcolor": "#000"
+    }
+  }
+}

themes/weta_fade/README.md

@@ -0,0 +1,10 @@
+# Themes: weta_fade
+
+## What it does
+
+Employs a PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to create a single image theme, using a faded edge and background color to ensure
+the image works well on a range of screen sizes.

themes/weta_fade/manifest.json

@@ -0,0 +1,19 @@
+{
+
+  "description": "Theme using a PNG as the headerURL image, employing a faded edge. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_fade",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade",
+
+  "theme": {
+    "images": {
+      "headerURL": "weta.png"
+    },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}

themes/weta_fade_chrome/README.md

@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an PNG image as the Chrome compatible theme_frame image in a theme.
+
+## What it shows
+
+How to use the Chrome compatible keys in a theme's manifest.json file to make a theme available for Firefox and Chrome.

themes/weta_fade_chrome/manifest.json

@@ -0,0 +1,21 @@
+{
+
+  "description": "Version of the weta_fade theme using the Chrome compatible manifest keys. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_fade_chrome",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade_chrome",
+
+
+  "theme": {
+    "images": {
+        "theme_frame": "weta.png"
+    },
+    
+    "colors": {
+         "frame": [ 173 , 176 , 159 ],
+         "tab_text": [ 0 , 0 , 0 ]
+    }
+  }
+
+}

themes/weta_mirror/README.md

@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs two PNG images to create a mirror effect with the theme images.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": to place multiple images within the browser header.

themes/weta_mirror/manifest.json

@@ -0,0 +1,24 @@
+{
+
+  "description": "Theme using multiple additional_backgrounds images. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_mirror",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror",
+
+  "theme": {
+    "images": {
+      "headerURL": "empty.png",
+      "additional_backgrounds": [ "weta.png", "weta-left.png"]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [ "right top" , "left top" ]
+    },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}

themes/weta_tiled/README.md

@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Tiles a PNG imagein the browser header.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": and "additional_backgrounds_tiling": to place an image within the browser header and then tile it.

themes/weta_tiled/manifest.json

@@ -0,0 +1,25 @@
+{
+
+  "description": "Theme with a single image placed centrally and then tiled. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_tiled",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled",
+
+  "theme": {
+    "images": {
+      "headerURL": "empty.png",
+      "additional_backgrounds": [ "weta_for_tiling.png"]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [ "top" ],
+      "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}