Color Schemes for a Theme

A color scheme is used to crate different style and appeal for the same theme.In the precious post i created the GreenTheme. For that one lets create a two different  color_schemes as follows.

Steps to create Color Schemes

---

1. Open GeenTheme in project explorer
2. Create color_schemes folder under docroot/_diffs/css
3. I to add two flavors to a theme
           dark.css
           light.css
So create two css files dark.css and light.css files under docroot/_diffs/css/color_schemes
4. Open liferay-look-and-feel.xml and add the following lines under the <theme> tag

.........
.........

 default


 dark


 light

..........
..........

5. Now open dark.css under docroot/_diffs/css/color_schemes and add the following styles

@import "compass";

.aui .dark{
 background: #60CDB5;
 color:#FFF;
 /* ---------- Nav#Navigation ---------- */

 #breadcrumbs {
  padding-left: 10px;
 }

 #navigation {
  .navbar-inner {
   background: #2F2F2F;

   .nav > li > a {
    color: #E3E3E3;
   }
  }
 }
}

I just changed the background of body and Navigation.You can modify as you need.

6. Make sure that the dark.css and light.css has to import in custom.css which is under docroot/_diffs/css/custom.css

.........
.........
@import url(color_schemes/dark.css);
@import url(color_schemes/light.css);
.........
.........

7. Now deploy the theme by running ant-deploy
8. Let's test now in the browser.
    Goto an organization and SignIn as Adminisrator
  http://localhost:8686/web/liferaygnosis/home
9. Goto SiteAdministration under Admin controls
10. Under Look and Feel you can see the flavors of a theme if you have applied the GreenTheme to the organization


11. Choose dark flavor and click on Save.Now click on View Pages in this screen only,It navigates to the organization.



12. If you observe the choosing the theme flavor  image there is no thumbnail for dark and light flavor.

Creating a Thumbnail for Theme Flavors

---

1. Create color_schemes folder under docroot/_diffs/images
2. Create two folders with names given in the <css-class>dark</css-class> tag.Lets
    give folder names as dark and light
3. Place one image in the each of the folders which its name should be thumbnail.png
4. Now run the ant-deploy and check it now.

Now we can see the thumbnail image for dark flavor.