[Feature] Tweek a theme without rebuild. custom theme subfolder, or custom.css

[dkebler]

I see there is a a /src/assets/scss/theme/custom folder I want to tweek the colors of a theme a bit without having to build my own. does the current build look for folder in the user config with such customizations?, like ~/.config/MQTTX/theme/custom in linux?

If not then I guess this is a feature request and I'll just have to build my own in the meantime.

Always a good idea is to read a custom.css file (last) f it exists (in user folder) that way any css can be tweeked. I do that with any frontend I write (and use vuejs/quasar)

FYI, The issue I have with your supplied themes is not enough contrast for my old eyes. I can't easily focus/read the fields against the backgroud since they are basically the same color/shade :-). Always a good idea to supply a high contrast theme for ADA accesibility.

BTW MQTTX is the BEST client I've found since the demise of MQTTBox. WIth the tweek of the theme it will be just as good for my purposes....thx!

[ysfscream]

Hi! @dkebler Sorry for my late reply, I am on vacation these days and thank you very, very much for your high evaluation of MQTTX.

Maybe you mean to add a custom theme color function? Customize like in VsCode? If so, it would be a very good suggestion. But it may take a while to implement it.

If it affects your use at present, you can add a custom theme color scss file under /MQTTX/src/assets/scss/theme path, and submit a PR. Hope enjoy! Any questions we can discuss here! :)

[dkebler]

Like this custom.css file https://geekdocs.de/usage/color-schemes/ This works perfect for me to tweek a theme.

I assume you are making an electron app. In which case the folder/file it looks for must be in the user space outside the app.

I use this (by sindresorhus!!) to determine the proper place for that folder OS independent https://github.com/sindresorhus/env-paths

but you might be using it or someting similar as MQTTX created a MQTTX folder in my ~/.config which would then be the place for a such custom.css file.

In addition, when I get a chance, I'll make a few scss themes so users have a few more options.

[dkebler]

ctrl-shift+i or under view was supposed to bring up dev tools but it doesn't. Need that to inspect the css

[ysfscream]

OK, this is a great suggestion. I try to implement it in a way I understand. If you want, you can directly start the development, we will implement it together. Haha

[ysfscream]

ctrl-shift+i or under view was supposed to bring up dev tools but it doesn't. Need that to inspect the css

Are you talking about the production environment? If it is, it will not be able to open dev tool. If it is a development environment, it will be opened automatically after running.

[dkebler]

Oh, I guess one might not want to allow dev tools in a production build although for MQTTX I think that's not a security issue.

For example, Joplin provides their electron app with a "developer" setting which enables opening dev tools.
https://discourse.joplinapp.org/t/solved-option-control-of-appearance-of-sidebar-note-list-font-size-and-theme/6332/8?u=dkebler

In fact what I did with custom css within Joplin (an electron app) provides a better example of the feature. In that same post was where I learned to so this. I think it can be done a bit more seamlessly like geekdocs as far as incorporating a custom.css

So beyond a provided custom.css "template" that should list likely classes, tags, ids to tweek (like geekdocs did) one will need to be able to use dev tools to inspect the css (like is available for Joplin).

I can take a stab at this but it might not be for a few weeks. So assuming no rush you @ysfscream can wait to see if I come up with someting before spending any time on this.