Black theme

Flow
1

Hi!
I read in css files that there is a black theme and a blue theme. How can I use it in my application??
Julie

2

Hmm… are you maybe referring to this?

http://vaadin.com/forum/-/message_boards/message/18422#_19_message_18547

It can be tested over here

http://marc.virtuallypreinstalled.com/mork

You’ll get instructions on how to get it from that thread. Directly embedded into Vaadin is only two themes Runo which was toolkit 5 and earlier default, and reindeer, which is Vaadin default.
in application

setTheme("runo");
[/code] and [code]
setTheme("reindeer");
3

Not exactly.

I read in the textfield.css on reindeer theme :


/* Textfield on black background */
.black .v-textfield {
	border-color: #343536;
	border-top-color: #2a2a2b;
	border-bottom-color: #3a3b3c;
	background: #1b1d1e;
	background-image: url(img/bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 22px */
	color: #c9ccce;
	text-shadow: #000 0 0 1px;
}

and


/* Textfield on blue background */
.blue .v-textfield {
	border-color: #92a2aa;
	border-top-color: #7c8a90;
	border-bottom-color: #a1b3bc;
}
4

Just set the style name “black” or “blue” for your main layout.

mainLayout.setStyleName("black");

From there it will cascade to underlying components. It might also work if you set the style name for the main window. I did a quick test with the black style, but it didn’t seem to cascade to all components, at least the tab sheet looked exactly the same to me :-/

5

Ok, it seems like the tab sheet doesn’t have a black theme.


http://demo.vaadin.com/ReindeerTheme

6

Hmm… I did not know of these. The blue theme is actually quite nice.

7

The different colors in reindeer are actually really nice when you combine them in one layout. Maybe having white in the most parts of the app, blue as a hi light color for some part of the UI and back for black dialog boxes…

8

Yep, see my
CommunityNews
 application for an example of combining the different styles.

Own horn: toot :wink:

/Jonatan

9

Thanks!! It works fine!!!