Skip to content

Latest commit

 

History

History
215 lines (174 loc) · 8.26 KB

THEMES.md

File metadata and controls

215 lines (174 loc) · 8.26 KB

Themes

Installing Themes

You can install custom themes by copying them into your ~/.config/ttrv/themes/ directory. The name of the theme will match the name of the file.

$ cp my-custom-theme.cfg ~/.config/ttrv/themes/
$ ttrv --theme my-custom-theme

If you've created a cool theme and would like to share it with the community, please submit a pull request!

A quick primer on ANSI colors

Color support on modern terminals can be split into 4 categories:

  1. No support for colors
  2. 8 system colors - Black, Red, Green, Yellow, Blue, Magenta, Cyan, and White
  3. 16 system colors - Everything above + bright variations
  4. 256 extended colors - Everything above + 6x6x6 color palette + 24 greyscale colors

terminal colors
The 256 terminal color codes, image from https://github.com/eikenb/terminal-colors

The 16 system colors, along with the default foreground and background, can usually be customized through your terminal's profile settings. The 6x6x6 color palette and grayscale colors are constant RGB values across all terminals. TTRV's default theme only uses the 8 primary system colors, which is why it matches the "look and feel" of the terminal that you're running it in.

iTerm preferences
Setting the 16 system colors in iTerm preferences

The curses library determines your terminal's color support by reading your environment's $TERM variable, and looking up your terminal's capabilities in the terminfo database. You can emulate this behavior by using the tput command:

bash$ export TERM=xterm
bash$ tput colors
8
bash$ export TERM=xterm-256color
bash$ tput colors
256
bash$ export TERM=vt220
bash$ tput colors
-1

In general you should not be setting your $TERM variable manually, it will be set automatically by you terminal. Often, problems with terminal colors can be traced back to somebody hardcoding TERM=xterm-256color in their .bashrc file.

Understanding TTRV Themes

Here's an example of what an TTRV theme file looks like:

[theme]
;<element>            = <foreground>  <background>  <attributes>
Normal                = default       default       normal
Selected              = default       default       normal
SelectedCursor        = default       default       reverse

TitleBar              = cyan          -             bold+reverse
OrderBar              = yellow        -             bold
OrderBarHighlight     = yellow        -             bold+reverse
HelpBar               = cyan          -             bold+reverse
Prompt                = cyan          -             bold+reverse
NoticeInfo            = -             -             bold
NoticeLoading         = -             -             bold
NoticeError           = -             -             bold
NoticeSuccess         = -             -             bold

CursorBlock           = -             -             -
CursorBar1            = magenta       -             -
CursorBar2            = cyan          -             -
CursorBar3            = green         -             -
CursorBar4            = yellow        -             -

CommentAuthor         = blue          -             bold
CommentAuthorSelf     = green         -             bold
CommentCount          = -             -             -
CommentText           = -             -             -
Created               = -             -             -
Downvote              = red           -             bold
Gold                  = yellow        -             bold
HiddenCommentExpand   = -             -             bold
HiddenCommentText     = -             -             -
MultiredditName       = yellow        -             bold
MultiredditText       = -             -             -
NeutralVote           = -             -             bold
NSFW                  = red           -             bold+reverse
Saved                 = green         -             -
Score                 = -             -             -
Separator             = -             -             bold
Stickied              = green         -             -
SubscriptionName      = yellow        -             bold
SubscriptionText      = -             -             -
SubmissionAuthor      = green         -             bold
SubmissionFlair       = red           -             -
SubmissionSubreddit   = yellow        -             -
SubmissionText        = -             -             -
SubmissionTitle       = -             -             bold
Upvote                = green         -             bold
Link                  = blue          -             underline
LinkSeen              = magenta       -             underline
UserFlair             = yellow        -             bold

Every piece of text drawn on the screen is assigned to an <element>, which has three properties:

  • <foreground>: The text color
  • <background>: The background color
  • <attributes>: Additional text attributes, like bold or underlined

Colors

The <foreground> and <background> properties can be set to any the following values:

  • default, which means use the terminal's default foreground or background color.
  • The 16 system colors:

    blackdark_gray
    redbright_red
    greenbright_green
    yellowbright_yellow
    bluebright_blue
    magentabright_magenta
    cyanbright_cyan
    light_graywhite

  • ansi_{n}, where n is between 0 and 255. These will map to their corresponding ANSI colors (see the figure above).
  • Hex RGB codes, like #0F0F0F, which will be converted to their nearest ANSI color. This is generally not recommended because the conversion process downscales the color resolution and the resulting colors will look "off".

Attributes

The <attributes> property can be set to any of the following values:

  • normal, bold, underline, or standout.
  • reverse will swap the foreground and background colors.

Attributes can be mixed together using the + symbol. For example, bold+underline will make the text bold and underlined.

Modifiers

TTRV themes use special "modifer" elements to define the default application style. This allows you to do things like set the default background color without needing to set <background> on every single element. The three modifier elements are:

  • Normal - The default modifier that applies to all text elements.
  • Selected - Applies to text elements that are highlighted on the page.
  • SelectedCursor - Like Selected, but only applies to CursorBlock and CursorBar{n} elements.

When an element is marked with a - token, it means inherit the attribute value from the relevant modifier. This is best explained through an example:

[theme]
;<element>            = <foreground>  <background>  <attributes>
Normal                = ansi_241      ansi_230      normal
Selected              = ansi_241      ansi_254      normal

Link                  = ansi_33       -             underline


The default solarized-light theme

In the snippet above, the Link element has its background color set to the - token. This means that it will inherit it's background from either the Normal (light yellow, ansi_230) or the Selected (light grey, ansi_254) element, depending on if it's selected or not.

Compare this with what happens when the Link background is hard-coded to ansi_230:

[theme]
;<element>            = <foreground>  <background>  <attributes>
Normal                = ansi_241      ansi_230      normal
Selected              = ansi_241      ansi_254      normal

Link                  = ansi_33       ansi_230      underline


The Link element hard-coded to ansi_230

In this case, the Link background stays yellow (ansi_230) even when the link is selected by the cursor.