The latest articles on DEV Community by Code Wanderer (@codewanderer). https://dev.to/codewanderer https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2523084%2Fbaaab00d-1f80-4822-9522-8fe42ee37d1c.png https://dev.to/codewanderer en Code Wanderer Fri, 02 Oct 2026 10:33:08 +0000 https://dev.to/codewanderer/how-do-you-deal-with-overly-bright-websites-at-night-i-made-a-small-chrome-extension-for-it-38cg https://dev.to/codewanderer/how-do-you-deal-with-overly-bright-websites-at-night-i-made-a-small-chrome-extension-for-it-38cg <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h" class="crayons-story__hidden-navigation-link">🔅 Adjust Page Brightness: Take Control of Your Screen's Luminosity</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/codewanderer" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2523084%2Fbaaab00d-1f80-4822-9522-8fe42ee37d1c.png" alt="codewanderer profile" class="crayons-avatar__image" width="800" height="800"> </a> </div> <div> <div> <a href="/codewanderer" class="crayons-story__secondary fw-medium m:hidden"> Code Wanderer </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Code Wanderer <div id="story-author-preview-content-2138110" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/codewanderer" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2523084%2Fbaaab00d-1f80-4822-9522-8fe42ee37d1c.png" class="crayons-avatar__image" alt="" width="800" height="800"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Code Wanderer</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h" class="crayons-story__tertiary fs-xs"><time>Dec 5 '24</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h" id="article-link-2138110"> 🔅 Adjust Page Brightness: Take Control of Your Screen's Luminosity </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/productivity"><span class="crayons-tag__prefix">#</span>productivity</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/chrome"><span class="crayons-tag__prefix">#</span>chrome</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/extensions"><span class="crayons-tag__prefix">#</span>extensions</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline">&nbsp;reactions</span></span> </div> </a> <a href="https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> 1<span class="hidden s:inline">&nbsp;comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> </div> javascript showdev tools webdev Code Wanderer Thu, 05 Dec 2024 09:04:20 +0000 https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h https://dev.to/codewanderer/adjust-page-brightness-take-control-of-your-screens-luminosity-3c5h <p>Hey fellow developers! 👋</p> <p>I'm excited to share a Chrome extension I've built that helps reduce eye strain and makes browsing more comfortable across different lighting conditions.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1mywwhksg1qskqki14an.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1mywwhksg1qskqki14an.png" alt="Adjust Page Brıghtness" width="800" height="320"></a></p> <h2> 🤔 The Problem </h2> <p>We've all been there - switching between bright and dark websites, coding late at night, or struggling to read content in different lighting conditions. Your device's brightness settings aren't always enough, especially when you need different levels for different websites.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0plmpc9es574dm52avri.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0plmpc9es574dm52avri.png" alt="Brightness Control" width="800" height="500"></a></p> <h2> 💡 The Solution </h2> <p>Adjust Page Brightness gives you precise control over webpage brightness with some powerful features:</p> <h3> ✨ Key Features </h3> <ul> <li>🎚️ Fine-tuned brightness control (10% - 200%)</li> <li>🌓 Smart day/night mode automation</li> <li>🎯 Website-specific brightness settings</li> <li>🌙 Customizable night mode filter</li> <li>⌨️ Power-user keyboard shortcuts (Ctrl+Shift+↑/↓)</li> <li>📊 Usage analytics to track your preferences</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7k3z9t1z32v9ffdfn4a.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7k3z9t1z32v9ffdfn4a.png" alt="Page Brightness" width="800" height="500"></a></p> <h3> 🛠️ Technical Implementation </h3> <p>The extension works directly in your browser with:</p> <ul> <li>Zero external dependencies</li> <li>Minimal resource usage</li> <li>Offline functionality</li> <li>Complete privacy (no data collection)</li> </ul> <h3> 🎮 Usage </h3> <ol> <li>Click the extension icon or use keyboard shortcuts</li> <li>Adjust brightness with the slider</li> <li>Save per-site settings automatically</li> <li>Enable auto-mode for day/night transitions</li> </ol> <h2> 🎯 Who's it for? </h2> <ul> <li>💻 Developers working late nights</li> <li>👀 Anyone concerned about eye strain</li> <li>📱 Users in varying lighting conditions</li> <li>📖 Avid readers who switch between sites</li> <li>🎮 Gamers needing different brightness levels</li> </ul> <h2> 🚀 Try It Out </h2> <p>👉 <a href="https://chromewebstore.google.com/detail/adjust-page-brightness-di/hfdnjhopjjpihkjebbbakcibfcecbgjp" rel="noopener noreferrer">Adjust Page Brightness Chrome Extension</a></p> <h2> 🤝 Feedback Welcome! </h2> <p>I'd love to hear your thoughts and suggestions! What features would make this extension even better for your use case?</p> <p>Let's discuss in the comments below! 💭</p> webdev productivity chrome extensions