Gradiance

[kaigou]

Theme name/layout: Gradiance
Author: Kaigou
Layout info: originally Tranquility III
Image info: 10 substitute icons (5 per style)
Layout url: http://www.dreamwidth.org/customize/advanced/layersource?id=87751&fmt=html

Users can change the 8-scale gradient, the page background, the default text color, the content/comment background color, and colors for active & visited links. As long as the contrast between the 4th color and the 8th color is enough to make text legible, the gradient can go from darkest-dark to lightest-light, or from medium-dark to medium-light, depending on the amount of contrast required. The CSS looks a little funky as a result, but it makes for some easy cut-and-paste to create new color schemes.

The links all go to a test post on my journal, which has multiple replies of varying types (anon, registered, openid) so you can those in action.

Gradiance Amethyst — Gradiance Amethyst Verso
Gradiance Carmine — Gradiance Carmine Verso
Gradiance Celadon — Gradiance Celadon Verso
Gradiance Cerise — Gradiance Cerise Verso
Gradiance Cerulean — Gradiance Cerulean Verso
Gradiance Cobalt — Gradiance Cobalt Verso
Gradiance Emerald — Gradiance Emerald Verso
Gradiance Forest — Gradiance Forest Verso
Gradiance Fuschia — Gradiance Fuschia Verso
Gradiance Grayscale — Gradiance Grayscale Verso
Gradiance Halaya Ube — Gradiance Halaya Ube Verso
Gradiance Harlequin — Gradiance Harlequin Verso
Gradiance Heliotrope — Gradiance Heliotrope Verso
Gradiance Indigo — Gradiance Indigo Verso
Gradiance Jade — Gradiance Jade Verso
Gradiance Lemon — Gradiance Lemon Verso
Gradiance Maize — Gradiance Maize Verso
Gradiance Majorelle — Gradiance Majorelle Verso
Gradiance Midnight — Gradiance Midnight Verso
Gradiance Moss — Gradiance Moss Verso
Gradiance Nadeshiko — Gradiance Nadeshiko Verso
Gradiance Ocean — Gradiance Ocean Verso
Gradiance Ochre — Gradiance Ochre Verso
Gradiance Olivine — Gradiance Olivine Verso
Gradiance Peach — Gradiance Peach Verso
Gradiance Pistachio — Gradiance Pistachio Verso
Gradiance Racing — Gradiance Racing Verso
Gradiance Sangria — Gradiance Sangria Verso
Gradiance Sapphire — Gradiance Sapphire Verso
Gradiance Sienna — Gradiance Sienna Verso
Gradiance Sky — Gradiance Sky Verso
Gradiance Slate — Gradiance Slate Verso
Gradiance Spring — Gradiance Spring Verso
Gradiance Storm — Gradiance Storm Verso
Gradiance Thistle — Gradiance Thistle Verso
Gradiance Vermilion — Gradiance Vermilion Verso
Gradiance Viridian — Gradiance Viridian Verso

The substitute icons fill in when there's a blank for an anonymous poster, an RSS feed, a DW user, or an OpenID user. The last image the blockquote background. [ETA: after further testing, the regular icons look fine even on a reversed setup, so not seeing reason to do that extra bit.]



There are still some outstanding issues that I can't figure out. None of them are really deal-breakers, but if I can find answers to these questions, I'll edit the existing code to reflect the fixes.

I'm presuming separate layouts for reversed (light-on-dark) color schemes, but it seems like it'd be a LOT easier to give users the option of reversing the colors, with a simple yes/no question (which would then flip color_001 for color_008 and so on). Or is it better to treat each as separate themes, on the grounds that users wouldn't be aware ahead-of-time that the colors can be easily reversed in the wizard?

...I think that covers it!

Comments

[afuna]

I have a thought, but it makes for ugly code:

1.) eight properties exposed through the wizard
2.) bunch of other properties, which are defined noui, so you can edit them in a user or theme layer
3.) blank noui properties will be initialized in prop_init to match the properties exposed through the wizard (so you could have a "page_border" property exposed through the wizard. It, in turn, sets the colors of "entry_border" and "content_border" which are both noui, if these don't already have a color defined
4.) the noui properties are what are used in the CSS

But hmmmmm, I think the approach above will take a lot of work, and that eight is enough. The biggest problem we had, and the reason we eventually split up things into more and more properties, is that some color combinations would not work with light on dark (you could pick a good color combination for the main areas, but then, surprise unreadable text in small sections! especially when it came to links on accent colors :-))

Since this layout was built with the balance of changing color combinations in mind, I think we don't need to offer as fine-grained control over individual colors, if that makes sense?

[kaigou]

Right. Uhm, I think you lost me around "1) eight properties..." and the rest of that is, uhm, well. It's very impressive. Not really sure what it means, but it looks cool! But if the upshot is: "hey, you don't have to entirely recode the color section of the CSS to allow for twiddling on every single color instance," sounds fine to me.

Though if you scroll down in the base code, I did make notes about the color logic. There are basically four boxes, and each one has a set of proportions in its colors. So they shade equally darker or lighter, to the same degree. There are odd colors that sit outside those proportions (like on the tags page, or the archives pages), but in general, if you wanted more than the most basic 8-color control but not the wacky 120+ color control, that was my idea of a potential compromise, to list the four boxes and the colors for each part.

(And then draw from those what the 8 base colors are for the oddball colors, but I'm not really sure how that'd quite work.)