Ir para o conteúdo

Python e QT 6: Formas de configurar o tema Material do QML

PySide6 QML tema Material no Microsoft Windows

Existem diversas formas de realizar a configurações do tema Material, esse texto descreve algumas dessas formas.

Propriedades para o arquivo QML

Parâmetros:

  • accent.
  • background.
  • elevation.
  • foreground.
  • primary.
  • theme. Light (Tema padrão), Dark, System (tema do sistema operacional).

Exemplo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.12

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Violet

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Pequeno") }
        RadioButton { text: qsTr("Médio");  checked: true }
        RadioButton { text: qsTr("Grande") }
    }
}

nota

A configuração de estilo pode ser global ou definida no componente que se deseja personalizar.

Propriedades para o arquivo qtquickcontrols2.conf

Nota

Para que o arquivo qtquickcontrols2.conf funcione o mesmo deve estar listado no arquivo resources.qrc e deve ser gerado o arquivo resources_rc.py.

Parâmetros:

  • Theme.
  • Variant.
  • Accent.
  • Primary.
  • Foreground.
  • Background.

Exemplo:

1
2
3
[Material]
Theme=Dark
Accent=Violet

Propriedades para ambiente virtual

Parâmetros:

  • QT_QUICK_CONTROLS_MATERIAL_THEME.
  • QT_QUICK_CONTROLS_MATERIAL_VARIANT. Valores válidos são: "Normal" ou "Dense".
  • QT_QUICK_CONTROLS_MATERIAL_ACCENT.
  • QT_QUICK_CONTROLS_MATERIAL_PRIMARY.
  • QT_QUICK_CONTROLS_MATERIAL_FOREGROUND.
  • QT_QUICK_CONTROLS_MATERIAL_BACKGROUND.

Exemplo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import sys
import os

from PySide6.QtQuickControls2 import QQuickStyle

# 3 forma de definir o estilo do aplicativo (escolha apenas 1).
sys.argv += ['--style', 'Material']
# os.environ['QT_QUICK_CONTROLS_STYLE'] = 'Material'
# QQuickStyle.setStyle('Material')

# Outras configurações de estilo.
# Não utilizar THEME E BACKGROUND juntos (fica estranho).
os.environ['QT_QUICK_CONTROLS_MATERIAL_THEME'] = 'Dark'
# os.environ['QT_QUICK_CONTROLS_MATERIAL_VARIANT'] = 'Dense'
# os.environ['QT_QUICK_CONTROLS_MATERIAL_ACCENT'] = 'Orange'
# os.environ['QT_QUICK_CONTROLS_MATERIAL_PRIMARY'] = 'DeepOrange'
# os.environ['QT_QUICK_CONTROLS_MATERIAL_FOREGROUND'] = 'Red'
# environ['QT_QUICK_CONTROLS_MATERIAL_BACKGROUND'] = 'LightBlue'

Python

Definindo o estilo

1
2
3
4
# 3 forma de definir o estilo do aplicativo (escolha apenas 1).
sys.argv += ['--style', 'Material']
os.environ['QT_QUICK_CONTROLS_STYLE'] = 'Material'
QQuickStyle.setStyle('Material')

Variáveis de ambiente

1
2
3
4
5
6
7
# Não utilizar THEME E BACKGROUND juntos (fica estranho).
os.environ['QT_QUICK_CONTROLS_MATERIAL_THEME'] = 'Dark'
os.environ['QT_QUICK_CONTROLS_MATERIAL_VARIANT'] = 'Dense'
os.environ['QT_QUICK_CONTROLS_MATERIAL_ACCENT'] = 'Orange'
os.environ['QT_QUICK_CONTROLS_MATERIAL_PRIMARY'] = 'DeepOrange'
os.environ['QT_QUICK_CONTROLS_MATERIAL_FOREGROUND'] = 'Red'
# os.environ['QT_QUICK_CONTROLS_MATERIAL_BACKGROUND'] = 'LightBlue'

Cores

O tema Material fornece algumas cores pré definidas.

Material

  • Material.Red: #F44336.
  • Material.Pink: #E91E63 (Cor padrão para accent).
  • Material.Purple: #9C27B0.
  • Material.DeepPurple: #673AB7.
  • Material.Indigo: #3F51B5 (Cor padrão para primary).
  • Material.Blue: #2196F3.
  • Material.LightBlue: #03A9F4.
  • Material.Cyan: #00BCD4.
  • Material.Teal: #009688.
  • Material.Green: #4CAF50.
  • Material.LightGreen: #8BC34A.
  • Material.Lime: #CDDC39.
  • Material.Yellow: #FFEB3B.
  • Material.Amber: #FFC107.
  • Material.Orange: #FF9800.
  • Material.DeepOrange: #FF5722.
  • Material.Brown: #795548.
  • Material.Grey: #9E9E9E.
  • Material.BlueGrey: #607D8B.

Material (Dark)

  • Material.Red: #EF9A9A.
  • Material.Pink: #F48FB1 (Cor padrão para accent).
  • Material.Purple: #CE93D8.
  • Material.DeepPurple: #B39DDB.
  • Material.Indigo: #9FA8DA (Cor padrão para primary).
  • Material.Blue: #90CAF9.
  • Material.LightBlue: #81D4FA.
  • Material.Cyan: #80DEEA.
  • Material.Teal: #80CBC4.
  • Material.Green: #A5D6A7.
  • Material.LightGreen: #C5E1A5.
  • Material.Lime: #E6EE9C.
  • Material.Yellow: #FFF59D.
  • Material.Amber: #FFE082.
  • Material.Orange: #FFCC80.
  • Material.DeepOrange: #FFAB91.
  • Material.Brown: #BCAAA4.
  • Material.Grey: #EEEEEE.
  • Material.BlueGrey: #B0BEC5.

Material (Shades)

  • Material.Shade50.
  • Material.Shade100.
  • Material.Shade200.
  • Material.Shade300.
  • Material.Shade400.
  • Material.Shade500.
  • Material.Shade600.
  • Material.Shade700.
  • Material.Shade800.
  • Material.Shade900.
  • Material.ShadeA100.
  • Material.ShadeA200.
  • Material.ShadeA400.
  • Material.ShadeA700.

Comentários