userstyles.org - myfavolours - global custom color scheme

Global style forcing given colour scheme.

Features (shows/reveals) :
- does not affect anything but colours (preserves layout)
- disables background images -- this is intended feature, not a bug. Many designs cannot stand this, but it is not flaw of this userstyle but a flaw of concrete designs. No information should be represented _only_ as a background-image.
- some basic semantics (headings, navigation, emphasizes, etc.)
- visited / unvisited links
- some IMO neat form styling effects.

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

(Though installing Stylish is recommended, if your browser supports user scripts, you can also install this style as a user script.)

myfavolours - global custom color scheme
347
2187
Advertisement
Author myf
License CC BY
Created Apr 6, 2007
Updated Sep 18, 2013
Installs (this week) 217
Installs (total) 29,785
Average rating Good
Show CSS

Notes

Unfinished, still kinda attempt. See source.

Changelog:
2007-09-04: + "current / active / selected" item emphasized; + brighter border for focused inputs (and links)
2007-09-17: - revert: solid background for TDs (was not a good idea); ~ source cleanup
2007-09-24: ~ screen shots up-to-date;
2008-08-18: + form elements fix for FF3 ("-moz-appearance : none"), thanks rounded form styles for hint
2008-10-11: - disabled (commented) "text-decoration: none" for links, to comply above description.
2010-01-07: few minor fixes: ~ "body" has no longer solid background: in many layouts it fits just the initial viewport so the actual overlapping content is technically just above the root "html" element; ~ disabling text-shadow (Sadly, it is really necessary)
2010-01-23: ~ even more dynamics for forms elements, disabling backgrounds for generated (:before,:after) content (also necessary)
2010-02-15: quite radical experiment:
- Enabled background-images for :empty elements (to have all those "sprite buttons" back. I Had been thinking about this but was sceptical and still I am not sure if it is worth it, because it brings back far more things than "useful" buttons (be prepared for lots of rounded corners), but after few weeks of experiments I've seen no serious problem with it (if you encounter some, you can turn this off; see source).
- Added option for disabling text-indent to show texts of most of those image-replaced headings. Since it seems that "text-indent" isn't used for nothing but this purpose nowadays, it is probably quite safe to turn this on.
- All thanks goes to NightShift - eye care for encouraging me to finally try these.
2011-05-03: just desc update
2011-11-08: progressmeters (some), view-source "page", readable dark graphic text with transparency on hover
2012-04-13: few more "transparent flyout" fixes
2012-07-12: reintroduced -moz-appearance: none for form elements. Strange.
2012-08-29: few more "transparent flyout" fixes (for gmail mostly) ([role]), selected autocomplete items
2012-12-03: some fixes regarding clashes of tag overlays (should be transparent) with progressmeters (should be contrasting)
2013-01-10: (description) linked new Webkit (Chrome) filter-based styles
2013-09-18: (cosmetic; removed 'window' selector just to get back into 'global' category on userstyles; see issue 64. This should repair few other bugs, but we will probably get bright flashes between page loads (sorry). Another 'app' style will be necessary then :|)

See/try also:
- Simple approach: Light text on black background
- Individual site approach ( "painted black" series ): http://userstyles.org/styles/search/painted+black
- Midnight Surfing - Global Dark Style : very nice alternative; bit darker
- Midnight Surfing Alternative : remix
- NightShift - eye care : very interesting and inspiring
- Global dark style - changes everything to DARK : also nice, uses background image and colours scrollbars and context menus
- global dark style internet for night web browsing : simple, new
Webkit (Chrome) filter-based (will make colour sheme that is already inverse brighter, but overall might me "safest"):
- Lazy Generic Inverted Grayscale Style : grayscale(1) invert(1) brightness(10%) contrast(80%)
- Black Web : invert(1) hue-rotate(180deg)
Some thievery:
- Carbon eXtreme : old copypaste of my style by different user. Dunno if I should feel honoured or offended. (Linking here just to keep track for future.)


Notes / Known bugs:
- many sites relies on bacgkround images. As said, not a bug of this style.
- "popups", flyouts, dropdowns, rollovers … there are many cases, when absolutelly positioned element does not get any solid background and remains transparent and so unreadable; I am working on it, but there cannot exist any bulletproof solution for this. If only there was any class convention for this … (Setting solid background colour for nearly everythig would spoil more than it would solve.)
- "lightboxoids", big navigational links floating above content - the opposite problem as above; there are situations, where I set solid background to elements that were intended to remain transparent (eg. "next/prev") areas of lightboxoid popups.
- Some galleries or "fancy dynamic slideshows" uses background-image instead of real image. I think this monstrosity does not even deserve to be fixed.
- Selects: missing arrows (gonna mess with the "initial" value or tweak whole style, stay tuned)

Feedback

Discussions

Ask a new question or add a review for this style.