37 lines
2.8 KiB
HTML
37 lines
2.8 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="/~job/index.css" rel="stylesheet" type="text/css" media="all">
|
|
<link rel="top" href="/~job/" title="Job Bautista's personal website">
|
|
<link rel="up" href="./" title="Job Bautista's writings">
|
|
<link rel="icon" type="image/x-icon" href="/~job/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<iframe id="top" name="top" src="/~job/nav.html"></iframe>
|
|
</header>
|
|
<hr />
|
|
<h1>You can now toggle dark mode on this website!</h1>
|
|
<p>You can now toggle dark mode by setting your browser's color scheme settings. Starting on Pale Moon 29.2.0, you can set which color scheme to prefer (<var>light</var>, <var>dark</var>, <var>no-preference</var>). For other browsers, please refer to their respective documentations.</p>
|
|
<strong class="txtcenter" style="color:#FF0000;font-size:large;">The following content is obsolete and no longer applies:</strong>
|
|
<h2>Obsolete instructions</h2>
|
|
<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="/~job/footer.js"></script>
|
|
<noscript><div><iframe id="bottom" name="bottom" src="/~job/footer.html"></iframe></div></noscript>
|
|
<a id="navfix" href="/~job/nav.html">navigation if your browser has faulty iframe support</a>
|
|
</footer>
|
|
</body>
|
|
</html> |