37 lines
2.5 KiB
HTML
37 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>You can now toggle dark mode on this website! - Job Bautista</title>
|
|
<link href="/index.css" rel="stylesheet" type="text/css" media="all">
|
|
<link href="/light.css" rel="stylesheet" type="text/css" media="all" title="Light mode">
|
|
<link href="/dark.css" rel="alternate stylesheet" type="text/css" media="all" title="Dark mode">
|
|
<link rel="top" href="/" title="Job Bautista's personal website">
|
|
<link rel="up" href="./" title="Job Bautista's writings">
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<script src="/nav.js"></script>
|
|
<noscript><iframe id="top" name="top" src="/nav.html"></iframe></noscript>
|
|
</header>
|
|
<hr />
|
|
<h1>You can now toggle dark mode on this website!</h1>
|
|
<p>You may have noticed the <a href="https://www.w3.org/Style/Examples/007/alternatives.en.html">"alternate stylesheet"</a> while viewing the source code of this website. That's the CSS for <a href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a>! You may be wondering how to switch to dark mode. It's easy, well at least if you're on desktop <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> (sorry <a href="https://www.google.com/chrome/browser/index.html">Chrome</a> and mobile users!).</p>
|
|
<p>On Firefox and its forks like <a href="https://www.palemoon.org">Pale Moon</a> and <a href="https://www.waterfox.net/">Waterfox</a>, follow these instructions:</p>
|
|
<ol>
|
|
<li><p>Toggle the menu bar (on Pale Moon and <a href="https://www.seamonkey-project.org/">SeaMonkey</a>, they are already toggled by default).</p>
|
|
<li><p>Click on "View", or the third item on the menu bar if you're using another language pack.</p>
|
|
<li><p>Hover on "Page Style". (On <a href="https://apps.kde.org/en/konqueror">Konqueror</a>, it's "Use StyleSheet".)</p>
|
|
<li><p>Click on "Dark mode". You can now enjoy my website while taking care of your eyes at night!</p>
|
|
</ol>
|
|
<p>For Google Chrome, you will have to install this <a href="https://chrome.google.com/webstore/detail/alt-css/deaodobjfcolfhkecnnghdclnlmfjdje">extension</a>.</p>
|
|
<hr />
|
|
<footer>
|
|
<script src="/footer.js"></script>
|
|
<noscript><div><iframe id="bottom" name="bottom" src="/footer.html"></iframe></div></noscript>
|
|
<a id="navfix" href="/nav.html">navigation if your browser has faulty iframe support</a>
|
|
</footer>
|
|
</body>
|
|
</html> |