Implement theming support and add MetroMumbleDark theme

app/index.html

@@ -13,7 +13,7 @@
     <meta name="msapplication-config" content="${require('./favicon/browserconfig.xml')}">
     <meta name="theme-color" content="#ffffff">
 
-    <link rel="stylesheet" type="text/css" href="/loading.css">
+    <script src="theme.js"></script>
 
     <script src="matrix.js"></script>
   </head>
@@ -340,6 +340,5 @@
       </div>
     </div>
   </body>
-  <link rel="stylesheet" type="text/css" href="/main.css">
   <script src="index.js"></script>
 </html>

app/theme.js

@@ -0,0 +1,33 @@
+import url from 'url'
+
+var queryParams = url.parse(document.location.href, true).query
+var theme = queryParams.theme || window.localStorage.getItem('mumble.theme')
+var themes = {
+  'MetroMumbleLight': 'MetroMumbleLight',
+  'MetroMumbleDark': 'MetroMumbleDark',
+  'light': 'MetroMumbleLight',
+  'dark': 'MetroMumbleDark'
+}
+theme = themes[theme] || 'MetroMumbleLight'
+window.theme = theme
+
+var [loadingTheme, mainTheme] = {
+  'MetroMumbleLight': [
+    require('../themes/MetroMumbleLight/loading.scss'),
+    require('../themes/MetroMumbleLight/main.scss')
+  ],
+  'MetroMumbleDark': [
+    require('../themes/MetroMumbleDark/loading.scss'),
+    require('../themes/MetroMumbleDark/main.scss')
+  ]
+}[theme]
+
+function useStyle (url) {
+  var style = document.createElement('link')
+  style.rel = 'stylesheet'
+  style.type = 'text/css'
+  style.href = url
+  document.getElementsByTagName('head')[0].appendChild(style)
+}
+useStyle(loadingTheme)
+useStyle(mainTheme)