Giter VIP home page Giter VIP logo

dark-theme-everywhere's Introduction

Dark Theme Everywhere

Darkens bright pages for easier nighttime reading. Check it out on the Chrome Web Store.

Unofficial improvement of the unofficial improvement of Inverter. I was tempted to call this "Nicest Inverter", but it doesn't actually invert anything. It gives you a dark page, no matter what!

Before:

thenews.im with its regular theme

After:

thenews.im with a dark theme applied

Improvements from Nicer Inverter:

  • Dark-ifies pages aggressively, so you're much less likely to come across pages with bright patches.
  • Dark-ifies pages by default, so you don't need to click the extension's button on every page load.
  • Allows you to toggle dark styles on and off without reloading the page.
  • Optionally darkens photos and media embeds.

There are a lot of inverters out there, and many of them are great. I'm using Dark Reader right now, and honestly, it's better than this for most use cases. BUT! Some pages on the internet are dark by default. When you invert a dark page, it becomes light. AGH MY EYES! This extension will always give you a dark background.

A Tim Hortons restaurant that has been painted entirely black

You can change the default theme from "Dark" to "Light" by going to Tools -> Extensions and clicking the "Options" link under Dark Theme Everywhere. You can toggle the theme with a hotkey by going to Tools -> Extensions and clicking the "Keyboard shortcuts" link at the bottom.

Now that your browser is nice and dark-themed, you might notice an annoying white flash between pages. It's a known bug that's being tracked in Issue 1373 and Issue 126341. I wrote another extension to reduce the flicker, but the problem will exist to some degree until it's fixed in Chromium.

Enjoy!

Licensed under MIT.

dark-theme-everywhere's People

Contributors

rileyjshaw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

dark-theme-everywhere's Issues

Darkening Media as well

Hi there,
Great extension and works better than most of the inverters / dimmers one finds on the store.

However, I think media (images, video, embeds) should be darkened as well, as otherwise their brightness still persists and distracts from the content.

I made a simple example to show the difference (click any side to enlarge), and with this line of css you can add it to your extension:

img, video, embed
        -webkit-filter: brightness(75%) grayscale(15%)

comment: updated link

Support toggle dark/light from command line?

I am using AutomaThemely to toggle dark/light theme in ubuntu system level based on the sunraise/sunset of local time. This tool support run a script when a light/dark switching happens, so I am wondering if it is possible to automatically toggle dark/light in Chrome?

Add Override Stylesheet

Sometimes the global stylesheet doesn't work the way it's intended. On a few websites that I use very often one or two elements don't render correctly. Nav menus and ajax rendered content for example seem to cause problems. I've played with loading my own stylesheets to override this extension but it would be much easier if I could add it directly to the DTE interface.

An idea solution would be simliar to adblock plus click to block element, but I would even be satisfied with a textarea in the options area.

See screenshot of subreddit menu on reddit.com
screenshot from 2017-05-01 19-57-11

Instagram pics not showing

Images on instagram are not showing, possible because they are displayed with a background-image on the div, and the plugin overwrites all divs with background: black.

Instead, the plugin could use background-color: #333 to fix this issue.

BTW: Semantic issue that also makes it really hard for backtracking: the plugin generates a ton of helper classes (even cascading) in the css that may as well slow down the rendering process.

iFrame Support

Is there a way we could build in support for iFrames, e.g. twiier widget atm are still white.

Broken after recent update

Version: 4.0.6
Chromium 49.0.2623.110

I'm getting issues similar to user reviews in chrome web store page. The pages get dark effect even if I set it to default to Light with nothing on exceptions list. Changing the default to Dark doesn't change anything. Clicking the icon changes the page's color but refreshing it reverts it back. Also, I use Dark Reader with this one.

Defaulting to dark mode.

The theme default to "dark mode always" only works when the settings page for the extension is opened (i.e. I have to keep the "options" tab always open in order to automatically get dark pages). I am currently using the Chrome 49 dev branch.

Thanks for the great extension!

Flash of normal Website

I really dig the new version of dark theme everywhere. And the brightness reduced images & videos are really nice as well, if I may pad my own back. :-P

However, there's always the original website which shines through on page load for a second, which most of the time results in a bright flash.

Would it be possible to stop any rendering until dark theme as transformed the website, and then continue the rendering process.

Or, as an alternative, add an overlaying dark layer of z:9999999999 on top of every other element on the page that blocks out the website and is hidden once the website is darkified.

Background Images Issues

Don't get me wrong: I really like the minimalism Dark Theme turns some websites into by obliterating some unnecessary background images - but some sites that consist almost entirely of bg images for context (I'm looking at you Apple.com) or other websites with background images for container elements (change.org) lose functionality when the extension is turned on.

Any thoughts on how to counter this ?

A few other quirks

  • eradicates background images
    Probably to swap with black backgrounds, however on sites that use background images for container images (ex: change.org), elements just disappear. A better way would be to only do this if the element is body, or just dim the background image with the Darkened Media css filters code
  • "clicked links" are shown as golden
    It seems an unnecessarily prominent and dominant colors to highlight links that have already been explored by the user. A darker blue than the usual link color would make more sense.
  • text-selection highlight is red with font changing to blue
    This as well seems a rather peculiar choice

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.