Rosé Pine highlight tweaks

[pkazmier]

I thought I'd share my rose-pine highlight tweaks in case others find them useful.

LSP Type Parameter

I prefer that parameters to a function to be highlighted consistently through the body of the function to differentiate between local variables and function parameters.

["@lsp.type.parameter"] = { link = "@variable.parameter" },

In the screenshot below, you can see filename and must_exist are highlighted with "iris" (purple) in both the function signature as well as the body of the function. Yet, path is simply "text" (white) as it's a local variable. Lines 123, 126, and 127.

Without this tweak, filename, must_exist, and path are all the same color in the body. I find it helpful to visually distinguish a local variable from a parameter.

Markup Strong and Italic

I prefer to add color in addition to bold and italic in markup.

['@markup.italic'] = { fg = "rose", italic = true },
['@markup.strong'] = { fg = "rose", bold = true },

In the screenshot below, you can see the words italic, bold, and bold italic are highlighted in "rose" (pink) on line 3.

LSP Type Format Specifier

I prefer to highlight format specifiers and template markers differently than the surrounding string.

["@lsp.type.formatSpecifier"] = { link = "@markup.list" },

In the screenshot below, you can see the { and } in the format string are highlighted with "pine" (dark blue) on line 4.

Function and Method Calls

I prefer both function and method calls to be highlighted the same:

["@function.method.call"] = { fg = "rose" },

In the screenshot below, you can see the method call keys() is highlighted with "rose" (pink) on lines 1107 and 1108.

Without this tweak, you can see it is highlighted with "iris" (purple).

LSP Type Namespaces

I prefer namespaces to be highlighted consistently. Given the minimal number of colors in the palette, I decided to simply use italic to help differentiate a module name from a regular variable.

["@lsp.type.namespace"] = { fg = "text", italic = true },
["@lsp.type.namespace.python"] = { fg = "text", italic = true },

In the screenshot below, you can see both Python and Go imports are italicized as are the modules in the Python logging.getLogger() (top split line 742) and Go log.SetFlags() (bottom split line 15) examples:

Go Variable Members

I prefer a bit more variety in colors with Go code. Field names when defining a type as well as when constructing a type where defaulting to the same highlight used for types. This proved to be too much "foam" (cyan) for my taste.

["@variable.member.go"] = { fg = "iris" },

In the screenshot below, you can see the field names in Go at time of definition as well as construction are highlighted in "iris" (purple):

Without this tweak, they are look too similar to other types:

Window Separator

I prefer the color of my vertical window separator to match my horizontal separators.

WinSeparator = { fg = "overlay" },

With tweak:

Without:

Pmenu / mini.picker / mini.files Consistency

While setting up my rose pine configuration, I liked how the Pmenu used "subtle" for the items in menu, so I replicated this to 'mini.picker' and 'mini.files' as well for a cohesive look. I also like to use a bold "text" (white) for the currently selected item along with "rose" (pink) for matching text ranges.

      MiniFilesCursorLine            = { fg = "text",    bg = "overlay",        bold = true },
      MiniFilesDirectory             = { fg = "foam",    bold = false },
      MiniFilesFile                  = { fg = "subtle" },
      MiniFilesTitle                 = { fg = "pine" },
      MiniFilesTitleFocused          = { fg = "gold" },

      MiniPickBorderText             = { fg = "foam",    bold = true },
      MiniPickMatchCurrent           = { fg = "text",    bg = "overlay",        bold = true },
      MiniPickMatchMarked            = { fg = "text",    bg = "highlight_high", blend = 100 },
      MiniPickMatchRanges            = { fg = "rose",    bold = false },
      MiniPickNormal                 = { fg = "subtle" },
      MiniPickPromptPrefix           = { fg = "iris",    bold = true },

      PmenuBorder                    = { fg = "muted" },
      PmenuMatch                     = { fg = "rose",    bold = false },
      PmenuSel                       = { bg = "overlay", bold = true },

The screenshots below show the changes with and without the tweaks. First image is my tweak, the next is standard. Across all three you will see the experience is unified.

Incremental Search

I prefer the foreground of the incremental search to be "gold" instead of "text". It looks more harmonious to me. I also adjusted blend to be a bit more opaque (+10) as it was hard to see the "gold" background.

Search = { fg = "gold", bg = "gold", blend = 30 },

With tweak:

Without tweak:

[pkazmier]

The other tweaks I made to my configuration—excluding the highlight groups—include the following:

    groups = {
      h1 = "love",
      h2 = "iris",
      h4 = "foam",
      h3 = "pine",
      h5 = "rose",
      h6 = "gold",
    },
    palette = {
      main = {
        -- I think rose-pine's default pine color is simply too dark, so I use
        -- rose-pine's moon variant of pine.
        pine = "#3e8fb0",
      },
    },
    styles = {
      italic = false,
    },

[mvllow]

Thanks for sharing, these are wonderful tweaks. Some of these changes may find their way into the official theme :)

[pkazmier]

Thanks for such a great theme!

[pkazmier]

I'vo also now tweaked my 'mini.starter' highlight groups in the spirit of the holidays:

      MiniStarterQuery               = { fg = "gold" },
      MiniStarterItem                = { fg = "subtle" },
      MiniStarterFooter              = { fg = "muted",   italic = true },
      MiniStarterHeader              = { fg = "love",    bold = true },
      MiniStarterInactive            = { fg = "muted",   italic = false },
      MiniStarterItemPrefix          = { fg = "foam",    bold = true },
      MiniStarterSection             = { fg = "iris",    bold = true },

[pkazmier]

I updated my 'mini.statusline' highlight groups to look like the example from the rose pine wiki, but with added colors for the various modes.

      StatusLine                     = { fg = "love",    bg = "love",           blend = 10 },
      MiniStatuslineModeCommand      = { fg = "base",    bg = "gold",           bold = true },
      MiniStatuslineModeInsert       = { fg = "base",    bg = "rose",           bold = true },
      MiniStatuslineModeNormal       = { fg = "base",    bg = "love",           bold = true },
      MiniStatuslineModeOther        = { fg = "base",    bg = "gold",           bold = true },
      MiniStatuslineModeReplace      = { fg = "base",    bg = "pine",           bold = true },
      MiniStatuslineModeVisual       = { fg = "base",    bg = "iris",           bold = true },
      MiniStatuslineDevinfo          = { fg = "love",    bg = "love",           blend = 30 },
      MiniStatuslineFilename         = { fg = "love",    bg = "love",           blend = 10 },
      MiniStatuslineInactive         = { fg = "subtle",  bg = "surface",        blend = 100,   bold = false },

Normal Mode

Insert Mode

Visual Mode

Command Mode

Replace Mode

[pkazmier]

And, lastly, the screenshot showing it all come together with my new wallpapers as well: