add dark mode

This commit is contained in:
Xaloc 2021-08-26 23:21:00 +02:00
parent 2eb4c10fd1
commit 9eb930d785

View File

@ -12,11 +12,23 @@
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
.dark {
background-color: black;
color: white;
}
.button-dark {
position: absolute;
top: 3px;
right: 3px;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h1><span style='color: purple;'>D</span><span style='color: #FF47EB;'>a</span><span style='color: red;'>t</span><span style='color: #FF6600;'>a</span> <span style='color: orange;'>f</span><span style='color: #FFE200;'>r</span><span style='color: lightgreen;'>o</span><span style='color: darkgreen;'>m</span> <span style='color: turquoise;'>I</span><span style='color: #1ac6ff;'>R</span><span style='color: blue;'>F</span> <span style='color: grey;'>K</span><span style='color: #914724;'>i</span>r<span style='color: #9933ff;'>u</span><span style='color: #ff99cc;'>n</span><span style='color: #811a36;'>a</span></h1>
<div style="display: inline-block; padding: 10px;">
<button onclick="darkMode()" class="button-dark">Dark Mode</button>
<h3>Latest image from the All Sky camera</h3>
<img style='width: 90%;' src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'>
</div>
@ -50,6 +62,10 @@
</body>
<script>
function darkMode() {
var ele = document.body;
ele.classList.toggle("dark");
}
async function api(){
const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json');
const data = await res.json();