Wallet Visual Customization

Setup

We can establish global CSS variables that would allow us to use those variables in the different components, to make them customizable and dynamic

Example:

    const myColor = 'black'
    const footerH = '500px'
    const styles = document.documentElement.style
    styles.setProperty('--main-color', myColor)
    styles.setProperty('--footer-height', footerH)

This way we can create dynamic variables to change different CSS properties, to see the use of the global variables we can check the the /components/app-colors.css

Example:

    const body = document.getElementsByTagName('body')
    body[0].style.fontFamily = 'Courier New'
    body[0].style.fontSize = '25px'

This way we could change some styles of everything covered by the <body> 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';

        }

        # layout.css

        .version-status div{
           color: var(--warning-alert-txt-color);
           background-color: var(--warning-alert-bg-color);
        }

        # 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')

1.7 KiB Raw Blame History

Wallet Visual Customization

Setup

Example:

Example:

Example:

1.7 KiB

Raw Blame History