diff --git a/README.md b/README.md index f0d9eaf..dae2615 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ A template is also available in Settings > Theme > Create from Template. Gruvbox Solarized Dark -Tokyo Night +Tokyo Night Everforest ## Settings diff --git a/screenshots/themes/everforest.png b/screenshots/themes/everforest.png new file mode 100644 index 0000000..aeb97f2 Binary files /dev/null and b/screenshots/themes/everforest.png differ diff --git a/themes/README.md b/themes/README.md new file mode 100644 index 0000000..18fc323 --- /dev/null +++ b/themes/README.md @@ -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 diff --git a/themes/everforest.qss b/themes/everforest.qss new file mode 100644 index 0000000..aa0aba7 --- /dev/null +++ b/themes/everforest.qss @@ -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; +}