danog/ecodash
1
0
Fork 0
forked from massivebox/ecodash
Code Pull requests Activity

Dark Theme support

Browse source 
Now when prefers-color-scheme is set to "dark", a dark theme will be used.
SVGs have been updated to allow for it, and also compressed to optimize.
This commit is contained in:
MassiveBox 2023-04-12 21:32:15 +02:00
parent 57b97d3ab5
commit 3ac161e740
7 changed files with 52 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

20
templates/default/index.html
View file

@ -13,7 +13,7 @@
<div class="home-cards card">
<div>
<h3>Energy usage per day</h3>
<svg width="100%" height="50px" viewBox="0 0 80 15">
<svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.PerDayUsage}} kWh</text>
</svg>
</div>
@ -23,7 +23,7 @@
<div class="home-cards card">
<div>
<h3>Green energy %</h3>
<svg width="100%" height="50px" viewBox="0 0 80 15">
<svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.GreenEnergyPercent}} %</text>
</svg>
</div>
@ -38,19 +38,27 @@
<footer>
<div class="flex two four-600">
<div>
<img src="assets/light-bulb.svg" alt="Lightbulb" style="width: 100%">
<svg viewBox="0 0 100 100">
<use href="assets/light-bulb.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p>
</div>
<div>
<img src="assets/washing.svg" alt="Air Conditioner" style="width: 100%">
<svg viewBox="0 0 64 64">
<use href="assets/washing.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p>
</div>
<div>
<img src="assets/oven.svg" alt="Oven" style="width: 100%">
<svg viewBox="0 0 64 64">
<use href="assets/oven.svg#layer" xlink:href="#layer"/>
</svg>
<p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p>
</div>
<div>
<img src="assets/bitcoin.svg" alt="Bitcoin" style="width: 100%">
<svg viewBox="0 0 140 141.347">
<use href="assets/bitcoin.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 1300}} Bitcoin transactions</b></p>
</div>
</div>