UI Customizations
Inji Web is built using tailwind CSS library.
Below sections provides instructions on how themes can be customized in Inji Web application.
Steps:
InjiWeb uses two different files to handle the customization in UI.
1. tailwind.config.js:
Here, properties related to the font and colors for each component is maintained.
```jsx
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
content: [
"./src/**/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily:{
base: 'var(--iw-font-base)',
},
colors: {
iw: {
background: 'var(--iw-color-background)',
header: 'var(--iw-color-header)',
footer: 'var(--iw-color-footer)',
title: 'var(--iw-color-title)',
subTitle: 'var(--iw-color-subTitle)',
searchTitle: 'var(--iw-color-searchTitle)',
primary: 'var(--iw-color-primary)',
helpAccordionHover: 'var(--iw-color-helpAccordionHover)',
shadow: 'var(--iw-color-shadow)',
spinningLoaderPrimary: 'var(--iw-color-spinningLoaderPrimary)',
spinningLoaderSecondary: 'var(--iw-color-spinningLoaderSecondary)',
navigationBar: 'var(--iw-color-navigationBar)',
languageGlobeIcon: 'var(--iw-color-languageGlobeIcon)',
languageArrowIcon: 'var(--iw-color-languageArrowIcon)',
languageCheckIcon: 'var(--iw-color-languageCheckIcon)',
closeIcon: 'var(--iw-color-closeIcon)',
searchIcon: 'var(--iw-color-searchIcon)',
tileBackground: 'var(--iw-color-tileBackground)',
shieldSuccessIcon: 'var(--iw-color-shieldSuccessIcon)',
shieldErrorIcon: 'var(--iw-color-shieldErrorIcon)',
shieldLoadingIcon: 'var(--iw-color-shieldLoadingIcon)',
shieldSuccessShadow: 'var(--iw-color-shieldSuccessShadow)',
shieldErrorShadow: 'var(--iw-color-shieldErrorShadow)',
shieldLoadingShadow: 'var(--iw-color-shieldLoadingShadow)',
}
}
},
},
plugins: [require('tailwindcss-rtl')],
}
```
2. index.css
* This file maintains the css properties for each theme in the css variables.
* During the deployment, the theme properties will get applied based on the theme selected.
```jsx
@layer base {
:root {
--iw-font-base: "Inter", sans-serif;
--iw-color-background: #FFFFFF;
--iw-color-header: #000000;
--iw-color-shieldLoadingIcon: #ff914b;
--iw-color-shieldSuccessShadow: #f1f7ee;
--iw-color-shieldErrorShadow: #FEF2F2;
--iw-color-shieldLoadingShadow: #f6dfbe;
}
.purple_theme {
--iw-font-base: "Gentium Plus", serif;
--iw-color-background: #bcaaf3;
--iw-color-header: #8f69ec;
--iw-color-shieldErrorIcon: #4518de;
--iw-color-shieldLoadingIcon: #5b32f1;
--iw-color-shieldSuccessShadow: #f1f7ee;
--iw-color-shieldErrorShadow: #FEF2F2;
--iw-color-shieldLoadingShadow: #f6dfbe;
}
}
```
Setting Defaults for Inji Web Application :
In the env.config.js file, below properties is used to customize the application during the deployment.
```jsx
window._env_ = {
...
DEFAULT_LANG: "en",
DEFAULT_THEME: "",
DEFAULT_TITLE: "Inji Web",
...
};
```
DEFAULT_THEME: This property helps you to customize the theme, currently Inji Web Supports two different Themes
1. Default Theme - “”
2. Purple Theme - “purple_theme”
DEFAULT_LANG: - This property helps you to specify the default language during the deployment.
DEFAULT_TITLE: - This property helps you to specify the default title of the INJIWEB during the deployment.
Last updated
Was this helpful?