Support custom themes

[mherrmann]

It's already possible to change font size and face. This should be extended to make it possible to customise the visual appearance much more. The most important thing to change are obviously all colours.

(In implementing this feature, don't forget to make it possible to style the highlight colour of selected items in GoTo on Steroids. One user specifically asked for this.)

[pslobo]

A possible way forward would be to reuse ST themes. At least the specific UI parts that make sense for fman.

[mherrmann]

That's a very interesting idea!

[rendomnet]

Also can we change icons theme?

[mherrmann]

What do you mean by the icons theme @rendomnet?

[rendomnet]

@mherrmann icon theme for folder and files same as in VScode or Atom

[mherrmann]

@rendomnet I'll keep it in mind

[mherrmann]

Hacking around in fman's installation directory, it's currently possible to significantly change the theme through styles.qss. The only thing that apparently can't be changed right now seems to be the central splitter that separates the left and right half.

NB: Changing styles.qss is currently not supported. Only Theme.css (as described here) is supported. styles.qss is overwritten every time fman auto-updates itself. So if you do change it, make sure to keep a backup copy outside of fman's installation directory.

[devmount]

@mherrmann Is there any documentation about all existing CSS classes? The Theme.css only contains a few like .statusbar or .quicksearch-*. What is e.g. the CSS class of the left and right pane?

[mherrmann]

@devmount until the feature described by this issue is implemented, the ones in Theme.css are the only ones that are officially supported. (Sorry.) But you can look at styles.qss to find other internal ones that currently work as well. Do note however that because they are not officially supported, they may break in the future. (Sorry for this too.)

[devmount]

@mherrmann Ok, I thought there would be an easier way to customize the styles than guessing the css selectors from the styles.qss file... Any clue when custom themes will be officially supported?

[mherrmann]

@devmount I'm currently working on fman 1.0 with ~10x better performance. Then, the issues I think are most important are context menu support (#43, most-requested feature by far) and progress feedback for file operations (#46). Given that improved theme support is the next most-requested feature, I will likely tackle it soon after.

[devmount]

@mherrmann Good to know. Thanks for your time! fman is awesome! Keep up the good work!

[mherrmann]

@devmount thanks, will do :-)

[eandmsz]

Would be also great if the user could define custom colors for the different file extensions.

[mherrmann]

Would be also great if the user could define custom colors for the different file extensions.

That's a good suggestion. Eventually, I'd like it so plugins can script the colors. Would be very useful for eg. a Git plugin that colors files depending on whether they're modified, new etc. I'd consider this a separate feature though. It's a little beyond the scope of this one.

[flutefreak7]

The desire for theming on Qt apps seems pretty common, yet there has never been a good repo of qss files. From what I've seen, the project https://github.com/ColinDuquesnoy/QDarkStyleSheet is the best maintained Qt theme I've come across. It's getting a fair amount of development lately.

I guess the Plasma theme stuff that KDE supports isn't usable from PyQt out of the box?

[mherrmann]

I guess the Plasma theme stuff that KDE supports isn't usable from PyQt out of the box?

I'm not sure. From my experience, my suspicion is that the answer to this question is no. The reason is that QSS alone rarely gets you 100% of the desired results, so you have to implement a custom style in C++/Python anyways. That then is not immediately linkable to other applications such as fman.

[mherrmann]

May have to take into account #457.

[f8ttyc8t]

There is also an online editor available for "building" up tmthemes: https://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai

[sirbabyface]

It should be also possible to use different colors to odd and even lines background and text

[fullybent]

Hopefully this hasn't already been clarified, but if it has my apologies. My question is if there's a preferred/suggested method for making changes to the background color, font, etc? I know this is being worked on, but until then do we have any options?

[sirbabyface]

You can change the Theme.css. You can create a new one file and add it to the folder Plugins\User\Settings in the Data directory (you can open it by write "Open data directory")

Example of Theme.css can be found in file https://github.com/fman-users/Core/blob/master/Theme.css

[thomas-haslwanter]

There you can change the font-size, but NOT the background, or the color of e.g. the "Size" attribute :(

[SirJson]

I don't know about you guys but I can set the background-color of pretty much everything.

I call this theme 'EyeCancer'... you just have find the right file ;-) This is obviously unsupported stuff but hey if you keep a backup I don't see any way in which you could break your app.

QTableView, QMessageBox, QDialog, QListView {
    background-color: red;
    border: none;
}

QHeaderView, QHeaderView::section {
    background: purple;
}

QHeaderView::section {
    color: blue;
    border: 4px line;
    padding: 1ex;
    border-style: solid;
    border-left-width: 1px;
    border-left-color: #272822;
    border-right-color: #363731;
    border-right-width: 1px;
}

