Ways to implement dark mode for QML GUI

[MattC24]

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!!

[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.

[MattC24]

@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.