This is a small (growing?) collection of user-stylesheets based upon the [[http://ethanschoonover.com/solarized][Solarized]] theme ([[https://github.com/altercation/solarized][repo]]). It uses [[http://learnboost.github.com/stylus/][Stylus]] to generate the CSS. The home of this stylesheet is at [[https://github.com/alphapapa/solarized-everything-css]].
Wouldn't it be nice if (almost) every web site looked Solarized? I thought so. So here is a start. :)
@ -21,13 +22,28 @@ Wouldn't it be nice if (almost) every web site looked Solarized? I thought so.
[[screenshots/github-light.png]]
*** Wikipedia
**** Dark
[[screenshots/wikipedia-dark.png]]
**** Light
[[screenshots/wikipedia-light.png]]
** Installation
** Installation :noexport_1:
*** From userstyles.org
You may install some of the stylesheets directly in your browser from [[http://userstyles.org][userstyles.org]]:
Install the stylesheet of your choice according to your browser's method (e.g. using the Stylish extension in Firefox).
*** Files
**** Files
- ~solarized-all-sites-*.css~
These have all the sites' styles smushed into one big file. Might work pretty well for most sites. If the collection grows, it might begin to have conflicts--but it still might work pretty well. It might be a lot better than adding a separate stylesheet for every site you visit...
- ~solarized-generic-*.css~
@ -46,7 +62,9 @@ Install the stylesheet of your choice according to your browser's method (e.g. u
For [[http://planet.emacsen.org][Planet Emacsen]]
- ~solarized-stackexchange-*.css~
For StackExchange sites. Not all sites are covered, but some of the main ones are. Patches welcome.
** Development
** Development :noexport_1:
To make changes, just edit the =.styl= files and run =make=. (You need to have Stylus installed, of course.)
Basically, nearly the only things that should be in =dark.styl= or =light.styl= should be changes to the =color-= variables that adjust it for light or dark. Everything else should go in =sites/*.styl=. Colors are defined as =color-= variables, and mixins are used to insert common CSS properties (like =color=, =background=, etc) with =!important=. Most changes can be made without inserting CSS properties directly into the selectors.
@ -56,6 +74,7 @@ I highly recommend using Emacs with =stylus-mode= and =outline-minor-mode=, but,
It's a good idea to avoid the use of =*= selectors wherever possible. They tend to have unanticipated side-effects which can take time to track down.
*** Require tree
Stylus can be very confusing when it comes to importing/requiring sheets into other sheets. Unfortunately, the order in which they are imported /does/ matter, as each one seems to be parsed and executed in-order, rather than importing them all at once and then having a global namespace.
This is how the sheets ~require~ in this project:
@ -72,5 +91,6 @@ This is how the sheets ~require~ in this project:
This way, the Solarized color values are loaded first, followed by the dark- or light-themed mappings of those color values to friendly names, after which those friendly names can be used in the sheets that actually style elements and pages.
** License
Really? Come on, it's just some CSS. Just have fun and share!
Adam Porter
7 years ago