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 · 57 comments
Open

Support custom themes #45

mherrmann opened this issue Mar 21, 2017 · 57 comments

Comments

@mherrmann
Copy link
Contributor

@mherrmann 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 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

@mherrmann mherrmann commented May 29, 2017

That's a very interesting idea!

@rendomnet
Copy link

@rendomnet rendomnet commented Jul 29, 2017

Also can we change icons theme?

@mherrmann
Copy link
Contributor Author

@mherrmann mherrmann commented Aug 14, 2017

What do you mean by the icons theme @rendomnet?

@rendomnet
Copy link

@rendomnet rendomnet commented Aug 22, 2017

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

@mherrmann
Copy link
Contributor Author

@mherrmann mherrmann commented Aug 23, 2017

@rendomnet I'll keep it in mind

@jrkd
Copy link

@jrkd jrkd commented Aug 24, 2020

If anyone's looking for something closer to windows explorer styling like this

image

  • Change /Plugins/Core/Theme (Windows).css to:
* {
	font-size: 9pt;
	background: #f6f8fa;
	color: black;
}

th {
	font-size: 8pt;
}

.locationbar {
	padding: 0.25ex;
	border-bottom: 1px solid #f6f8fa;
	background-color: white;
	color: black;
}

.statusbar {
	font-size: 8pt;
	background: white;
	color: black;
}

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

.quicksearch-item {
	padding-top: 1px;
	padding-left: 4px;
	padding-right: 4px;
	border-top: 1px solid #f6f8fa;
	border-bottom: 1px solid #f6f8fa;
}

.quicksearch-item-title {
	color: #676767;
}

.quicksearch-item-title-highlight {
	color: black;
}

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

.quicksearch-item-description {
	color: grey;
}
  • Change /styles.qss to:
QTableView, QMessageBox, QDialog, QListView {
	background-color: white;
	border: none;
}

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

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

QTableView::item {
	color: black;
	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: black;
	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: black;
	/* Avoid the ugly default blue background color for selected cells: */
	background-color: #f6f8fa;
}

QTableView::item:focus {
	background-color: #f6f8fa;
}

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

QMessageBox QLabel {
	font-weight: normal;
}

QLineEdit {
	color: black;
	background-color: white;
	border: 1px solid #f6f8fa;
	border-left-color: #f6f8fa;
	border-top-color: #f6f8fa;
}

Prompt QLineEdit {
	min-width: 20em;
}

Quicksearch {
	background-color: white;
	color: black;
}

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

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

Quicksearch QLineEdit {
	color: black;
	background-color: white;
	border: 1px solid #f6f8fa;
	border-top-color: #f6f8fa;
	border-left-color: #f6f8fa;
	border-right-color: #f6f8fa;
}

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

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

Quicksearch QListView {
	background-color: white;
	color: black;
}
Quicksearch QListView::item:selected {
	background-color: #f6f8fa;
	color: black;
}

QLineEdit:read-only {
	color: black;
}

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

QStatusBar, QStatusBar QLabel {
	color: black;
}

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


SplashScreen {
	background-color: white;
	color: black;
}

SplashScreen QPushButton {
	max-width: 4em;
	background-color: white;
}

Overlay {
	min-width: 20em;
	max-width: 22em;
	background-color: white;
	color: black;
	border: 1px solid #f6f8fa;
}

Overlay QPushButton {
	max-width: 10em;
	color: black;
	background-color: white;
}

FilterBar {
	background-color: white;
	border: 1px solid #f6f8fa;
	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: black;
}

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;
	background-color: pink;
}
@ekillops
Copy link

@ekillops ekillops commented Sep 9, 2020

Is there any chance these custom themes will ever be implemented? 90 votes and being open for 2 years seems like plenty of motivation if this project is intended to be supported.

@sf-pear
Copy link

@sf-pear sf-pear commented Sep 27, 2020

I've started making my own version of the dracula theme for fman to match my terminal and editor.
image

I have shared it here if anyone is interested: https://github.com/sf-pear/dracula-for-fman

@ekillops
Copy link

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

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet