Arch Linux

skyer

Member

Registered: 2012-06-25

Posts: 56

Enforcing black background / white text on websites

GOAL: Have consistent web browsing experience with generally dark-colors, without white-flashes. Minor bugs and quirks are fine.

Is there anybody who has tried to achieve this? Any success? What software do you use?

I currently use chromium with Deluminate extension. Resulting colors are good, however, white flashes occur when clicking links (etc) and it's killing me. I would switch browser without hesitation if there was a way to do this nicely. Any help/advice/tips?

firekage

Member

From: Eastern Europe, Poland

Registered: 2013-06-30

Posts: 628

Re: Enforcing black background / white text on websites

I have similar question not for web browser but the os. I use zion (reversed) colour sheme (system settings > apps looks or how it is named in english > colour > zion (reversed), i changed two options because on white screen text was black and window was black so i was not able to see antyhing that i typed in. Now i have black window with red fonts and it works, but on some occasion not all webistes work that well and sometimes i have websites that are white, and fonts when typing are still not visible because of colour scheme.

1 - webpage that does not allow me to see what i type in because text is black and window is black

2 - the same webpage, text is only visible not when typing in but when i highlight it:

3 - and how it should look on webistes, for archforum is an example, because i see what i type. Window is black but text is red, so i see it :

I would like to know what to change to being able to see what i type in or choose (when there are java or flash content) on all of webpages.

Last edited by firekage (2015-05-21 17:27:37)

bleach

Member

Registered: 2013-07-26

Posts: 264

Re: Enforcing black background / white text on websites

in chromium you have to create the folder ~/.config/chromium/Default/User\ StyleSheets and make a file like custom.css
and for a example

*{
background-color:#262524!;
}

the * is for all element and the ! forces it on all pages it overrides the sites css.
there are a lot of other specific elements and there are sites dedicated to showing those elements and such.

when learning a neat tool with most browsers is the developer tools to see what elements are what.

Last edited by bleach (2015-05-21 17:48:01)

skyer

Member

Registered: 2012-06-25

Posts: 56

Re: Enforcing black background / white text on websites

In the mean time, I found out about firefox/chromium browser add-on called Stylish. It supports loading custom styles for websites, the well-known ones usually have good/usable styles.

It's not nearly a fully dark browsing experience, but if one visits certain set of sites most frequently it can be useful.

bstaletic

Member

Registered: 2014-02-02

Posts: 658

Re: Enforcing black background / white text on websites

I have done it before with vimb and its style.css copied from the official site. The only I've changed was the default image opacity (0.5 to 1).

*,div,pre,textarea,body,input,td,tr,p {
    background-color: #303030 !important;
    background-image: none !important;
    color: #bbbbbb !important;
}
h1,h2,h3,h4 {
    background-color: #303030 !important;
    color: #b8ddea !important;
}
a {
    color: #70e070 !important;
}
a:hover,a:focus {
    color: #7070e0 !important;
}
a:visited {
    color: #e07070 !important;
}
img {
    opacity: 1;
}
img:hover {
    opacity: 1;
}
._hintLabel {
    text-transform: uppercase !important;
    background-color: #e0e070 !important;
    font-size: .9em !important;
    color: #000 !important;
    opacity: 0.4;
}
._hintElem._hintFocus {
    color: #f0f070 !important;
}

There are quirks with outlines of fields like text boxes or forum posts. Sometimes a part of an outline is missing.

And it's not black/white it's more gray/slighly-less-gray. But colors can be easily changed.

---

My dotfiles