Reskinning via CSS shenanigans

Chime

Hello peoples. One of the more prominent things affecting my life lately has been an increasingly frequent and crippling set of headaches. Strangely enough, bold white backgrounds cause actual physical pain and mean I need to go rest that much sooner.

So. I like gentler, low-ish contrast color-neutral light-on-dark themes for everything whenever and where-ever possible. There are a variety of ways to do this, but I'm on Chrome now and the easiest plugin for doing this programmatically on a site-by-site basis is Stylebot. There might be better ways, but this worked for me and may help others.

It's still very much a work in progress, but this has made the forum much more manageable for me:

.post-bar {
    background-color: #555;
    border: none;
}

a {
    color: #aaf;
}

div.category-body {
    background-color: #444;
    color: #ddd;
}

div.category-info {
    background-color: #444;
}

div.category-text p small {
    color: #888;
    font-size: 80%;
    font-style: italic;
}

div.container-fluid {
    background: inherit;
}

div.navbar-collapse.collapse.navbar-ex1-collapse {
    background-color: #444;
}

div.panel-body {
    background-color: #555;
}

div.post-content blockquote {
    border-color: #aaa;
    border-left: solid 2px;
}

div.row {
    background-color: #333;
}

div.topic-body {
    background-color: #333;
    border-style: none;
}

h1.navbar-brand.forum-title {
    color: #ddd;
    border-style: none;
}

html body {
    background-color: #333;
    color: #ddd;
}

li.category-item {
    background-color: #555;
    border-left-width: 0;
}

li.category-item.unread {
    background-color: #faa;
}

li.post-row {
    border: none;
}

ol.breadcrumb {
    background-color: #333;
}

button {
    color: #ddd;
    background-color: #666;
}

textarea.write {
    background-color: #333;
    color: #ddd;
}

div.preview.well {
    background-color: #333;
}

div.composer-container {
    background-color: #222;
    color: #ddd;
}

i {
    color: #ddd;
}

input.title.form-control {
    color: #ddd;
    background-color: #333;
}

button.navbar-toggle {
    border: none;
}

div.navbar {
    border: none;
}

.navbar-default {
    background-color: #333;
}

Not done yet:

Certain text entry widgets e.g. for tags
The chat system
Various dropdowns

Anyone else interested or have thoughts/recommendations?

purldator

If you like pleasing, dark, low-contrast palettes, then I fully suggest Solarized. It also has a contrasting lighter palette to go with it. I use it for Sublime Text when I'm coding. At one point I switched potatoMU to it and turned off COLOR256 in any MU* I was on, but kept the default 16-color ANSI.

Chime

Solarized (dark) is a nice idea. The light one hurts as much as most of the rest. I'm still not a big fan of their color choices, but it does work.

I'm mostly using Emacs in dark-mode with the wombat color theme, as I've probably shared before-- complete with large fonts for reducing eye-strain.

If someone produced a solarized-dark option that I could just click on and enable for this forum, I'd use that. In the absence of it, this is what I have so far.

If it seems a bit too gray, well. Better that than garish (nsfw).

purldator

@Chime Here's even more, which I admit to using for web design as much as for my coding environment.

Chime

@purldator Oooh, that's actually got some very nice ones. A nice spread of clearly discernible but heavily desaturated colors is exactly what I'm looking for.