Yin & Yang: The dark side of Zen
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;
}
looks great
Hi matt,
Now setting up colours we be so much easier thanks!
Marcus