QTableView::item {
    color: green;
    padding-top: 1px;
    padding-bottom: 1px;
}

/*
 * Hack: Unlike QTreeView::item, QTableView::item has no :first and :last
 * selectors. To work around this, our backend sets State_Children and
 * State_Open, which we can catch here as :has-children and :open, respectively.
 */
QTableView::item:has-children {
    color: olive;
    padding-left: 0.25em;
    /* The padding directive has no effect unless we specify a background: */
    background: pink;
}
QTableView::item:open {
    padding-right: 0.25em;
}

QTableView::item:selected {
    color: cyan;
    /* Avoid the ugly default blue background color for selected cells: */
    background-color: yellow;
}

QTableView::item:focus {
    background-color: orange;
}

QTableView #editor {
    /*
     * The Qt "editor" when renaming a file. It's a QLineEdit, which has a
     * border (see below). On Windows, this border shifts the file name down so
     * much that underscores "_" are obscured. Prevent this:
     */
    border-top: none;
    border-bottom: none;
}

QLabel, QRadioButton, QCheckBox {
    color: #8f908a;
}

QMessageBox QLabel {
    font-weight: bold;
}

QLineEdit {
    color: #33ff55;
    background-color: #3c3faa;
    border: 1px solid #363731;
    border-left-color: #272822;
    border-top-color: #272822;
}

Prompt QLineEdit {
    min-width: 20em;
}

Quicksearch {
    background-color: #884888;
}

Quicksearch #query-container {
    /*
     * The sole purpose of this Div is to draw an extra border at the bottom.
     */
    padding: 0;
    margin: 3px;
    border: 1px solid #155528;
    border-bottom-color: #8e8e8e;
}

Quicksearch #query-container > Div {
    padding: 0;
    border: 1px solid #2c2c2c;
}

Quicksearch QLineEdit {
    color: #1d1d1d;
    background-color: #e6e6e6;
    border: 1px solid #dddddd;
    border-top-color: #aeaeae;
    border-left-color: #c9c9c9;
    border-right-color: #d0d0d0;
}

Quicksearch #items-container {
    margin-bottom: 4px;
}

Quicksearch QListView {
    min-width: 40em;
    background-color: #404040;
    margin-left: 4px;
    margin-right: 4px;
}

Quicksearch QListView::item:selected {
    background-color: #575757;
}

QLineEdit:read-only {
    color: #9a9a9a;
}

PathView {
    padding: 0.25ex;
    border-bottom: 1px solid #262626;
    background-color: #3300ff;
}

QStatusBar {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #5b5b5b, stop: 1 #545454);
    border-top: 1px solid #7d7d7d;
}

QStatusBar, QStatusBar QLabel {
    background-color: #ff3300;
}

QStatusBar QLabel {
    padding-left: .1ex;
}

SplashScreen QPushButton {
    max-width: 4em;
}

Overlay {
    min-width: 20em;
    max-width: 22em;
    background-color: #abcafc;
    border: 1px solid #7d7d7d;
}

Overlay QPushButton {
    max-width: 10em;
    background-color: #abfacc;
}

FilterBar {
    background-color: #272822;
    border: 1px solid #7d7d7d;
    min-width: 8em;
    background-color: darkblue;
}

FilterBar QLineEdit {
    font-size: 9pt;
    width: 7em;
    margin: 0 .25em;
    background-color: #ffaa00;
}

NonexistentShortcutDialog {
    background-color: #aa00ff;
    min-width: 15em;
}

NonexistentShortcutDialog QRadioButton {
    margin-left: 1em;
}

NonexistentShortcutDialog QLineEdit {
    margin-left: 2.25em;
    margin-right: 1em;
}

QRadioButton::checked {
    color: #feab66;
}

ProgressDialog {
    min-width: 25em;
    /*
     * Make max-width at least a little wider than min-width.
     * Otherwise, there sometimes seem to be visual artifacts.
     */
    max-width: 30em;
}

[sirbabyface]

The only thing I miss, is the option to have different colors for odd and even lines.

[SirJson]

Guess Qt 5 only supports CSS 2 at the moment, I think you have to come up with a even more creative solution. Keep the comments in file from the original dev in mind, Qt isn't HTML.

[witszymanski]

Sorry for a banal question, but, how do you install the Core plugin, which contains Theme?

[mherrmann]

It is installed by default :-)

[witszymanski]

I don't see it here: /opt/​fman/​Plugins/​Core

[mherrmann]

Then maybe your fman installation is broken. Please try re-installing fman. If it doesn't work, please open a new issue.

[thomas-haslwanter]

SirJson, which file did you modify with https://github.com/fman-users/fman/issues/45#issuecomment-492059402 to get the "EyeCancer" look? I tried to change the "Theme.css", but it did not have the desired effect.

[thomas-haslwanter]

