use ye olde rel='alternate stylesheets' for theming

6 years ago · 6c88201e23
3 changed files with 14 additions and 5 deletions
--- a/src/vector/index.html
+++ b/src/vector/index.html
@ -20,14 +20,20 @@
    <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
    <meta name="msapplication-config" content="vector-icons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
-    <% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%>
-       <link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet">
-    <% } %>
+    <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
+        var file = htmlWebpackPlugin.files.css[i];
+        if (file.match(/^theme-(?!light\.)/)) {
+        %>
+           <link rel="alternate stylesheet" title="<%= file %>" href="<%= file %>">
+        <% } else { %>
+           <link rel="stylesheet" href="<%= file %>">
+        <% }
+    } %>
  </head>
  <body style="height: 100%;">
    <section id="matrixchat" style="height: 100%;"></section>
    <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
-    <% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%>
+    <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
       <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
    <% } %>
    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
--- a/src/vector/index.js
+++ b/src/vector/index.js
@ -30,7 +30,6 @@ require('babel-polyfill');

 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/dark.scss');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
--- a/webpack.config.js
+++ b/webpack.config.js
@ -15,6 +15,10 @@ module.exports = {
        // point, so that it doesn't block the pageload, but that is a separate
        // problem)
        "olm": "./src/vector/olm-loader.js",
+
+        // CSS themes
+        "theme-light": "./build/light.scss",
+        "theme-dark": "./build/dark.scss",
    },
    module: {
        preLoaders: [