docs: Some fixes for dark mode

johang · Dec 6, 2023 · 470a4d6 · 470a4d6
1 parent ff1b504
commit 470a4d6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/docs/_layouts/board.html b/docs/_layouts/board.html
@@ -36,11 +36,11 @@ <h3>Install instructions</h3>
 {% for debian in x %}
 {% capture i %}{{ debian.os }}{{ debian.dist }}{{ debian.arch }}{% endcapture %}
 				<div class="tab-pane fade d-none" id="v-pills-install-{{ i }}" role="tabpanel" aria-labelledby="v-pills-install-{{ i }}-tab" tabindex="0">
-					<p class="bg-dark rounded py-2 px-3">
-						<code class="shell-normal text-light">wget https://dl.sd-card-images.johang.se<span id="install-{{ i }}-boot_path">/PLACEHOLDER1.bin.gz</span></code><br>
-						<code class="shell-normal text-light">wget https://dl.sd-card-images.johang.se<span id="install-{{ i }}-debian_path">/PLACEHOLDER2.bin.gz</span></code><br>
-						<code class="shell-normal text-light">zcat <span id="install-{{ i }}-boot_file">boot.bin.gz</span> <span id="install-{{ i }}-debian_file">debian.bin.gz</span> &gt; sd-card.img</code><br>
-						<code class="shell-root text-light">dd if=sd-card.img of=/dev/sdXXX <span class="text-info"># ...where /dev/sdXXX is your SD card</span></code><br>
+					<p class="bg-dark-subtle border border-dark-subtle rounded py-2 px-3">
+						<code class="shell-normal text-body-emphasis">wget https://dl.sd-card-images.johang.se<span id="install-{{ i }}-boot_path">/PLACEHOLDER1.bin.gz</span></code><br>
+						<code class="shell-normal text-body-emphasis">wget https://dl.sd-card-images.johang.se<span id="install-{{ i }}-debian_path">/PLACEHOLDER2.bin.gz</span></code><br>
+						<code class="shell-normal text-body-emphasis">zcat <span id="install-{{ i }}-boot_file">boot.bin.gz</span> <span id="install-{{ i }}-debian_file">debian.bin.gz</span> &gt; sd-card.img</code><br>
+						<code class="shell-root text-body-emphasis">dd if=sd-card.img of=/dev/sdXXX <span class="text-info-emphasis"># ...where /dev/sdXXX is your SD card</span></code><br>
 					</p>
 {% if debian.exp == true %}
 					<div class="alert alert-danger" role="alert">This image is experimental</div>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <!-- Hi :) -->
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -35,6 +35,17 @@
 			gtag('js', new Date());
 			gtag('config', 'G-V2XK1QS92P');
 		</script>
+		<script>
+			if ($("html").attr("data-bs-theme") == "auto") {
+				const prefersColorSchemeQuery = "(prefers-color-scheme: dark)";
+				function updateTheme() {
+					const prefersDark = window.matchMedia(prefersColorSchemeQuery).matches;
+					$("html").attr("data-bs-theme", prefersDark ? "dark" : "light");
+				}
+				window.matchMedia(prefersColorSchemeQuery).addEventListener("change", updateTheme);
+				updateTheme();
+			}
+		</script>
 	</head>
 	<body>
 		<header>

diff --git a/docs/tips-and-tricks.html b/docs/tips-and-tricks.html
@@ -11,7 +11,7 @@ <h2>Tips and tricks</h2>
 	<div class="container">
 		<h3>Change root password</h3>
 		<p>You should change root password.</p>
-<pre class="bg-dark rounded text-light p-3 wrap"><samp># passwd
+<pre class="bg-success-subtle border border-success-subtle rounded p-3 wrap"><samp># passwd
 Changing password for root.
 Current password: 
 New password: 
@@ -22,7 +22,7 @@ <h3>Change root password</h3>
 
 		<h3>Extend root filesystem</h3>
 		<p>If your SD card is larger than 4 GB, you can extend the root filesystem after writing it to the SD card.</p>
-<pre class="bg-dark rounded text-light p-3 wrap"><samp># parted -a opt /dev/sdXXX "resizepart 2 100%"
+<pre class="bg-success-subtle border border-success-subtle rounded p-3 wrap"><samp># parted -a opt /dev/sdXXX "resizepart 2 100%"
 ...
 # partprobe
 ...
@@ -33,14 +33,14 @@ <h3>Extend root filesystem</h3>
 
 		<h3>Set time zone</h3>
 		<p>Set correct time zone to get correct system time.</p>
-<pre class="bg-dark rounded text-light p-3 wrap"><samp># timedatectl set-timezone Europe/Stockholm
+<pre class="bg-success-subtle border border-success-subtle rounded p-3 wrap"><samp># timedatectl set-timezone Europe/Stockholm
 ...
 #
 </samp></pre>
 
 		<h3>perl: warning: Setting locale failed</h3>
 		<p>If you you get the following (or similar) warnings, fix it by installing and configuring <code>locale</code>.</p>
-<pre class="bg-danger rounded text-light p-3 wrap"><samp>perl: warning: Setting locale failed.
+<pre class="bg-danger-subtle border border-danger-subtle rounded p-3 wrap"><samp>perl: warning: Setting locale failed.
 perl: warning: Please check that your locale settings:
 	LANGUAGE = (unset),
 	LC_ALL = (unset),
@@ -58,7 +58,7 @@ <h3>perl: warning: Setting locale failed</h3>
 perl: warning: Falling back to the standard locale ("C").
 </samp></pre>
 
-<pre class="bg-dark rounded text-light p-3 wrap"><samp># apt-get install locales
+<pre class="bg-success-subtle border border-success-subtle rounded p-3 wrap"><samp># apt-get install locales
 ...
 # dpkg-reconfigure locales
 ...
@@ -67,15 +67,15 @@ <h3>perl: warning: Setting locale failed</h3>
 
 		<h3>debconf: unable to initialize frontend: Dialog</h3>
 		<p>If you you get the following (or similar) warnings, fix it by installing <code>dialog</code>.</p>
-<pre class="bg-danger rounded text-light p-3 wrap"><samp>debconf: unable to initialize frontend: Dialog
+<pre class="bg-danger-subtle border border-danger-subtle rounded p-3 wrap"><samp>debconf: unable to initialize frontend: Dialog
 debconf: (No usable dialog-like program is installed, so the dialog based frontend cannot be used. at /usr/share/perl5/Debconf/FrontEnd/Dialog.pm line 76.)
 debconf: falling back to frontend: Readline
 debconf: unable to initialize frontend: Readline
 debconf: (Can't locate Term/ReadLine.pm in @INC (you may need to install the Term::ReadLine module) (@INC contains: /etc/perl /usr/local/lib/aarch64-linux-gnu/perl/5.28.1 /usr/local/share/perl/5.28.1 /usr/lib/aarch64-linux-gnu/perl5/5.28 /usr/share/perl5 /usr/lib/aarch64-linux-gnu/perl/5.28 /usr/share/perl/5.28 /usr/local/lib/site_perl /usr/lib/aarch64-linux-gnu/perl-base) at /usr/share/perl5/Debconf/FrontEnd/Readline.pm line 7.)
 debconf: falling back to frontend: Teletype
 </samp></pre>
 
-<pre class="bg-dark rounded text-light p-3 wrap"><samp># apt-get install dialog
+<pre class="bg-success-subtle border border-success-subtle rounded p-3 wrap"><samp># apt-get install dialog
 ...
 #
 </samp></pre>