m/persona5-negotiation
1
0
Fork 0
mirror of https://github.com/joyce-chen/persona5-negotiation.git synced 2025-11-18 16:47:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added dark mode toggle and css theme

Browse Source
This commit is contained in:
Joyce Chen
2020-08-11 02:13:41 -04:00
parent 65a50ceda0
commit 7dcff4a52e
6 changed files with 180 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/footer.html
View File

@@ -17,4 +17,4 @@
</script>
{% endif %}
</body>
</html>
</html>

61
_includes/header.html
View File

@@ -1,3 +1,10 @@
<script>
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
@@ -5,14 +12,14 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -21,7 +28,51 @@
<body>
<div class="wrapper">
<header>
<h1>{{ site.title | default: site.github.repository_name }}</h1>
<div style="display: flex">
<h1 style="flex: 1">{{ site.title | default: site.github.repository_name }}</h1>
<div>
<label class="switch" id="themeSwitchLabel">
<input type="checkbox" id="themeSwitch" onClick="toggleTheme()"/>
<span class="slider round">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</span>
</label>
</div>
</div>
<p class="view"><a href="{{ site.github.repository_url }}">View this joyce-chen Project on GitHub <small>{{ github_name }}</small></a></p>
<p><a href="https://forms.gle/JtH9YUekRKVEkYgc6">If you want to contribute to the guide, fill out this form. Thank you! [New: Confirm reaction option]</a></p>
</header>
</header>
<script>
const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
if (theme === "dark") {
document.getElementById("themeSwitch").checked = true;
} else if (theme === "light") {
document.getElementById("themeSwitch").checked = false;
} else if (userPrefers === "dark") {
document.documentElement.setAttribute('data-theme', 'dark');
window.localStorage.setItem('theme', 'dark');
document.getElementById("themeSwitch").checked = true;
} else {
document.documentElement.setAttribute('data-theme', 'light');
window.localStorage.setItem('theme', 'light');
document.getElementById("themeSwitch").checked = false;
}
function toggleTheme() {
let currentMode = document.documentElement.getAttribute('data-theme');
if (currentMode === "dark") {
document.documentElement.setAttribute('data-theme', 'light');
window.localStorage.setItem('theme', 'light');
document.getElementById("themeSwitch").checked = false;
} else {
document.documentElement.setAttribute('data-theme', 'dark');
window.localStorage.setItem('theme', 'dark');
document.getElementById("themeSwitch").checked = true;
}
}
</script>