Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to use CSS Vars?



  • Hello, i am using .CSS file in my project, and now i want to use CCS Vars. I already tried:
    Test 1:
    @const THEME_DARK_COLOR: #00FFAA
    QLabel#Lbl1 {
    color: @THEME_DARK_COLOR;
    }
    Result: Nothing.

    Test2:
    :root{
    -THEME-DARK-COLOR: #00FFAA;
    }
    QLabel#Lbl1 {
    color: var(-THEME-DARK-COLOR);
    }

    Result: The label does not appear.

    Test 3:
    :root{
    --THEME-DARK-COLOR: #00FFAA;
    }
    QLabel#Lbl1 {
    color: var(--THEME-DARK-COLOR);
    }

    Result: Error on apply the style.css.

    So my question is, how is the right method to use variables on CSS ?
    Thanks a lot.


  • Moderators

    @LeandroTeixeira said in How to use CSS Vars?:

    how is the right method to use variables on CSS ?

    Widget stylesheets only support CSS 2.1. Unfortunately, CSS variables (custom properties) were introduced in CSS 3.



  • @LeandroTeixeira said in How to use CSS Vars?:

    So my question is, how is the right method to use variables on CSS ?

    There isn't such a facility in CSS 2.1. It has always been an irritatingly-missing feature, it's interesting to see @JKSH says it has been introduced in CSS 3 (though no use for Qt).

    The usual way to implement this in Qt is to pre-process the CSS (e.g. read from an external) file before applying it in your application. Put things in you can recognise and do necessary replacements.



  • Thanks for the fast response. I will go on with my style.css without using variables.


Log in to reply