Custom Color Theme
- Download the template and host it locally on your web server.
- Open the images folder and copy one of the existing named color folders (blue, purple, green etc) to a new folder. Name this folder with your new color scheme. In this example the new theme is named calcite.
- Open each of the images in the new folder in an image editor like PhotoShop or Gimp and modify the image to fit your new color scheme.
- In the css folder copy one of the existing named color css files to a new file and give it the name of your new color scheme.
- Open the new css file, in this example calcite.css in your favorite text editor and do a find/replace to replace the old color scheme name with your new one. In this example we copied the green.css file so we want to replace all instances of green with calcite. Save the updates.
- Now you need to update all the colors in the css file with your new color scheme. In the basic viewer css files colors are specified using Hex values. Hex values can be three or six digit values preceded by a # sign. For example: #CCC or #DCF09A. You can use a color generator to generate new hex values for your colors. Once you've updated all the values save the css file.
- Open the index.html file and enter your value for the theme option. In our example we'll set the new theme value to be 'calcite'.
- Save your changes and run the application to see your new color scheme.
