Add theme functionality and example themes

css/themes/crimson-red.css

@@ -0,0 +1,31 @@
+/* Light red theme with pinkish undertones */
+
+.crimson-red {
+  /* Colors used for primary elements such as primary buttons and links */
+  --primary: #d12245;
+  --primary-focus: #DC143C;
+  --primary-background: #ec375b;
+  --primary-text: #ffffff;
+
+  /* The color of non-primary elements such as standard buttons */
+  --muted: #555;
+  --muted-border: #bbb;
+  --muted-focus: #333;
+  --muted-border-focused: #888;
+
+  /* Text color on page for all elements */
+  --text: #222;
+
+  /* Page background color and highlights */
+  --background: #FFF;
+  --background-highlight: #f1f1f1;
+
+  /* Code blocks */
+  --code: #222;
+  --code-background: #FFFDFD;
+  --code-border: #f3eded;
+
+  /* Forms */
+  --form-background: #FFF;
+  --form-border: #D1D1D1;
+}

css/themes/hacker-green.css

@@ -0,0 +1,31 @@
+/* Matrix dark theme for those late nights */
+
+.hacker-green {
+  /* Colors used for primary elements such as primary buttons and links */
+  --primary: #880e7b;
+  --primary-focus: #821476;
+  --primary-background: #591051;
+  --primary-text: #adabab;
+
+  /* The color of non-primary elements such as standard buttons */
+  --muted: #555;
+  --muted-border: #bbb;
+  --muted-focus: #333;
+  --muted-border-focused: #888;
+
+  /* Text color on page for all elements */
+  --text: #ccc6b4;
+
+  /* Page background color and highlights */
+  --background: #000000;
+  --background-highlight: #161616;
+
+  /* Code blocks */
+  --code: #64ea27;
+  --code-background: #000;
+  --code-border: #041;
+
+  /* Forms */
+  --form-background: #131212;
+  --form-border: #1a1919;
+}

css/themes/skeleton-blue.css

@@ -0,0 +1,31 @@
+/* Classic bone chilling blue */
+
+.hacker-green {
+  /* Colors used for primary elements such as primary buttons and links */
+  --primary: #1EAEDB;
+  --primary-focus: #0FA0CE;
+  --primary-background: #33C3F0;
+  --primary-text: #FFF;
+
+  /* The color of non-primary elements such as standard buttons */
+  --muted: #555;
+  --muted-border: #bbb;
+  --muted-focus: #333;
+  --muted-border-focused: #888;
+
+  /* Text color on page for all elements */
+  --text: #222;
+
+  /* Page background color and highlights */
+  --background: #FFF;
+  --background-highlight: #E1E1E1;
+
+  /* Code blocks */
+  --code: #222;
+  --code-background: #F1F1F1;
+  --code-border: #E1E1E1;
+
+  /* Forms */
+  --form-background: #FFF;
+  --form-border: #D1D1D1;
+}

css/themes/soothing-orange.css

@@ -0,0 +1,31 @@
+/* Dark grey theme with orange highlights */
+
+.soothing-orange {
+  /* Colors used for primary elements such as primary buttons and links */
+  --primary: #f3b252;
+  --primary-focus: #ebac4d;
+  --primary-background: #ffab2e;
+  --primary-text: #161616;
+
+  /* The color of non-primary elements such as standard buttons */
+  --muted: #9d9d9d;
+  --muted-border: #808080;
+  --muted-focus: #e1e1e1;
+  --muted-border-focused: #cecece;
+
+  /* Text color on page for all elements */
+  --text: #FFFFFF;
+
+  /* Page background color and highlights */
+  --background: #2B2B2B;
+  --background-highlight: #242323;
+
+  /* Code blocks */
+  --code: #FFFFFF;
+  --code-background: #242323;
+  --code-border: #313030;
+
+  /* Forms */
+  --form-background: #1f1f1f;
+  --form-border: #242424;
+}