Add toggleable light/dark print theme

Introduce a toggleable light/dark print theme for the Steam Guide Print userscript. Adds GM_getValue/GM_setValue/GM_registerMenuCommand/GM_unregisterMenuCommand grants, stores preference, and exposes a Tampermonkey menu item to switch themes. Refactors CSS by extracting shared hide rules and moving color-specific rules into separate light/dark style blocks, and bumps script version to 1.1.0. README updated to mention the new toggleable theme.

Author: kevingrillet

README.md

@@ -188,9 +188,10 @@ Highlight mods that have been updated since your last download
 Improves the print layout of Steam Community guides:
 
 - Hides navigation bar, sidebar, breadcrumbs, comments and footer
-- Makes guide content full-width on white background
+- Makes guide content full-width
 - Readable typography with proper page breaks
 - Shows link URLs in print
+- Toggleable light/dark print theme via Tampermonkey menu (preference saved)
 
 ### Steam - Steam Search
 

user.js/[Steam] Guide Print.user.js

@@ -2,12 +2,12 @@
 // @name          [Steam] Guide Print
 // @namespace     https://github.com/kevingrillet
 // @author        Kevin GRILLET
-// @description   Improves the print layout of Steam Community guides by hiding unnecessary elements and making the guide content full-width
+// @description   Improves the print layout of Steam Community guides with a toggleable light/dark theme, hiding unnecessary elements and making the guide content full-width
 // @copyright     https://github.com/kevingrillet
 // @license       GPL-3.0 License
 // @tag           kevingrillet
 // @tag           steamcommunity.com
-// @version       1.0.0
+// @version       1.1.0
 
 // @homepageURL   https://github.com/kevingrillet/Userscripts/
 // @supportURL    https://github.com/kevingrillet/Userscripts/issues
@@ -18,6 +18,10 @@
 // @match         https://steamcommunity.com/sharedfiles/filedetails/*
 // @icon          https://www.google.com/s2/favicons?sz=64&domain=steamcommunity.com
 // @grant         GM_addStyle
+// @grant         GM_getValue
+// @grant         GM_setValue
+// @grant         GM_registerMenuCommand
+// @grant         GM_unregisterMenuCommand
 // @run-at        document-end
 // ==/UserScript==
 
@@ -27,7 +31,40 @@
     // Only apply on guide pages (check for guide-specific elements)
     if (!document.querySelector('.guide.subSections, .guideTop')) return;
 
-    GM_addStyle(`
+    // ===== THEME TOGGLE =====
+    const STORAGE_KEY = 'printTheme';
+    let isDark = GM_getValue(STORAGE_KEY, false);
+    let styleElement = null;
+    let menuCommandId = null;
+
+    function getMenuLabel() {
+        return isDark ? '🌙 Print: Dark theme (click for Light)' : '☀️ Print: Light theme (click for Dark)';
+    }
+
+    function registerMenu() {
+        if (menuCommandId !== null) {
+            GM_unregisterMenuCommand(menuCommandId);
+        }
+        menuCommandId = GM_registerMenuCommand(getMenuLabel(), toggleTheme);
+    }
+
+    function toggleTheme() {
+        isDark = !isDark;
+        GM_setValue(STORAGE_KEY, isDark);
+        applyStyle();
+        registerMenu();
+    }
+
+    function applyStyle() {
+        if (styleElement) {
+            styleElement.remove();
+            styleElement = null;
+        }
+        styleElement = GM_addStyle(isDark ? darkStyle : lightStyle);
+    }
+
+    // ===== SHARED HIDE RULES =====
+    const hideRules = `
         @media print {
             /* ===== HIDE UNNECESSARY ELEMENTS ===== */
 
@@ -96,8 +133,6 @@
             .responsive_page_frame,
             .responsive_page_content,
             .responsive_page_template_content {
-                background: white !important;
-                color: black !important;
                 width: 100% !important;
                 max-width: 100% !important;
                 margin: 0 !important;
@@ -132,20 +167,17 @@
 
             .workshopItemTitle {
                 font-size: 24pt !important;
-                color: black !important;
                 margin-bottom: 10px !important;
             }
 
             .guideTopDescription {
-                color: #333 !important;
                 font-size: 11pt !important;
             }
 
             /* Guide sub-sections */
             .subSection.detailBox {
                 background: none !important;
                 border: none !important;
-                border-bottom: 1px solid #ccc !important;
                 padding: 10px 0 !important;
                 margin: 0 !important;
                 page-break-inside: avoid;
@@ -154,13 +186,11 @@
             .subSectionTitle {
                 font-size: 16pt !important;
                 font-weight: bold !important;
-                color: black !important;
                 margin-bottom: 8px !important;
             }
 
             .subSectionDesc {
                 font-size: 11pt !important;
-                color: #222 !important;
                 line-height: 1.5 !important;
             }
 
@@ -175,7 +205,6 @@
             .subSectionDesc a::after {
                 content: " (" attr(href) ")";
                 font-size: 9pt;
-                color: #666;
             }
 
             /* Don't show URL for internal Steam links and image links */
@@ -198,7 +227,6 @@
             }
 
             .apphub_AppName {
-                color: black !important;
                 font-size: 14pt !important;
             }
 
@@ -211,12 +239,117 @@
             /* BB code spoiler blocks */
             .bb_spoiler {
                 background: none !important;
+            }
+        }
+    `;
+
+    // ===== LIGHT THEME =====
+    const lightStyle =
+        hideRules +
+        `
+        @media print {
+            body,
+            .responsive_page_frame,
+            .responsive_page_content,
+            .responsive_page_template_content {
+                background: white !important;
+                color: black !important;
+            }
+
+            .workshopItemTitle {
+                color: black !important;
+            }
+
+            .guideTopDescription {
+                color: #333 !important;
+            }
+
+            .subSection.detailBox {
+                border-bottom: 1px solid #ccc !important;
+            }
+
+            .subSectionTitle {
+                color: black !important;
+            }
+
+            .subSectionDesc {
+                color: #222 !important;
+            }
+
+            .subSectionDesc a::after {
+                color: #666;
+            }
+
+            .apphub_AppName {
+                color: black !important;
+            }
+
+            .bb_spoiler {
                 border: 1px solid #ccc !important;
             }
 
             .bb_spoiler > span {
                 color: black !important;
             }
         }
-    `);
+    `;
+
+    // ===== DARK THEME =====
+    const darkStyle =
+        hideRules +
+        `
+        @media print {
+            body,
+            .responsive_page_frame,
+            .responsive_page_content,
+            .responsive_page_template_content {
+                background: #1e1e1e !important;
+                color: #d4d4d4 !important;
+            }
+
+            .workshopItemTitle {
+                color: #e0e0e0 !important;
+            }
+
+            .guideTopDescription {
+                color: #b0b0b0 !important;
+            }
+
+            .subSection.detailBox {
+                border-bottom: 1px solid #444 !important;
+            }
+
+            .subSectionTitle {
+                color: #e0e0e0 !important;
+            }
+
+            .subSectionDesc {
+                color: #cccccc !important;
+            }
+
+            .subSectionDesc a {
+                color: #6db3f2 !important;
+            }
+
+            .subSectionDesc a::after {
+                color: #888;
+            }
+
+            .apphub_AppName {
+                color: #e0e0e0 !important;
+            }
+
+            .bb_spoiler {
+                border: 1px solid #555 !important;
+            }
+
+            .bb_spoiler > span {
+                color: #d4d4d4 !important;
+            }
+        }
+    `;
+
+    // ===== INIT =====
+    applyStyle();
+    registerMenu();
 })();