Merge pull request #564 from glowing-bear/dynamic-theme-loading

Load theme without angular to reduce flicker
10 years ago · 703e67a221
parent f2e3c441d3 2d3c2c11bb
commit 703e67a221
2 changed files with 22 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -14,6 +14,7 @@
    <link rel="apple-touch-icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
    <link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" >
    <link href="css/glowingbear.css" rel="stylesheet" media="screen">
+    <link href="css/themes/dark.css" rel="stylesheet" media="screen" id="themeCSS" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
@ -38,7 +39,6 @@
    <script type="text/javascript" src="3rdparty/favico-0.3.5.min.js"></script>
  </head>
  <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-keyup="handleKeyRelease($event)"  ng-keypress="handleKeyPress($event)" ng-class="{'no-overflow': connected}" lang="en-US">
-    <link ng-href="css/themes/{{settings.theme}}.css" rel="stylesheet" media="screen" />
    <div ng-hide="connected" class="container">
      <h2>
        <img alt="logo" src="assets/img/glowing-bear.svg">
--- a/js/glowingbear.js
+++ b/js/glowingbear.js
@ -418,6 +418,27 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
        }
    });

+
+    // Inject theme CSS
+    settings.addCallback('theme', function(theme) {
+        // Unload old theme
+        var oldThemeCSS = document.getElementById("themeCSS");
+        if (oldThemeCSS) {
+            oldThemeCSS.parentNode.removeChild(oldThemeCSS);
+        }
+
+        // Load new theme
+        (function() {
+            var elem = document.createElement("link");
+            elem.rel = "stylesheet";
+            elem.href = "css/themes/" + theme + ".css";
+            elem.media = "screen";
+            elem.id = "themeCSS";
+            document.getElementsByTagName("head")[0].appendChild(elem);
+        })();
+    });
+
+
    // Update font family when changed
    settings.addCallback('fontfamily', function(fontfamily) {
        utils.changeClassStyle('favorite-font', 'fontFamily', fontfamily);