Use dark theme

yandeu · yandeu · commit 246fe01cf1b4 · 2025-04-20T18:14:00.000+02:00
diff --git a/src/css/floating-action-button.css b/src/css/floating-action-button.css
@@ -20,7 +20,7 @@ div#floating-action-button {
 }
 
 div#floating-action-button div {
-  color: var(--color-action-btn);
+  color: black;
   font-size: 24px;
   width: 60px;
   height: 60px;
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,9 +1,11 @@
 :root {
   --color-link: hsl(0, 0%, 21%);
-  --color-action-btn: hsl(0, 0%, 27%);
   --color-loader: hsl(0, 0%, 86%);
   --color-link-blue: hsl(212, 97%, 43%);
 
+  --color-gray80: hsl(0, 0%, 80%);
+  --color-gray50: hsl(0, 0%, 50%);
+
   --bg-color: hsl(0, 0%, 100%);
   --bg-color-code: hsl(0, 0%, 94%);
   --bg-color-footer: hsl(0, 0%, 96%);
@@ -14,19 +16,21 @@
   --header-shadow: hsl(0, 0%, 92%);
 
   @media (prefers-color-scheme: dark) {
-    /* --bg-color: hsl(0, 0%, 0%);
+    --bg-color: hsl(0, 0%, 0%);
     --color-link: hsl(0, 0%, 79%);
-    --color-action-btn: hsl(0, 0%, 63%);
     --color-loader: hsl(0, 0%, 14%);
     --color-link-blue: hsl(212, 97%, 67%);
 
+    --color-gray80: hsl(0, 0%, 20%);
+    --color-gray50: hsl(0, 0%, 50%);
+
     --bg-color-code: hsl(0, 0%, 6%);
     --bg-color-footer: hsl(0, 0%, 4%);
 
     --sponsor-bg: hsl(210, 25%, 2%);
     --sponsor-color: hsl(0, 0%, 58%);
 
-    --header-shadow: hsl(0, 0%, 8%); */
+    --header-shadow: hsl(0, 0%, 8%);
   }
 }
 
@@ -175,7 +179,12 @@ ul {
 code {
   background-color: var(--bg-color-code);
   font-size: 16px;
-  padding: 2px 4px;
+  padding: 2px 4px !important;
+}
+code.hljs {
+  border: 1px var(--color-gray80) solid;
+  border-radius: 4px;
+  padding: 16px !important;
 }
 
 a {
diff --git a/src/docs.html b/src/docs.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -20,7 +20,14 @@
 
     <script SSROnly src="//cdn.jsdelivr.net/npm/marked@3/lib/marked.min.js"></script>
 
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/github.min.css" />
+    <script>
+      const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      const highlightTheme = darkMode ? 'github-dark.min.css' : 'github.min.css'
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/' + highlightTheme
+      document.head.appendChild(link)
+    </script>
     <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
   </head>
 
diff --git a/src/docs/Collisions.md b/src/docs/Collisions.md
@@ -12,7 +12,8 @@ blueBox.body.on.collision((otherObject, event) => {
 ```
 
 ```javascript
-// collision between blueBox and redBox (will set body.checkCollisions = true, on the blueBox and the redBox)
+// collision between blueBox and redBox//
+// (will set body.checkCollisions = true, on the blueBox and the redBox)
 physics.add.collider(blueBox, redBox, event => {
   console.log(`blueBox and redBox: ${event}`)
 })

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ div#floating-action-button {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`div#floating-action-button div {`
`23`		`- color: var(--color-action-btn);`
	`23`	`+ color: black;`
`24`	`24`	`font-size: 24px;`
`25`	`25`	`width: 60px;`
`26`	`26`	`height: 60px;`