Hi,

I'm developing a web page for a institution very concerned with accessibility. This web page has to have two different themes, one light and another dark, permitting users switch between themes.
The two themes will be almost equal, only colours and some images will change.

What do you recommend me to do to only have a styles.css for both? Maybe having a styles.css in genesis theme. How can I do it?

Thank you very much

Comments

Everett Zufelt’s picture

Everett Zufelt CreditAttribution: Everett Zufelt commented

You might try the Page Style module. I haven't used it myself, but it sounds like it will meet your needs.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Page Style will not meet you needs since you want custom themes - probably the Theme Switcher module with 2 subthemes will do the job.

Problem with all these things is caching and cookie retrieval etc. I always thinks its a preferred option to just build one theme that is WCAG AA compliant and be done with it, since there is actually no reason to have these light/dark designs which is really a hang over from the old days before color and contrast issues were more well understood. It is entirely possible to build one theme to satisfy all audiences and not sacrifice any beauty in the design, unlike the Page Style module which applies the rather misguided notion that design must be horrifically bad in order to be accessible...

I would highly recommend Andy Clarkes Design for Accessibility DVD.

Everett Zufelt’s picture

Everett Zufelt CreditAttribution: Everett Zufelt commented

Yep, what @Jeff said ;)

enkara’s picture

enkara CreditAttribution: enkara commented

Well, the thing is that I cannot discuss this with the client or the designer. I have two photoshoped designs and I have to translate them to code.

I have no problem switching between themes, my problem is that I want the two subthemes to share a styles.css. Having all that css code duplicated in each sutheme is simply not sustainable and will lead to future problems for sure. Following the way Genesis is designed, what would be the best way to do this?

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

OK, so what I would do is hack the base theme and even change its name so the client doesn't have issues with Update status bugging them later on - and I really mean it, that is what we do all the time - we build custom base themes and use Genesis as the starter, but it get severely hacked (anything we don't need is deleted, things are changed around to suit the project, it gets renamed etc etc).

This new "base" holds all your generic styles, then the theme specific styles are held in each subtheme.

If you really don't want to hack the base theme then create one "master subtheme" which will act like parent to two sub-sub-themes, e.g.

Genesis
-> Master sub-theme
--> sub-sub-theme one
--> sub-sub-theme two

in the sub sub themes declare the "Master subtheme" as the base theme, and in the Master subtheme declare Genesis as the base theme.

enkara’s picture

enkara CreditAttribution: enkara commented

I think I'll hack the the genesis theme. I usually use another theme as base and I change everything I need or don't need as you do, but as I needed an accessible web I found this one. The other didn't have any subthemes, so I was a bit confused on this.

Thank you very much for your quick responses!!