3. How to use color from theme?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to use color from theme?

  • L

    I have a nice light and dark theme from the theme roller.
    They are in separate folders, both are named “onsen-css-component.css”.
    To switch themes during runtime, I change the folder name in the attribute “href” in the page header. Works great!

    But I have some divs and other stuff which I would like to manually assign colors from the current theme.
    For example, some text should be highlighted with whatever the color for “highlight” or “second highlight” is in the current theme css.
    So essentially I am looking for

    <div style="font-color: USE_THE_HIGHLIGHT_COLOR_FROM_THE_CURRENT_THEME_CSS;">Text to highlight</div>

    I found many posts about altering the theme, but none about manually applying colors from the theme.
    Is that possible?
    Thanks in advance…

    0
  • E
    administrators

    I think you would need to make a CSS variable with the style you want and then in the Onsen styles, use the variable instead of the hard-coded value. But AFAIK with plain CSS there isn’t a way to pull specific styles from a rule

    0
  • L

    Thanks for your help. I was confused by the way the css is created/compiled/augmented, and focussed on the “onsen-css-component.css” file.
    I discovered now that there is another file in the .zip the theme roller creates: theme.css.
    All colors are neatly defined as css vars in there. Using them is as simple as

    <div style="font-color: var(--highlight-color);">Text to highlight</div>

    And here is how I switch the css files:

    function switchTheme(theme) {
    var cssPath = "css/onsen-css-theme-light/"; //folder created with theme roller + renamed
    if (theme == 'dark') {
      cssPath = "css/onsen-css-theme-dark/"; //folder created with theme roller + renamed
    }
    const fullThemeComponentsPath = cssPath + "onsen-css-components.css";
    document.querySelector('#themeComponents').setAttribute('href', fullThemeComponentsPath);
    const fullThemeColorsPath = cssPath + "theme.css";
    document.querySelector('#themeColors').setAttribute('href', fullThemeColorsPath);
    window.localStorage.setItem(Constants.kLastThemeChoice, theme); //switch the theme from this local storage item on init etc.
  }

    Works well for me. Hope that helps someone.
    l

    0