Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Qt Sass #137

Closed
goanpeca opened this issue Apr 22, 2019 · 4 comments · Fixed by #138
Closed

Using Qt Sass #137

goanpeca opened this issue Apr 22, 2019 · 4 comments · Fixed by #138
Assignees
Milestone

Comments

@goanpeca
Copy link
Collaborator

goanpeca commented Apr 22, 2019

In order to clean up definition of styles (maybe make this package more generic), we could use https://github.com/spyder-ide/qtsass so that instead of hardcoding variables within the QSS, we could define SASS variables that would be used afterwards. By doing this, we could also "on the fly" generate custom stylesheets by changing these variables (either by simple line, search and replace) or by other method.

I am suggesting this now that we need to be able to access the color variables directly from python code.

@goanpeca
Copy link
Collaborator Author

goanpeca commented Apr 22, 2019

Something like:

qdarkstyle/qss/_colors.scss

// Selection
$sel_light:  #148CD2;  // (selection/hover/active)
$sel_normal: #1464A0;  // (selected)
$sel_dark:   #14506E;  // (selected disabled)

// Foreground
$for_light:  #F0F0F0;  // (texts/labels)
$for_dark:   #787878;  // (disabled texts)

// Background
$bac_light:  #505F69;  // (unpressed)
$bac_normal: #32414B;  // (border, disabled, pressed, checked, toolbars, menus)
$bac_dark:   #19232D;  // (background)
qdarkstyle/qss/_styles.scss

/* QWidget ---------------------------------------------------------------- */

QWidget {
    background-color: $bac_dark;
    border: 0px solid $bac_normal;
    padding: 0px;
    color: $for_light;
    selection-background-color: $sel_normal;
    selection-color: $for_light;


    &:disabled {
        background-color: $bac_dark;
        color: $for_dark;
        selection-background-color: $sel_dark;
        selection-color: $for_dark;
    }

    &:item {

        &:selected {
            background-color: $sel_normal;
        }

        &:hover {
            background-color: $sel_light;
            color: $bac_normal;
        }
    }
}
...

And then compile this file:

qdarkstyle/qss/main.scss

@import 'colors';
@import 'styles';

@dpizetta
Copy link
Collaborator

Hi @goanpeca, yeah, I was looking into this SASS, and this is much better. This is planned to integrate the v3.0. Unfortunately, I'm a little busy with other projects right now, so some delay is predicted.

@goanpeca
Copy link
Collaborator Author

I already started working on this. I can submit a PR

@dpizetta
Copy link
Collaborator

Perfect! Thank you!

@dpizetta dpizetta added this to the 2.7 milestone May 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants