Skip to content
A collection of Solarized user-stylesheets for...everything?
CSS Python Other
Branch: master
Clone or download

Latest commit

alphapapa Comment: (github.styl) Issue label text color
Black provides poor contrast with some dark label colors, so using
white seems like the best choice for maximum contrast with arbitrary
label colors.  But since the default label color is light gray, that
would make for very poor contrast on new labels.  So we use a CSS drop
shadow to compensate for that.  Hopefully it's a reasonable
compromise, because there's only so much that can be done.

But none of this works because Stylus can't handle :not(), or
something like that.  See comment in file.  So this is really just a
note for the future, because I don't feel like hacking up all the
generated CSS for the sake of GitHub labels.  *sigh*
Latest commit bea9890 Jan 29, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css sites: Add some fixes for stackexchange sites Jul 9, 2019
sites Comment: (github.styl) Issue label text color Jan 29, 2020
styl Change: Put each theme in a directory with its supporting files Oct 22, 2017
themes Add apprentice theme Mar 14, 2018
LICENSE Add GPL license Oct 22, 2017
Makefile
README.org Add automation for automatically committing screenshots May 19, 2018
make.py Add automation for automatically committing screenshots May 19, 2018
release.sh Simplify release script by avoiding cd Jan 28, 2018
screenshot.js Use PhantomJS to take screenshots Oct 24, 2017

README.org

Solarized…Everything?

This is a small (growing?) collection of user-stylesheets based upon the Solarized theme (repo). It uses 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. :)

Contents

Screenshots

GitHub

Dark

https://raw.githubusercontent.com/alphapapa/solarized-everything-css/screenshots/solarized-dark/github.png

Light

https://raw.githubusercontent.com/alphapapa/solarized-everything-css/screenshots/solarized-light/github.png

Wikipedia

Dark

https://raw.githubusercontent.com/alphapapa/solarized-everything-css/screenshots/solarized-dark/mediawiki.org.png

Light

https://raw.githubusercontent.com/alphapapa/solarized-everything-css/screenshots/solarized-light/mediawiki.org.png

Installation

From userstyles.org

You may install some of the stylesheets directly in your browser from userstyles.org:

Manual

Install the stylesheet of your choice according to your browser’s method (e.g. using the Stylish extension in Firefox).

CSS files for each theme are in the css directory.

Files

  • theme-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…
  • theme-generic-*.css These are intended to be generic, suitable for many simple sites. They probably won’t do much for fancy, popular sites with lots of custom CSS, but for simple, mostly unstyled sites, they might work okay.
  • theme-mediawiki-*.css For MediaWiki sites, like Wikipedia
  • theme-disqus-*.css For Disqus comments
  • theme-github-*.css For GitHub
  • theme-google-*.css For Google
  • theme-hackernews-*.css For Hacker News
  • theme-planet.emacsen.org-*.css For Planet Emacsen
  • theme-stackexchange-*.css For StackExchange sites. Not all sites are covered, but some of the main ones are. Patches welcome.
  • theme-sakai-*.css For sites hosted by sakai, a popular course management program.

Development

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 themes/*/*.styl should be theme specific colors. 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.

I highly recommend using Emacs with stylus-mode and outline-minor-mode, but, of course, you can use whatever you like. :)

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:

  • Makefile
    • theme: contains custom theme files. Each theme corresponds to a group of css files.
      • */{dark,light}.styl (in Makefile syntax: $$color.styl)
        • colors
        • Contents of {dark,light}.styl
    • styl (which loads styl/index.styl)
      • mixins
    • sites/*.styl: The site-specific sheets, as well as generic.styl, which applies to all of them, and also builds as a separate sheet for non-specific sites. all-sites.styl puts all of the site-specific sheets into one big CSS file, which some people may prefer over setting up custom CSS for each site in their browser. Styles starting with _ will not be included in all-sites.styl

This way, the color value-name mappings are loaded first, after which those friendly names can be used in the files that actually style elements and pages.

New Themes

It’s easy to add your own themes:

  1. Copy an existing theme directory in the themes/ directory, giving it a new name.
  2. Modify it as required.
  3. Run make in the project root directory to build the CSS files.

Credits

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/gpl-3.0.txt.

You can’t perform that action at this time.