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.