Theme
Application style can be configured in the Appearance configuration tab and using Cascading Style Sheets (CSS).
Appearance Configuration
The Appearance tab in configuration dialog allows to change font and colors of the item list and other GUI elements in the main window.
By default, only the item list and internal item editor style is changed. To change theme of whole the main window (menu bar, tool bar, tabs) and menus, enable option “Set colors for tabs, tool bar and menus”.
Note
Some desktop environments handle the tray menu style by themselves and it cannot be changed in CopyQ.
You can change style in more detail by using “Edit Theme” button.
Style Sheets
The appearance options are the used in application CSS files installed with
CopyQ (e.g. placeholders in the files like ${font}
). You can list the
theme installation path with copyq info themes
command.
To override a CSS file, copy the file to your configuration directory under
themes
subdirectory. For example, override the style sheet for the item
list:
$ copyq info themes
/usr/share/copyq/themes
$ copyq info config
/home/me/.config/copyq/copyq.conf
$ cp /usr/share/copyq/themes/items.css /home/me/.config/copyq/themes/
$ $EDITOR /home/me/.config/copyq/themes/items.css
To reload the style sheets, you need to restart CopyQ or go to the configuration dialog and click OK button.
You can set COPYQ_THEME_PREFIX
environment variable for the preferred path
for CSS files.
CSS files can contain placeholders like ${bg}
which are defined in theme
configuration file. You can edit this file in Appearance configuration tab with
“Edit Theme” button.
Placeholder can be assigned to colors in following formats:
#RGB
(each of R, G, and B is a single hex digit)#RRGGBB
#AARRGGBB
(with alpha channel)transparent
rgba(R,G,B,A)
(each of R, G, and B is 0-255, A is alpha channel 0.0-1.0)
There are extra color names for current system theme:
default_bg
- background for list and line/text edit widgetsdefault_text
- foreground color for the abovedefault_placeholder_text
- placeholder text colordefault_alt_bg
- alternative item backgrounddefault_highlight_bg
- highlight backgrounddefault_highlight_text
- highlighted text colordefault_tooltip_bg
- tooltip backgrounddefault_tooltip_text
- tooltip text colordefault_window
- window backgrounddefault_window_text
- window text colordefault_button
- button backgrounddefault_button_text
- button text colordefault_bright_text
- bright window text colordefault_light
- lighter than buttondefault_midlight
- between button and lightdefault_dark
- darker than buttondefault_mid
- between button and darkdefault_shadow
- very darkdefault_link
- hyperlink colordefault_link_visited
- visited hyperlink color
Placeholder can be also assigned color expressions, for example:
sel_bg=bg + #000409 - #100
menu_bar_css="background: ${bg}; color: ${fg + #444}"
${bg + #333}
(directly in CSS)
Here are some special placeholders for CSS files:
${css:scrollbar}
- includescrollbar.css
style sheet.${scale = 0.5}
- set scaling for sizes and font (reset with value 1)${hsv_saturation_factor = 2}
- set saturation for colors in the rest of the style sheet${hsv_value_factor = 0.9}
- set value for colors in the rest of the style sheet