Define all styles of your widgets at one place

I have to admit: I am lazy :slight_smile:
That’s why I am posting this in order to share it with other lazy users here.

Background:
If you want to change all elements on your page with regards to background color, font size, highlighted/ active color etc. you need to either change all your widgets or need to jump into all configuration dialogs (if you have defined those styles via props)

I moved on to define all those styles on page level and all elements are referring to that definition so that I only need to adjust it at one position for all elements.

On your page the first line should look like this:

config:
  label: myPage
  style:
    --my-font-size: 1.5vw
    --my-font-color: "#EEEEEE"
    --my-font-color-active: "#00CCFF"
    --my-bg-color: "#223344"
    --my-bg-color-active: "#22334499"
    --my-border-radius: 5px
    background: "#111111"
 blocks:
  - component: oh-block
 ...

In your custom widgets use the following code for setting font-size:

fontSize: var(--my-font-size)

In configuration dialog simply enter this in the field font-size (if available)

var(--my-font-size)

that’s it.

Please note:

  • You have to start the page from sidebar to see the changes (Run Mode does not work)
  • This does not work across pages. so you have to copy the block to all your pages

Maybe in the future we will have a central css file.

4 Likes