change dark styling, add more backgrounds

web/css/style.css

@@ -4,7 +4,7 @@ html {
 
 body {
 	margin: 0;
-	background-image: url('../img/bg-winter.jpg');
+	background-image: url('../img/bg-spring.jpg');
 	background-position: center;
 	background-size: cover;
 }
@@ -16,6 +16,14 @@ details {
 	background: rgba(255,255,255,0.8);
 }
 
+.dark details {
+	background: rgba(0,0,0,0.8);
+}
+
+summary {
+	cursor: pointer;
+}
+
 summary h2 {
 	display: inline;
 	font-size: 1.2em;

web/js/main.js

@@ -11,16 +11,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
     setMap()
 
 
-	// For custom (dark) CSS themes, set the <details> background to the inverse of
+	// For custom (dark) CSS themes that don't recognize the <details> background, set it to black.
-	// the text colour.
 	const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
-	const dumpColour     = (col) => `rgba(${col.join(',')})`
+	const luminance   = ([r,g,b]) => 0.2126*r + 0.7152*g + 0.0722*b
-	const textColour     = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
+	const textCol     = window.getComputedStyle(document.body).getPropertyValue('color')
-	const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
+
-	const sheet = document.styleSheets[0]
+	if (luminance(parseColour(textCol)) > 0.5)
-	sheet.insertRule(`
+		document.body.classList.add('dark')
-		details {
-			background-color: ${dumpColour(invertedColour)} !important;
-		}`
-	)
 })