Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom themes #45

Open
mherrmann opened this issue Mar 21, 2017 · 62 comments
Open

Support custom themes #45

mherrmann opened this issue Mar 21, 2017 · 62 comments

Comments

@mherrmann
Copy link
Contributor

mherrmann commented Mar 21, 2017

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
Copy link

pslobo commented May 29, 2017

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

@fman-issues-bot fman-issues-bot bot added 6 votes and removed 5 votes labels May 29, 2017
@mherrmann
Copy link
Contributor Author

That's a very interesting idea!

@rendomnet
Copy link

Also can we change icons theme?

@mherrmann
Copy link
Contributor Author

What do you mean by the icons theme @rendomnet?

@rendomnet
Copy link

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

@mherrmann
Copy link
Contributor Author

@rendomnet I'll keep it in mind

@ekillops
Copy link

ekillops commented May 6, 2021

image

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
Copy link
Contributor Author

mherrmann commented Jul 14, 2021

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.

@fman-users fman-users deleted a comment from thomas-haslwanter Jul 14, 2021
@fman-users fman-users deleted a comment from krupitskas Jul 14, 2021
@fman-users fman-users deleted a comment from pravic Jul 14, 2021
@fman-users fman-users deleted a comment from krupitskas Jul 14, 2021
@fman-users fman-users deleted a comment from themilkman Jul 14, 2021
@fman-users fman-users deleted a comment from krupitskas Jul 14, 2021
@fman-users fman-users deleted a comment from pravic Jul 14, 2021
@mherrmann
Copy link
Contributor Author

@hlx kindly created another theme:

image

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

@strayge
Copy link

strayge commented Jul 28, 2021

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

It also support alternate background color for even rows.

image

@thomas-haslwanter
Copy link

thomas-haslwanter commented Aug 10, 2021

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

@Mufanza
Copy link

Mufanza commented Jun 26, 2022

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

Screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests