feat: change meta theme-color based on theme #669 (#671)

zwave-js · Aug 18, 2020 · 97d9a33 · 97d9a33
1 parent 9000f2e
commit 97d9a33
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -113,6 +113,15 @@ export default {
       this.status = status
       this.statusColor = color
     },
+    changeThemeColor: function () {
+      var metaThemeColor = document.querySelector('meta[name=theme-color]')
+      var metaThemeColor2 = document.querySelector(
+        'meta[name=msapplication-TileColor]'
+      )
+
+      metaThemeColor.setAttribute('content', this.dark ? '#000' : '#fff')
+      metaThemeColor2.setAttribute('content', this.dark ? '#000' : '#fff')
+    },
     importFile: function (ext, callback) {
       var self = this
       // Check for the various File API support.
@@ -214,6 +223,7 @@ export default {
       else localStorage.removeItem('dark')
 
       this.$vuetify.theme.dark = v
+      this.changeThemeColor()
     }
   },
   beforeMount () {
@@ -247,6 +257,7 @@ export default {
     }
 
     this.dark = !!localStorage.getItem('dark')
+    this.changeThemeColor()
   },
   beforeDestroy () {
     if (this.socket) this.socket.close()

diff --git a/views/index.ejs b/views/index.ejs
@@ -1,39 +1,41 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title><%= config.title %></title>
-    <base href="<%= config.base %>" />
-    <meta name=mobile-web-app-capable content=yes>
-    <meta name=theme-color content=#fff>
-    <meta name=application-name content="Zwave To MQTT">
-    <meta name=apple-mobile-web-app-capable content=yes>
-    <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
-    <meta name=apple-mobile-web-app-title content="Zwave To MQTT">
 
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= config.base %>static/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= config.base %>static/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= config.base %>static/favicons/favicon-16x16.png">
-    <link rel="manifest" href="<%= config.base %>static/favicons/site.webmanifest">
-    <link rel="mask-icon" href="<%= config.base %>static/favicons/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="theme-color" content="#ffffff">
-    <!-- For serving the index via express -->
-    <% if (typeof cssFiles !== 'undefined') { %>
-      <% for ( let css of cssFiles ){  %>
-        <link rel="stylesheet" href="<%= config.base %><%= css %>">
-      <% } %>
-    <% } %>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- For serving the index via express -->
-    <% if (typeof jsFiles !== 'undefined') { %>
-      <% for ( let src of jsFiles ){  %>
-        <script src="<%= config.base %><%= src %>"></script>
-      <% } %>
-    <% } %>
-    <!-- built files will be auto injected -->
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%= config.title %></title>
+  <base href="<%= config.base %>" />
+  <meta name=mobile-web-app-capable content=yes>
+  <meta name=application-name content="Zwave To MQTT">
+  <meta name=apple-mobile-web-app-capable content=yes>
+  <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
+  <meta name=apple-mobile-web-app-title content="Zwave To MQTT">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="<%= config.base %>static/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="<%= config.base %>static/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="<%= config.base %>static/favicons/favicon-16x16.png">
+  <link rel="manifest" href="<%= config.base %>static/favicons/site.webmanifest">
+  <link rel="mask-icon" href="<%= config.base %>static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="theme-color" content="#ffffff">
+  <!-- For serving the index via express -->
+  <% if (typeof cssFiles !== 'undefined') { %>
+  <% for ( let css of cssFiles ){  %>
+  <link rel="stylesheet" href="<%= config.base %><%= css %>">
+  <% } %>
+  <% } %>
+</head>
+
+<body>
+  <div id="app"></div>
+  <!-- For serving the index via express -->
+  <% if (typeof jsFiles !== 'undefined') { %>
+  <% for ( let src of jsFiles ){  %>
+  <script src="<%= config.base %><%= src %>"></script>
+  <% } %>
+  <% } %>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>