I am getting a bit fed up: this is the most frequently commented on issue - and nothing seems to be have been done about it for more than a year. Really frustrating.

[navicenna]

I just started using fman and I'm loving it.

However, I would like it to be more clear what the current directory is. Currently, the top status bar which states the current folder has a grey font. Is there anything I can change in Theme.css to adjust the font color and other CSS attributes of the top bar which states the current directory?

[mherrmann]

@nbahmanyar I just released fman 1.6.6 that lets you style the location bar.

[navicenna]

@mherrmann, thanks, it works great!

The only issue I noticed is that it seems that reloading fman does not detect changes in Theme.css. So I have to manually open and close it to see CSS changes. But perhaps that is the expected behavior of the Reload command.

[mherrmann]

Have you tried with the Reload Plugins command?

[navicenna]

That's right, I forgot. Reload Plugins does the job.

[thomas-haslwanter]

Just to let other users who look into customizing fman: All that needs to be done is adjust the file "styles.qss". In my Win64 installation, this can be found under ~/Appdata/Local/fman/Versions/1.6.6 Note that when you have modified the file, you should copy it somewhere else for storage: it gets overwritten with updates of fman! For me, this solves this issue

[adrianvaneeden]

Just to let other users who look into customizing fman: All that needs to be done is adjust the file "styles.qss". In my Win64 installation, this can be found under ~/Appdata/Local/fman/Versions/1.6.6 Note that when you have modified the file, you should copy it somewhere else for storage: it gets overwritten with updates of fman! For me, this solves this issue

This was spot on - just a little bit of playing around in the styles.qss file and I had fman looking like Norton Commander. Good or bad thing, you decide.

[jvlad]

Just to let other users who look into customizing fman: All that needs to be done is adjust the file "styles.qss". In my Win64 installation, this can be found under ~/Appdata/Local/fman/Versions/1.6.6 Note that when you have modified the file, you should copy it somewhere else for storage: it gets overwritten with updates of fman! For me, this solves this issue

Thanks. I've succeeded to do it on MacOS once by modifying /Applications/fman.app/Contents/Resources/styles.qss

However, when I then closed fman and tried to open it again, system started to show "The application fman can't be opened".

I've tried to remove ~/Library/Application Support/fman and reinstall the app (I use Homebrew) but It didn't help. So, I ended up with completely broken fman.

Would anybody please tell what can be the reason and how to address the issue???

I use macOS Mojave 10.14.4 (18E227), fman v1.6.8

Update: reinstalling from official dmg doesn't solve the problem neither. Update2: chmod +x for fman.app/Contents/MacOS/* doesn't help too( Update3: as clarified below, the issue isn't related to styles.qss but rather to that my fman was automatically updated as soon as I closed all running instances. The problem I have is reported in #707.

[mherrmann]

@jvlad I think what you are seeing is #707.

[jvlad]

@mherrmann, thank you for so quick response! Yes, you're right, I've just figured out how to trace it. The error I see is the one mentioned in #707!

[krupitskas]

Hey. Any update on more natural theme configuration and selection like in Sublime Text or Visual Studio code?

[Arty2]

Hi! Is there a map of what UI parts are themable, eg changing the color of the background? Theme.css seems currently very vague, and it feels a lot more things can be styled similarly.

PS: I understand it's in progress : )

Perhaps a theme system to consider: https://github.com/hundredrabbits/Themes

[erikbye]

This issue was opened in 2017. Are you not going to implement changing the color of text? (folder and file names particularly).

The good thing about fman is it is faster to use than good-old Explorer, but it has the same problem with it's dark mode, the text is white. So currently, both are unusable for me.

It is surprising how such a large amount of developers fail to understand that dark mode should not have #fff color text, it is way too bright on a correctly calibrated monitor.

If you implemented this you'd have another licencesee.

[mherrmann]

@erikbye you can change the color of text as explained in this comment.

[thomas-haslwanter]

I have to support erikbye: the method you referred to is a temporary fix to get around a problem in fman - and it has to be repeated after every fman upgrade. It would be really great if you could implement a more durable solution.

[sirbabyface]

I think it is a not so difficult implementation, but would this increase the users happiness? Definitely.

I would suggest to make the development in 2 steps:

1. Include support to custom CSS classes
2. Include support to themes, and have a setting to define which file will be used with them settings.

[adrianvaneeden]

You can do it if you're prepared to mess around. I've managed to get it looking almost like the old Norton Commander:

Mess around with the file at %USERPROFILE%\AppData\Local\fman\Versions\1.7.2\styles.qss [<< insert latest version there]

Sample script: This is what the text in the file looks like. You have to play around and Google documentation to find the right selectors:

QTableView, QMessageBox, QDialog, QListView {
    background-color: #000033;
    border: none;
}

QHeaderView, QHeaderView::section {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #0000e6, stop: 1 #000066);
}

QHeaderView::section {
    color: #00ffff;
    /* color: #8f908a; */
    border: none;
    padding: 1ex;
    border-style: solid;
    border-left-width: 1px;
    border-left-color: #000033;
    border-right-color: #000033;
    border-right-width: 1px;
}

/* These are the text items in the table */
QTableView::item {
    /* color: #75715e; */
    color: #808080;   
    padding-top: 1px;
    padding-bottom: 1px;
}

/*
 * Hack: Unlike QTreeView::item, QTableView::item has no :first and :last
 * selectors. To work around this, our backend sets State_Children and
 * State_Open, which we can catch here as :has-children and :open, respectively.
 */
QTableView::item:has-children {
    color: #ffffff;
    padding-left: 0.25em;
    /* The padding directive has no effect unless we specify a background: */
    background: transparent;
}
QTableView::item:open {
    padding-right: 0.25em;
}

/* Selected files */
QTableView::item:selected {
    color: #f92672;
    /* color: #ffff00; */
    background-color: #000044;
}

/* Focused files  */
QTableView::item:focus {
    color: #000044;
    background-color: #00ffff;
}

/* Files which have been selected and hilighted */
QTableView::item:focus:selected {
    /* background-color: #49483e; */
    /* color: #ffff00; */
    color: #f92672;.
    background-color: #00ffff;
}

QTableView #editor {
    /*
     * The Qt "editor" when renaming a file. It's a QLineEdit, which has a
     * border (see below). On Windows, this border shifts the file name down so
     * much that underscores "_" are obscured. Prevent this:
     */
    border-top: none;
    border-bottom: none;
}

QLabel, QRadioButton, QCheckBox {
    /* color: #8f908a; */
    background-color: #000033;
    color: #ffff00;
}

QMessageBox QLabel {
    font-weight: normal;
}

QLineEdit {
    color: #00ff00;
    /* background-color: #303030; */

    color: #ffffff; 
    background-color: #000066;
    /* color: #ffffff;
    background-color: #00ff00; */

    border: 1px solid #000066;
    border-left-color: #000066;
    border-top-color: #000066;
}

Prompt QLineEdit {
    min-width: 20em;
}

Quicksearch {
    background-color: #000066;
}

Quicksearch #query-container {
    /*
     * The sole purpose of this Div is to draw an extra border at the bottom.
     */
    padding: 0;
    margin: 3px;
    border: 1px solid #000066;
    border-bottom-color: #000066;
}

Quicksearch #query-container > Div {
    padding: 0;
    border: 1px solid #000066;
}

Quicksearch QLineEdit {
    color: #000066;

    background-color: #006fff;
    border: none;
    /* border: 0px solid #0000ff;
    border-top-color: #0000ff;
    border-left-color: #0000ff;
    border-right-color: #0000ff; */
}

Quicksearch #items-container {
    margin-bottom: 4px;
}

Quicksearch QListView {
    min-width: 40em;
    background-color: #3333ff;
    margin-left: 4px;
    margin-right: 4px;
}

Quicksearch QListView::item:selected {
    background-color: #0000e6;
}

QLineEdit:read-only {
    color: #ffd000;
}

QStatusBar {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #000066, stop: 1 #0000e6);
    border-top: 1px solid #8080e6;
}

QStatusBar, QStatusBar QLabel {
    color: white;
}

QStatusBar QLabel {
    padding-left: .1ex;
}

SplashScreen QPushButton {
    max-width: 4em;
}

Overlay {
    min-width: 20em;
    max-width: 22em;
    /* background-color: #272822; */
    /* border: 1px solid #7d7d7d; */
    background-color: #00ff00;
    border: 1px solid #00ff00;
}

Overlay QPushButton {
    max-width: 10em;
}

FilterBar {
    /* background-color: #272822; */
    /* border: 1px solid #7d7d7d; */
    background-color: #000033;
    border: 1px solid #000066;
    min-width: 8em;
}

FilterBar QLineEdit {
    font-size: 9pt;
    width: 7em;
    margin: 0 .25em;
}

NonexistentShortcutDialog {
    min-width: 15em;
}

NonexistentShortcutDialog QRadioButton {
    margin-left: 1em;
}

NonexistentShortcutDialog QLineEdit {
    margin-left: 2.25em;
    margin-right: 1em;
}

QRadioButton::checked {
    color: white;
}

ProgressDialog {
    min-width: 25em;
    /*
     * Make max-width at least a little wider than min-width.
     * Otherwise, there sometimes seem to be visual artifacts.
     */
    max-width: 30em;
}

Hope this helps!

[krupitskas]

Can we wrap it up in plugin and provide downloadable version? :)