Step-by-Step Instructions to create a new theme in Hybris

• Create a new theme directory in the store front project’s web/webroot/_ui/desktop with name theme- for eg. theme-orange. Or you can copy an existing theme directory and modify it
• Create web/webroot/WEB-INF/messages/theme--desktop.properties file and add all the image names. See an existing theme property to find the property key values
• Register the theme in the db via impex files(themes.impex & themes_en.impex) in the directory resources//import/common/ which is there in the core project
• To add stylesheets for some google webfonts, modify web/webroot/WEB-INF/tags/desktop/template/styleSheets.tag to add a link to some nicer font (just before the last tag in the file): for eg.

          <%-- google webfonts --%>
          <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
          <cms:previewCSS cmsPageRequestContextData="${cmsPageRequestContextData}" />

• Change CSS file web/webroot/_ui/desktop/theme-/css/changes.css to use the above font(Lato)
• Update essentialdata or import the two impex files from above manually in the hac
• After update go to hmc
• Select WCMS/website
• Select the site
• Change the theme to new value
• Open the storefront file in a browser and you can see the new theme applied