Add Everforest theme, theming documentation
- Everforest theme (green accent, earthy tones) - themes/README.md: complete QSS reference for targeting every widget, state, and visual element
This commit is contained in:
parent
fd5c163225
commit
bd8b7c08a6
@ -155,7 +155,7 @@ A template is also available in Settings > Theme > Create from Template.
|
||||
|
||||
<picture><img src="screenshots/themes/gruvbox.png" alt="Gruvbox" width="400"></picture> <picture><img src="screenshots/themes/solarized-dark.png" alt="Solarized Dark" width="400"></picture>
|
||||
|
||||
<picture><img src="screenshots/themes/tokyo-night.png" alt="Tokyo Night" width="400"></picture>
|
||||
<picture><img src="screenshots/themes/tokyo-night.png" alt="Tokyo Night" width="400"></picture> <picture><img src="screenshots/themes/everforest.png" alt="Everforest" width="400"></picture>
|
||||
|
||||
## Settings
|
||||
|
||||
|
||||
BIN
screenshots/themes/everforest.png
Normal file
BIN
screenshots/themes/everforest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
229
themes/README.md
Normal file
229
themes/README.md
Normal file
@ -0,0 +1,229 @@
|
||||
# booru-viewer Theme Reference
|
||||
|
||||
Copy any `.qss` file from this folder to your data directory as `custom.qss`:
|
||||
|
||||
- **Linux**: `~/.local/share/booru-viewer/custom.qss`
|
||||
- **Windows**: `%APPDATA%\booru-viewer\custom.qss`
|
||||
|
||||
Restart the app after changing themes.
|
||||
|
||||
## Widget Targets
|
||||
|
||||
### Global
|
||||
|
||||
```css
|
||||
QWidget {
|
||||
background-color: #282828;
|
||||
color: #ebdbb2;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
selection-background-color: #fe8019; /* also sets grid selection highlight */
|
||||
selection-color: #282828;
|
||||
}
|
||||
```
|
||||
|
||||
### Buttons
|
||||
|
||||
```css
|
||||
QPushButton {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
padding: 5px 14px;
|
||||
}
|
||||
QPushButton:hover { background-color: #444; }
|
||||
QPushButton:pressed { background-color: #555; }
|
||||
QPushButton:checked { background-color: #0078d7; } /* Browse/Favorites active tab */
|
||||
```
|
||||
|
||||
### Text Inputs
|
||||
|
||||
```css
|
||||
QLineEdit, QTextEdit {
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
QLineEdit:focus, QTextEdit:focus {
|
||||
border-color: #0078d7;
|
||||
}
|
||||
```
|
||||
|
||||
### Dropdowns
|
||||
|
||||
```css
|
||||
QComboBox {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
QComboBox::drop-down {
|
||||
border: none;
|
||||
width: 20px;
|
||||
}
|
||||
QComboBox QAbstractItemView {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
selection-background-color: #444;
|
||||
}
|
||||
```
|
||||
|
||||
### Spin Box (Score Filter)
|
||||
|
||||
```css
|
||||
QSpinBox {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
border-radius: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Scrollbars
|
||||
|
||||
```css
|
||||
QScrollBar:vertical {
|
||||
background: #1a1a1a;
|
||||
width: 10px;
|
||||
border: none;
|
||||
}
|
||||
QScrollBar::handle:vertical {
|
||||
background: #555;
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
QScrollBar::handle:vertical:hover { background: #0078d7; }
|
||||
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { height: 0; }
|
||||
|
||||
QScrollBar:horizontal {
|
||||
background: #1a1a1a;
|
||||
height: 10px;
|
||||
}
|
||||
QScrollBar::handle:horizontal {
|
||||
background: #555;
|
||||
border-radius: 4px;
|
||||
}
|
||||
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; }
|
||||
```
|
||||
|
||||
### Menu Bar & Context Menus
|
||||
|
||||
```css
|
||||
QMenuBar {
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
QMenuBar::item:selected { background-color: #333; }
|
||||
|
||||
QMenu {
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
QMenu::item:selected { background-color: #333; }
|
||||
```
|
||||
|
||||
### Status Bar
|
||||
|
||||
```css
|
||||
QStatusBar {
|
||||
background-color: #1a1a1a;
|
||||
color: #888;
|
||||
}
|
||||
```
|
||||
|
||||
### Splitter Handle
|
||||
|
||||
```css
|
||||
QSplitter::handle {
|
||||
background: #555;
|
||||
width: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Tab Bar (Settings Dialog)
|
||||
|
||||
```css
|
||||
QTabBar::tab {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
QTabBar::tab:selected {
|
||||
background: #444;
|
||||
color: #0078d7;
|
||||
}
|
||||
```
|
||||
|
||||
### Video Player Controls
|
||||
|
||||
```css
|
||||
QSlider::groove:horizontal {
|
||||
background: #333;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
QSlider::handle:horizontal {
|
||||
background: #0078d7;
|
||||
width: 12px;
|
||||
margin: -4px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
### Progress Bar (Download)
|
||||
|
||||
```css
|
||||
QProgressBar {
|
||||
background-color: #333;
|
||||
border: none;
|
||||
}
|
||||
QProgressBar::chunk {
|
||||
background-color: #0078d7;
|
||||
}
|
||||
```
|
||||
|
||||
### Tooltips
|
||||
|
||||
```css
|
||||
QToolTip {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
```css
|
||||
QLabel {
|
||||
background: transparent; /* important: prevents opaque label backgrounds */
|
||||
}
|
||||
```
|
||||
|
||||
## States
|
||||
|
||||
| State | Description |
|
||||
|-------|-------------|
|
||||
| `:hover` | Mouse over |
|
||||
| `:pressed` | Mouse down |
|
||||
| `:focus` | Keyboard focus |
|
||||
| `:checked` | Toggle buttons (Browse/Favorites) |
|
||||
| `:selected` | Selected menu item or tab |
|
||||
| `:disabled` | Grayed out |
|
||||
|
||||
## Notes
|
||||
|
||||
- `selection-background-color` on `QWidget` controls the **grid thumbnail selection highlight**
|
||||
- Setting a custom QSS automatically switches to the Fusion Qt style for consistent rendering
|
||||
- Tag category colors (Artist, Character, etc.) in the info panel are set in code, not via QSS
|
||||
- The favorite/saved dot indicators on thumbnails are painted in code
|
||||
- Use `QLabel { background: transparent; }` to prevent labels from getting opaque backgrounds
|
||||
116
themes/everforest.qss
Normal file
116
themes/everforest.qss
Normal file
@ -0,0 +1,116 @@
|
||||
/* booru-viewer — Everforest Dark */
|
||||
|
||||
QWidget {
|
||||
background-color: #2d353b;
|
||||
color: #d3c6aa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
QPushButton {
|
||||
background-color: #343f44;
|
||||
color: #d3c6aa;
|
||||
border: 1px solid #4f585e;
|
||||
border-radius: 4px;
|
||||
padding: 5px 14px;
|
||||
}
|
||||
QPushButton:hover {
|
||||
background-color: #4f585e;
|
||||
border-color: #a7c080;
|
||||
}
|
||||
QPushButton:pressed {
|
||||
background-color: #a7c080;
|
||||
color: #2d353b;
|
||||
}
|
||||
QPushButton:checked {
|
||||
background-color: #a7c080;
|
||||
color: #2d353b;
|
||||
border-color: #a7c080;
|
||||
}
|
||||
|
||||
QLineEdit, QSpinBox, QComboBox, QTextEdit {
|
||||
background-color: #272e33;
|
||||
color: #d3c6aa;
|
||||
border: 1px solid #4f585e;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
selection-background-color: #a7c080;
|
||||
selection-color: #2d353b;
|
||||
}
|
||||
QLineEdit:focus, QSpinBox:focus, QTextEdit:focus {
|
||||
border-color: #a7c080;
|
||||
}
|
||||
|
||||
QComboBox::drop-down { border: none; width: 20px; }
|
||||
QComboBox QAbstractItemView {
|
||||
background-color: #272e33;
|
||||
color: #d3c6aa;
|
||||
border: 1px solid #4f585e;
|
||||
selection-background-color: #343f44;
|
||||
}
|
||||
|
||||
QScrollBar:vertical {
|
||||
background: #2d353b;
|
||||
width: 10px;
|
||||
border: none;
|
||||
}
|
||||
QScrollBar::handle:vertical {
|
||||
background: #4f585e;
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
QScrollBar::handle:vertical:hover { background: #a7c080; }
|
||||
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { height: 0; }
|
||||
|
||||
QScrollBar:horizontal {
|
||||
background: #2d353b;
|
||||
height: 10px;
|
||||
}
|
||||
QScrollBar::handle:horizontal {
|
||||
background: #4f585e;
|
||||
border-radius: 4px;
|
||||
}
|
||||
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; }
|
||||
|
||||
QMenuBar, QMenu {
|
||||
background-color: #2d353b;
|
||||
color: #d3c6aa;
|
||||
border: 1px solid #343f44;
|
||||
}
|
||||
QMenu::item:selected {
|
||||
background-color: #343f44;
|
||||
}
|
||||
|
||||
QStatusBar {
|
||||
background-color: #272e33;
|
||||
color: #859289;
|
||||
}
|
||||
|
||||
QSplitter::handle {
|
||||
background: #4f585e;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
QLabel { background: transparent; }
|
||||
|
||||
QSlider::groove:horizontal {
|
||||
background: #343f44;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
QSlider::handle:horizontal {
|
||||
background: #a7c080;
|
||||
width: 12px;
|
||||
margin: -4px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
QTabBar::tab {
|
||||
background: #343f44;
|
||||
color: #d3c6aa;
|
||||
border: 1px solid #4f585e;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
QTabBar::tab:selected {
|
||||
background: #4f585e;
|
||||
color: #a7c080;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user