Theme

The UV uses bower to manage themes. If you look in the lib directory, you can see the default themes installed. After installing they are copied to the src/themes directory.

These are named after the locale they support as each language has its own unique screen real-estate and text-flow requirements.

Fork the uv-en-GB-theme to your Github profile and clone it to your desktop as you normally would for any Github repo.

Back in the UV project, update bower.json to include the path to your forked theme, e.g:

"dependencies": {
    "uv-cy-GB-theme": "UniversalViewer/uv-cy-GB-theme",
    "uv-en-GB-theme": "mygithubprofile/uv-en-GB-theme"
}

Delete the src/themes/uv-en-GB-theme directory.

Now run:

bower update

grunt sync:bowerComponents

and:

grunt examples

You will notice a cog icon for settings in the top-right corner of the viewer. Let's change this to a different icon.

Back in your forked uv-en-GB-theme project, open /header-panel.less

Notice the commented-out line:

//background: url('@{theme-img-path}hamburger.png');

This line overrides the background image of the settings button, setting it to img/hamburger.png.

Uncomment it.

Commit your changes to the forked theme and push.

Now return to the UV project and run:

bower update

grunt sync:bowerComponents

This will get the latest copy of your theme and copy it to src/themes.

Now run:

grunt

When finished compiling, refresh http://localhost:8001/examples/. You should now see the hamburger icon in the top-right corner instead of the cog.

Let's try altering the colour scheme. In variables.less in your forked theme, you should see this line:

//@brand-primary:                 #cc00aa;

Uncomment it. This will set the @brand-primary colour to magenta.

Also add:

@brand-secondary:               #ff98ee;

Commit and push your changes, then return to the UV project and run:

bower update

grunt sync:bowerComponents

grunt

Refresh http://localhost:8001/examples/ to see magenta and pink buttons!

Themes are simply overrides for existing styles bundled with the UV in

https://github.com/UniversalViewer/universalviewer/tree/master/src/modules/uv-shared-module

Take a look at these files to understand what other images, colours, and sizes can be overridden.