vera/agora-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Basic theme switching, only half works.

Browse source
This commit is contained in:
Flancian 2020-11-15 02:11:15 +01:00
parent 9e48d5e38e
commit 3fb372a2b0
3 changed files with 63 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/static/css/screen-dark.css
View file

File diff suppressed because one or more lines are too long

32
app/static/js/main.js Normal file
View file

@ -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')}}";
}
});
});

4
app/templates/base.html
View file

@ -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>