Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Ways to implement dark mode for QML GUI
Forum Updated to NodeBB v4.3 + New Features

Ways to implement dark mode for QML GUI

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 1.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MattC24
    wrote on last edited by
    #1

    I have tried to google to come up with solutions for implementing a dark mode for a GUI app. I have several UI.qml for the different screens/pages of the app. Also, I have strict guidelines on what colors need to be used for light/dark mode.

    My first thought:

    Have a toggle button on the home screen when toggled changes a boolean (let's call it darkMode) to TRUE. Therefore, I can just conditional expressions for colors (i.e text.color: darkMode ? white : black). That worked for the homescreen.ui.qml but how would I get that changed to all of the other UI screens (which is where I am currently stuck. )

    Second thought:

    Make another set of Ui.qml pages and some how load those when dark mode is enabled? Again, not sure how to implement that but was just brainstorming.

    Does anyone have any suggestions or experience in dealing with needing light/dark mode? Any help is appreciated!!

    1 Reply Last reply
    0
    • D Offline
      D Offline
      dev_x
      wrote on last edited by
      #2

      I'm newbie, all I can do is pitch some ideas. You can use a variable that is updated with the button as you described. That's a quick color change for user. Another idea is having a settings page where user can define dark mode and those settings are saved. Check 'component on complete, get settings' and 'component on destruction - save settings). And based on those values load the colors. You really shouldn't create new pages just because of color change imo.

      M 1 Reply Last reply
      0
      • D dev_x

        I'm newbie, all I can do is pitch some ideas. You can use a variable that is updated with the button as you described. That's a quick color change for user. Another idea is having a settings page where user can define dark mode and those settings are saved. Check 'component on complete, get settings' and 'component on destruction - save settings). And based on those values load the colors. You really shouldn't create new pages just because of color change imo.

        M Offline
        M Offline
        MattC24
        wrote on last edited by
        #3

        @dev_x Thanks for your suggestion! I think that's the route I'm going to take since making new screens seems more work than necessary.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved