Basic theme switching, only half works.

app/static/js/main.js

@@ -0,0 +1,32 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// Adapted from https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#toggling-themes
+
+document.addEventListener("DOMContentLoaded", function() { 
+    // Select button
+    const btn = document.querySelector(".theme-toggle");
+    // Select the stylesheet <link>
+    const theme = document.querySelector("#theme-link");
+
+    // Listen for a click on the button
+    btn.addEventListener("click", function() {
+      if (theme.getAttribute("href") == "{{ url_for('static',filename='css/screen-light.css')}}") {
+        theme.href = "{{ url_for('static',filename='css/screen-dark.css')}}";
+      } else {
+        theme.href = "{{ url_for('static',filename='css/screen-light.css')}}";
+      }
+    });
+});

app/templates/base.html

@@ -23,7 +23,8 @@
 	    <meta name="HandheldFriendly" content="True" />
 	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
-	    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/screen.css')}}" />
+	    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/screen-dark.css')}}" id="theme-link" />
+    <script type=text/javascript src="{{url_for('static', filename='js/main.js')}}"></script>
 	</head>
 	<span align=left>
 		<a href="/"><img src="/static/img/agora.png" class="logo" style="vertical-align: top" width="19" height="19"></a> |
@@ -35,6 +36,7 @@
 		| <a href="/users">/users</a>
 	</span>
 	<span style="vertical-align: bottom; float:right">
+		<a href="#" class="theme-toggle">theme</a>
 		<a href="/node/agora-help">help</a>
 	</span>
 	<hr>