I have started a stylesheet for the Zen STARTERKIT which converts the theme to "light text on dark background." The difficulty has been the various system tools which use a background color to distinguish a particular style-block of information. I have taken the approach which would anticipate a graphic background and converted many backgrounds to "transparent" and a colored border has been substituted to distinguish the payload. Otherwise, colors have been darkened enough to allow a light text to be visible.
Save the following code to your subtheme folder as backgrounds.css and add the following line to your template.php where it loads the subtheme stylesheets:
drupal_add_css(path_to_theme() .'/backgrounds.css', 'theme', 'all');
backgrounds.css:
/
This stylesheet is for the Drupal Zen SARTERKIT theme.
It contains the necessary color changes and overrides
to convert the stock starter theme to a "LIGHT ON DARK"
starting point by overriding offensive Drupal Default
styles. Stylesheets being overridden are noted.
by MattRock [http://mattrock.net]
/
/* system.css /
/ set the main colors for the theme /
body {
color: #fff;
background-color: #000;
}
/ using the even/odd tableset to our advantage /
table tr.odd {
background: #222;
}
table tr.even {
background: #444;
}
/strip stock backgrounds/
td.active, tr.drag, tr.drag-previous {
background-color: transparent;
}
/ reset log time colors back to defaults /
.error, div.error, tr.error {
background-color: transparent;
color: #e55;
}
.warning, div.warning, tr.warning {
color: #e09010;
}
.ok, div.ok, tr.ok {
color: #008000;
}
/
The following code does nothing more than to remove
the default menu graphics. The default graphics are
all black
/
/ system menus.css /
li.expanded, li.collapsed, li.leaf {
list-style-image: none;
}
li a.active {
color: #f00;
}
td.menu-disabled {
background: #ccc;
}
/ substitude some border colors instead of background colors /
/ admin.css /
table.system-status-report tr.error, table.system-status-report tr.error th {
border-color: #ebb;
}
table.system-status-report tr.warning, table.system-status-report tr.warning th {
border-color: #eeb;
}
table.system-status-report tr.ok, table.system-status-report tr.ok th {
border-color: #beb;
}
/ update.css /
.update tr.error, .update tr.ok {
border-color: #f00;
background-color: transparent;
}
.update tr.error .version-recommended {
border-color: #f11;
background-color: transparent;
}
.update tr.ok {
border-color: #1f1;
background-color: transparent;
}
.update tr.warning {
border-color: #ff1;
background-color: transparent;
}
.update tr.warning .version-recommended {
border-color: #ff2;
background-color: transparent;
}
/ darken some of the distinguished background colors /
/ node.css /
.preview .node {
background-color:#333;
}
/ dblog.css */
tr.dblog-user {
background: #808049;
}
tr.dblog-user .active {
background: #6F6F46;
}
tr.dblog-content {
background: #494980;
}
tr.dblog-content .active {
background: #3E3E6F;
}
tr.dblog-page-not-found, tr.dblog-access-denied {
background: #498049;
}
tr.dblog-page-not-found .active, tr.dblog-access-denied .active {
background: #3E6F3E;
}
tr.dblog-error {
background: #803F3F;
}
tr.dblog-error .active {
background: #6F3535;
}
Comments
looks great
Hi matt,
Now setting up colours we be so much easier thanks!
Marcus
This should be included in
This should be included in zen as "dark-background.css", with the php line included, but commented out.
It'd be far better if this could be included BEFORE the main theme stylesheet, so that it doesn't over-ride user styles. I guess it can always be copied into the main stylesheet.
Here's my version, with everything darkened, instead of transparent (you can make the comments work with a backslash before the *):
/* This stylesheet is for the Drupal Zen SARTERKIT theme. It contains the
necessary color changes and overrides to convert the stock starter theme
to a "LIGHT ON DARK" starting point by overriding offensive Drupal Default
styles. Stylesheets being overridden are noted.
by MattRock [http://mattrock.net] and naught101 [http://e-geek.com.au] */
/* system.css */
/* Generic tables: darker greys. */
table tr.odd {
background: #222;
}
table tr.even {
background: #333;
}
/*Darken backgrounds */
td.active, tr.drag, tr.drag-previous {
background-color: #444;
}
.error, div.error, tr.error {
background-color: #400;
color: #eba;
}
.warning, div.warning, tr.warning {
color: #eda;
}
.ok, div.ok, tr.ok {
color: #cfa;
}
/*blocks.css*/
.block-region {
background-color:#554411;
}
/*
The following code does nothing more than to remove the
default menu graphics. The default graphics are all black */
/* system menus.css */
li.expanded, li.collapsed, li.leaf {
list-style-image: none;
}
li a.active {
color: #f90;
}
td.menu-disabled {
background: #ccc;
}
/* substitude some border colors instead of background colors */
/* admin.css */
table.system-status-report tr.error, table.system-status-report tr.error th {
border-color: #ebb;
}
table.system-status-report tr.warning, table.system-status-report tr.warning th {
border-color: #eeb;
}
table.system-status-report tr.ok, table.system-status-report tr.ok th {
border-color: #beb;
}
/* update.css */
.update tr.error, .update tr.ok {
border-color: #f00;
}
.update tr.error .version-recommended {
border-color: #600;
background-color: #400;
}
.update tr.ok {
border-color: #1f1;
background-color: #031;
}
.update tr.warning {
border-color: #ff1;
background-color: #740;
}
.update tr.warning .version-recommended {
border-color: #ff2;
background-color: #740;
}
.update .security-error, .update table.version-security .version-title {
color:#F00;
}
/* darken some of the distinguished background colors */
/* node.css */
.preview .node {
background-color:#333;
}
/* dblog.css */
tr.dblog-user {
background: #808049;
}
tr.dblog-user .active {
background: #6F6F46;
}
tr.dblog-content {
background: #494980;
}
tr.dblog-content .active {
background: #3E3E6F;
}
tr.dblog-page-not-found, tr.dblog-access-denied {
background: #498049;
}
tr.dblog-page-not-found .active, tr.dblog-access-denied .active {
background: #3E6F3E;
}
tr.dblog-error {
background: #803F3F;
}
tr.dblog-error .active {
background: #6F3535;
}
Zen Midnight does this. It's
Zen Midnight does this. It's basically STARTERKIT with an additional midnight.css stylesheet for darkening colors of core modules, plus some darker or inverted versions of various interface element images. Check it out - it looks like we're duplicating work here.
EDIT: Just noticed the OP is from March last year. Oops.
The Boise Drupal Guy!