PonyMirrors/Pony-Fusion
1
0
Fork 0
mirror of https://github.com/Tailszefox/Pony-Fusion.git synced 2024-11-23 14:27:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Added dark mode switch

Browse source
This commit is contained in:
Tailszefox 2021-02-12 10:59:38 +01:00
parent 38b7bf53cc
commit 5045416a4d
5 changed files with 49 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
css/style.css
View file

@ -39,6 +39,16 @@ body
font-size: 36pt;
}
#darkSwitch
{
float: right;
height: 100%;
position: relative;
top: -10px;
left: -15px;
cursor: pointer;
}
#content
{
padding-bottom: 50px;

3
index.php
View file

@ -48,7 +48,7 @@ else
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-small.css" rel="stylesheet" media="screen and (max-width: 800px)">
<link href="css/dark.css" rel="stylesheet" media="screen and (prefers-color-scheme: dark)">
<link href="css/dark.css" rel="stylesheet" media="screen and (prefers-color-scheme: dark)" id="darkSheet">
</head>
<body>
<div id="faqWrapper">
@ -66,6 +66,7 @@ else
<div id="container">
<div id="header">
<img src="mode_light.png" id="darkSwitch" title="Switch to Dark Mode" data-mode="light">
<p>Pony Fusion</p>
</div>

36
js/base.js
View file

@ -215,4 +215,40 @@ $(function ()
var urlQuery = new URLSearchParams(window.location.search);
if(urlQuery.get("from") == null || urlQuery.get("to") == null)
randomizePonies(0);
// Switch to dark/light mode
function switchMode()
{
var darkSwitch = $("#darkSwitch")[0];
// Switch to dark mode
if(darkSwitch.dataset["mode"] == "light")
{
$("#darkSheet")[0].media = "screen";
darkSwitch.dataset["mode"] = "dark";
darkSwitch.src = "mode_dark.png";
darkSwitch.title = "Switch to Light Mode";
}
// Switch to light mode
else
{
$("#darkSheet")[0].media = "not all";
darkSwitch.dataset["mode"] = "light";
darkSwitch.src = "mode_light.png";
darkSwitch.title = "Switch to Dark Mode";
}
}
// If dark mode is the default, change the switch button
var darkDefault = window.matchMedia("screen and (prefers-color-scheme: dark)").matches;
if(darkDefault)
{
switchMode();
}
// Handle clicking on mode switch
$("#darkSwitch").click(function (e) {
switchMode();
});
});

BIN
mode_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
mode_light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB