I have to admit: I am lazy
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.