In this tutorial we'll update the application skin using the Theming capabilities.
We'll be using Visual Studio Code as editor and will use the lightweight setup using a fake backend with mock data.
You can find the code for this tutorial here
- You've completed the getting started guide
- You've completed the Change the skin using the Theming capabilities tutorial
- You are familiar with LESS and css
See Starting the application in debug mode.
In order to some more advanced changes to the skin we'll create a new custom less file which we'll load as part of the application. This is considered to be more advanced and requires extra validation when upgrading your application.
- Create a new directory inside the
gui/src
directory calledcustom-styles
- Create a new less file called
skin-overwrites.less
inside this directory - Import
skin-overwrites.less
inside thegui/src/Main.tsx
file
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Components, Services, IState, configureStore } from "@sdl/delivery-ish-dd-webapp-gui";
import { Provider } from "react-redux";
import { Store } from "redux";
import { Route } from "react-router";
// Custom imports
import "./custom-styles/skin-overwrites";
// ...
- Add the following content inside the
skin-overwrites.less
file
@import (reference) "~theme-styles";
.sdl-dita-delivery-app {
.sdl-activityindicator {
filter: grayscale(1);
}
.sdl-dita-delivery-breadcrumbs ul li .separator {
margin-right: 0px;
}
.sdl-button.graphene.sdl-button-purpose-confirm {
&:hover {
opacity: 0.5;
}
}
.sdl-dita-delivery-tile {
background-color: #f6f6f6;
}
}
The styles we've added inside the skin-overwrites.less
will overwrite the styles of the activity indicator, the buttons and the tiles on the home page.
To get access to the mixins / variables defined inside the theming directory, we've added an import on the top @import (reference) "~theme-styles";
.
This import can be used in any less file to get access to the theming API's.
If you end up with a lot of customizations it makes sense to create different less files to have a better overview. For example a less file for the changes on the home page, one for the table of contents, etc...