Customizing the User Portal UI¶
From WSO2 Identity Server 5.10.0 onwards, a new user portal has been introduced which is the successor to the dashboard. It also adheres to the UI extensions scheme introduced with WSO2 Identity Server 5.9.0 to use a centralized theming for all the front-end portals.
Let's see how we can customize the theming of the user portal.
Changing the default theme to dark mode¶
Info
A customized version of the default theme in the Semantic UI LESS package has been used to achieve the look and feel of the user portal.
Check the Semantic UI documentation if you wish to learn more about Semantic UI theming.
Before you begin
-
Check out the corresponding identity apps source code from the repo and set it up in the development environment. You can check out the
v1.0.72
tag sincev1.0.72
of identity-apps was used in IS 5.10.0$ git fetch --all --tags --prune $ git checkout tags/v1.0.72 -b feature-dark-theme-demo
-
Navigate to the
modules/theme/src/themes
folder inside identity-apps. All the theme global variable overrides can be found inmodules/theme/src/themes/default/globals/site.variables
file. For the full set of variables, see the original theme variables file.
Step 1: Changing the primary color of the portal¶
In order to change the primary color of the portal, you need to override the variables in site.variables
.
- Add a new color under the site colors and let’s call it
facebookBlue
./*------------------- Site Colors --------------------*/ @facebookBlue : #2d88ff;
- Now change the primary color variable.
/*------------------- Brand Colors --------------------*/ @primaryColor : @facebookBlue;
- Next, change the page background color from white to dark gray and change the default text color to a
lighter shade. Add a new variable under the brand colors and let’s call it
globalBackgroundColor
./*------------------- Brand Colors --------------------*/ @globalBackgroundColor: #18191a;
- Override the
@pageBackground
variable./*------------------- Page --------------------*/ @pageBackground : @globalBackgroundColor; @textColor : #e4e6eb;
-
Build the theme module by running the following command and check the results reflected on the dev server.
You will see something like the following.# from inside `modules/theme` $ npm run build
As seen in the image above, the background color of the header, footer, side navigation, and content cards need to be changed.
-
In order to change the header and footer background colors, add a new variable to the
modules/theme/src/themes/default/collections/menu.variables
file under the brand "colors". Let's call the variableglobalForegroundColor
.@background: @globalForegroundColor;
-
Change The side panel background in the
modules/theme/src/themes/default/collections/menu.overrides
file..ui.vertical.menu { &.side-panel { background: @globalBackgroundColor; // Other styles } }
-
Modify the content card background color in the
modules/theme/src/themes/default/views/card.variables
file.
You can check the status by rebuilding the theme module. The changes should be reflected on the running dev server in no time. A sample screen of the new theme is shown below.@background: @globalForegroundColor;
Step 2: Changing the branding¶
Now that the styling is complete, let’s change the product branding.
- Change the product logo.
Use one of the following methods to change the product logo.
### Method 1 (Recommended)
If you wish to change the logo without touching the compiled javascript bundle, you can do the following to
override the existing WSO2 logo using CSS.
1. Download an icon from [Flaticon.com](https://www.flaticon.com/) such as `owl.svg` and add it to the
`modules/theme/src/themes/default/assets/images` folder.
2. Open `modules/theme/src/definitions/globals/product.less` file and replace the existing styles in .product-logo
class with the following.
```java
.product-title {
.product-logo {
width: 25px;
height: 25px;
vertical-align: text-top;
margin-right: 5px;
background: url(assets/images/owl.svg) no-repeat;
background-size: auto;
svg {
display: none;
}
}
// Other styles
}
```
### Method 2
1. Download an icon from [Flaticon.com](https://www.flaticon.com/) such as `owl.svg` and add it to the
`modules/theme/src/themes/default/assets/images` folder.
2. Open the `modules/theme/src/index.js` file and replace `Logo` with the path to the new icon.
```java
export const Logo = require("../lib/assets/images/owl.svg");
```
3. Build user-portal artifacts.
```java
npx lerna run build — scope @wso2is/user-portal
```
4. Copy the `main.js` and `main.js.map` files from the `apps/user-portal/build/user-portal` folder and paste it
inside the **user-portal** web app found in the `<IS_HOME>/repository/deployment/server/webapps/user-portal` folder.
-
Change the product title & copyright.
Add the following entries to the
runConfig
window object in the<IS_HOME>/repository/deployment/server/webapps/user-portal/index.jsp
file.window["runConfig"] = { ... applicationName: "NIGHT OWL EXPRESS", copyrightText: "Night Owl Express © 2020" };
-
Change the Favicon.
Replace
favicon.ico
in the<IS_HOME>/repository/deployment/server/webapps/user-portal
folder with the desired icon.Tip
If you do not have a favicon already, you can use an online generator like favicon.oi to generate a favicon for free
-
Change the title.
Change the
<title>
tag in the<IS_HOME>/repository/deployment/server/webapps/user-portal/index.jsp
file.<title>Night Owl Express</title>
Step 3: Deploying the changes in the web app¶
The final step of the process is the deployment. Follow the sequence of steps listed below to deploy the changes performed in the previous steps.
- Build the theme module.
# from inside modules/theme $npm run build
-
Copy the artifacts to the web app.
The built artifacts will be available inside the
modules/theme/lib
folder. Copy everything to the clipboard and navigate to the user-portal web app in the IS pack.Warning
Make sure that you keep a backup of the original CSS folder.
The final theme should look similar to following.