title: Magenta CSS
link: http://jj.isgeek.net/2011/03/magenta-css/
author: Jj
description: 
post_id: 655
date: 2011/03/20 17:59:51
created_gmt: 2011/03/20 22:59:51
comment_status: open
slug: magenta-css

<!--When setting a background color always set a foreground color-->

> When setting a background color always set a foreground color

I like to use a white over black GTK theme in Linux, it looks like this: 

![GTK Darklooks](/uploads/2011/03/captura_20110320-1654531.png)

Which can be a problem when websites are not styled properly by setting only either a background or foreground color making the controls unusable under certain system configurations: 

![](/uploads/2011/03/captura_20110320-165438.png) ![](http://jj.isgeek.net/uploads/2011/03/captura_20110320-165556.png)

To prevent that, I just made [Magenta CSS](http://isgeek.net/magenta/). It is a CSS framework that will turn [all elements' background and foreground color to magenta](http://isgeek.net/magenta/sample.html) so you can see when you forgot to style something. 

To use it, simply add magenta.css before your site's main CSS, it can be either before or after your reset.css. 

![Magenta sample page](/uploads/2011/03/captura_20110320-175839.png)[ ![](http://jj.isgeek.net/uploads/2011/03/captura_20110320-175843.png)](http://isgeek.net/magenta/sample.html)

* * *

I know that there's only a very small set of cases when using braindead css patterns results in unusable controls. The specific case being Firefox, Webkit browsers automatically set input's default background to white. But I use Firefox and I set inverted colors in my system. That's whey I had to come up with this ;) .