Add indigo-dark theme

src/configuration-component.ts

@@ -138,6 +138,7 @@ export class ConfigurationComponent {
         <option value="photon-dark">Photon Dark</option>
         <option value="boxy-light">Boxy Light</option>
         <option value="gruvbox-dark">Gruvbox Dark</option>
+        <option value="indigo-dark">Indigo Dark</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>

src/stylesheets/themes/indigo-dark/button.scss

@@ -0,0 +1,22 @@
+.btn-primary {
+  background: $button-normal;
+  border: 0;
+  color: $text-gray;
+}
+
+.btn-primary:hover {
+  background: $button-hover;
+}
+
+.btn-primary:active {
+  background: $button-pressed;
+}
+
+.btn-primary:focus {
+  box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 1px #4f46e5, 0 0 0 4px #818cf8;
+}
+
+.btn-primary:disabled {
+  background: $button-normal;
+  opacity: 0.4;
+}

src/stylesheets/themes/indigo-dark/index.scss

@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";

src/stylesheets/themes/indigo-dark/syntax.scss

@@ -0,0 +1 @@
+@import "github-syntax-dark/lib/github-dark";

src/stylesheets/themes/indigo-dark/utterances.scss

@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";

src/stylesheets/themes/indigo-dark/variables.scss

@@ -0,0 +1,21 @@
+$gray-000: #1f2937;
+$gray-100: #374151;
+$gray-200: #4b5563;
+$gray-300: #6b7280;
+$gray-400: #9ca3af;
+$gray-600: #d1d5db;
+$gray-700: #e5e7eb;
+$bg-white: darken($gray-100, 3%);
+$bg-gray: $gray-100;
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $gray-200;
+$border-gray-dark: $border-gray;
+$text-gray: #ededf0;
+$text-gray-dark: #d7d7db;
+$text-blue: #a5b4fc;
+$bg-blue-light: #182030;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);
+$button-normal: #4f46e5;
+$button-hover: #6366f1;
+$button-pressed: #3730a3;