Last active
September 30, 2025 03:38
-
-
Save notsopreety/09aab6f066b29b68372f2a5cd453d258 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>${title}</title> | |
| <style> | |
| :root { | |
| --bg-color: #ffffff; | |
| --text-color: #333333; | |
| --border-color: #666666; | |
| --code-bg: #f4f4f4; | |
| --inline-code-bg: #eeeeee; | |
| --link-color: #0366d6; | |
| --shadow-color: rgba(0, 0, 0, 0.1); | |
| } | |
| [data-theme="dark"] { | |
| --bg-color: #1a1a1a; | |
| --text-color: #e0e0e0; | |
| --border-color: #555555; | |
| --code-bg: #2d2d2d; | |
| --inline-code-bg: #404040; | |
| --link-color: #4da6ff; | |
| --shadow-color: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; | |
| max-width: 900px; | |
| margin: 2rem auto; | |
| padding: 1rem; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| background-color: var(--bg-color); | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| .theme-toggle { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| background: var(--code-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 50px; | |
| padding: 8px 12px; | |
| cursor: pointer; | |
| color: var(--text-color); | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px var(--shadow-color); | |
| } | |
| .theme-toggle:hover { | |
| background: var(--inline-code-bg); | |
| transform: translateY(-1px); | |
| } | |
| pre { | |
| background: var(--code-bg); | |
| padding: 10px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| border: 1px solid var(--border-color); | |
| } | |
| code { | |
| background: var(--inline-code-bg); | |
| padding: 2px 4px; | |
| border-radius: 3px; | |
| } | |
| a { | |
| color: var(--link-color); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| h1, h2, h3 { | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 0.3em; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin: 1rem 0; | |
| } | |
| th, td { | |
| border: 1px solid var(--border-color); | |
| padding: 8px 12px; | |
| text-align: left; | |
| } | |
| th { | |
| background-color: var(--code-bg); | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 5px; | |
| } | |
| blockquote { | |
| border-left: 4px solid var(--border-color); | |
| margin: 0; | |
| padding-left: 1rem; | |
| color: var(--text-color); | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">🌙</button> | |
| ${htmlContent} | |
| <script> | |
| function applyTheme(theme) { | |
| const body = document.body; | |
| const themeToggle = document.getElementById('themeToggle'); | |
| if (theme === 'dark') { | |
| body.setAttribute('data-theme', 'dark'); | |
| themeToggle.innerHTML = '☀️'; | |
| themeToggle.setAttribute('title', 'Switch to Light Mode'); | |
| } else { | |
| body.removeAttribute('data-theme'); | |
| themeToggle.innerHTML = '🌙'; | |
| themeToggle.setAttribute('title', 'Switch to Dark Mode'); | |
| } | |
| localStorage.setItem('theme', theme); | |
| } | |
| function toggleTheme() { | |
| const currentTheme = document.body.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| applyTheme(newTheme); | |
| } | |
| function detectSystemTheme() { | |
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
| return 'dark'; | |
| } | |
| return 'light'; | |
| } | |
| function initializeTheme() { | |
| const savedTheme = localStorage.getItem('theme'); | |
| const systemTheme = detectSystemTheme(); | |
| const themeToApply = savedTheme || systemTheme; | |
| applyTheme(themeToApply); | |
| } | |
| // Initialize theme on page load | |
| document.addEventListener('DOMContentLoaded', initializeTheme); | |
| // Listen for system theme changes | |
| if (window.matchMedia) { | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { | |
| // Only apply system theme if user hasn't set a preference | |
| if (!localStorage.getItem('theme')) { | |
| applyTheme(e.matches ? 'dark' : 'light'); | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment