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/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
|
## 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