mirror of
https://github.com/joyce-chen/persona5-negotiation.git
synced 2025-11-17 23:53:38 -05:00
78 lines
3.6 KiB
HTML
78 lines
3.6 KiB
HTML
<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>
|
|
<meta charset="utf-8">
|
|
<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://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">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
{% seo %}
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<header>
|
|
<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!</a></p>
|
|
</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>
|
|
|