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

[ekillops]

Here is my attempt at a Nord theme, based on sf-pear's Dracula theme above.

styles.qss

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

QHeaderView, QHeaderView::section {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2E3440, stop: 1 #2E3440);
}

QHeaderView::section {
	color: #EBCB8B;
	border: none;
	padding: 1ex;
	border-style: solid;
	border-left-width: 1px;
	border-left-color: #434C5E;
	border-right-color: #434C5E;
	border-right-width: 1px;
}

QTableView::item {
	color: #8FBCBB;
	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: #D8DEE9;
	padding-left: 0.25em;
	/* The padding directive has no effect unless we specify a background: */
	background: transparent;
}
QTableView::item:open {
	padding-right: 0.25em;
}

QTableView::item:selected {
	color: #BF616A;
	/* Avoid the ugly default blue background color for selected cells: */
	background-color: #2E3440;
}

QTableView::item:focus {
	background-color: #4C566A;
}

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: #D8DEE9;
}

QMessageBox QLabel {
	font-weight: normal;
}

QLineEdit {
	color: #D8DEE9;
	background-color: #434C5E;
	border: 3px solid #434C5E;
	border-left-color: #434C5E;
	border-top-color: #434C5E;
}

Prompt QLineEdit {
	min-width: 20em;
}

Quicksearch {
	background-color: #2E3440;
	color: #D8DEE9;
}

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 #2E3440;
	border-bottom-color: #2E3440;
}

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

Quicksearch QLineEdit {
	color: #D8DEE9;
	background-color: #434C5E;
	border: 1px solid #434C5E;
	border-top-color: #434C5E;
	border-left-color: #434C5E;
	border-right-color: #434C5E;
}

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

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

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

QLineEdit:read-only {
	color: #88C0D0;
}

QStatusBar {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #434C5E, stop: 1 #434C5E);
	border-top: 1px solid #434C5E;
}

QStatusBar, QStatusBar QLabel {
	color: #88C0D0;
}

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

SplashScreen QPushButton {
	max-width: 4em;
	color: #2E3440;
	background-color: #EBCB8B;
	border: 1px solid #EBCB8B;
}

Overlay {
	min-width: 20em;
	max-width: 22em;
	background-color: #2E3440;
	border: 1px solid #434C5E;
}

Overlay QPushButton {
	max-width: 10em;
}

FilterBar {
	background-color: #2E3440;
	border: 1px solid #434C5E;
	min-width: 8em;
}

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

NonexistentShortcutDialog {
	min-width: 15em;
}

NonexistentShortcutDialog QPushButton{
	max-width: 4em;
	color: #2E3440;
	background-color: #EBCB8B;
	border: 1px solid #EBCB8B;
}

NonexistentShortcutDialog QRadioButton {
	margin-left: 1em;
}

NonexistentShortcutDialog QLineEdit {
	margin-left: 2.25em;
	margin-right: 1em;
	border: 3px solid #434C5E;
}

QRadioButton::checked {
	color: #8FBCBB;
}

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;
}

/*scrollbar preferences*/

QScrollBar {
	color: #D8DEE9;
	background-color: #434C5E;	
}

QScrollBar {
	border: none;
	background: #2E3440;
	width: 10px;
	margin: 22px 0 22px 0;
}

QScrollBar::handle {
	background: #434C5E;
}

QScrollBar::add-line {
  border: none;
  background: #434C5E;
  height: 20px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

QScrollBar::sub-line {
  border: none;
  background: #434C5E;
  height: 20px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

QSplitter {
	background: #434C5E;
}

Theme.css

* {
	font-size: 8pt;
}

th {
	font-size: 8pt;
}

.locationbar {
	padding: 0.25ex;
	border-bottom: 1px solid #2E3440;
}

.statusbar {
	font-size: 8pt;
}

.quicksearch-query, .quicksearch-item-title {
	font-size: 8pt;
}

.quicksearch-item {
	padding-top: 3px;
	padding-left: 4px;
	padding-right: 4px;
	border-top: 1px solid #434C5E;
	border-bottom: 0px solid #434C5E;
}

.quicksearch-item-title {
	color: #88C0D0;
}

.quicksearch-item-title-highlight {
	color: #D8DEE9;
}

.quicksearch-item-hint {
	font-size: 8pt;
	color: #D8DEE9;
}

.quicksearch-item-description {
	color: #434C5E;
}

[mherrmann]

This thread (in fact, this issue tracker) is not for rants about fman's level of support so I've deleted some comments above (and will delete similar comments below) that violated this.

[mherrmann]

@hlx kindly created another theme:

It is hosted at https://github.com/hlx/fman.

[strayge]

FmanAlternativeColors plugin to switch themes.
I've added all themes from this thread.

It also support alternate background color for even rows.

[thomas-haslwanter]

Brilliant, and THANK YOU SO MUCH!
How can I "star" your plugin?

[Mufanza]

Just tried fman for the first time and I fell in love with it instantly.
Here's a light, high-contrast (E-Ink) theme that I made for myself & for whoever needs it