2020-08-07 02:19:16 -04:00
# Wallet Visual Customization
[](https://psfoundation.cash/)
# Setup
2020-08-08 07:55:43 -07:00
> We can establish global CSS variables that would allow us to use
> those variables in the different components, to make them
2020-08-07 02:19:16 -04:00
> customizable and dynamic
### Example:
2020-08-08 07:55:43 -07:00
```
2020-08-07 02:19:16 -04:00
const myColor = 'black'
const footerH = '500px'
const styles = document.documentElement.style
styles.setProperty('--main-color', myColor)
styles.setProperty('--footer-height', footerH)
```
2020-08-08 07:55:43 -07:00
This way we can create dynamic variables to change different CSS
properties, to see the use of the global variables we can check
2020-08-07 02:19:16 -04:00
the the [/components/app-colors.css ](https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet/blob/master/src/components/app-colors.css )
### Example:
```
const body = document.getElementsByTagName('body')
body[0].style.fontFamily = 'Courier New'
body[0].style.fontSize = '25px'
```
2020-08-08 07:55:43 -07:00
This way we could change some styles of everything covered by the `<body>`
2020-08-07 02:19:16 -04:00
tag, it is basically the whole app.
### Example:
The following example is to customize the color of the warning message:
```
# app-color.css
:root {
--warning-alert-bg-color:'red';
--warning-alert-txt-color:'white';
2020-08-08 07:55:43 -07:00
2020-08-07 02:19:16 -04:00
}
2020-08-08 07:55:43 -07:00
2020-08-07 02:19:16 -04:00
# layout.css
2020-08-08 07:55:43 -07:00
2020-08-07 02:19:16 -04:00
.version-status div{
color: var(--warning-alert-txt-color);
background-color: var(--warning-alert-bg-color);
}
2020-08-08 07:55:43 -07:00
2020-08-07 02:19:16 -04:00
# JS
// We change the values of the CSS variables
const styles = document.documentElement.style
styles.setProperty('--warning-alert-bg-color', 'white')
styles.setProperty('--warning-alert-txt-color', 'black')
```
