Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update tokyonight themes #9099

Merged
merged 1 commit into from
Jan 8, 2024
Merged

Update tokyonight themes #9099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 105 additions & 70 deletions runtime/themes/tokyonight.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,131 @@
# Author: Paul Graydon <[email protected]>
# Author: Paul Graydon <[email protected]>

"comment" = { fg = "comment", modifiers = ["italic"] }
"constant" = { fg = "orange" }
attribute = { fg = "cyan" }
comment = { fg = "comment", modifiers = ["italic"] }
"comment.block.documentation" = { fg = "yellow" }
constant = { fg = "orange" }
"constant.builtin" = { fg = "aqua" }
"constant.character" = { fg = "light-green" }
"constant.character.escape" = { fg = "magenta" }
"function" = { fg = "blue", modifiers = ["italic"] }
constructor = { fg = "aqua" }
function = { fg = "blue", modifiers = ["italic"] }
"function.builtin" = { fg = "aqua" }
"function.macro" = { fg = "cyan" }
"keyword" = { fg = "cyan", modifiers = ["italic"] }
"function.special" = { fg = "cyan" }
keyword = { fg = "purple", modifiers = ["italic"] }
"keyword.control" = { fg = "magenta" }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why change the normal keyword to purple?
Just a question, no particular opinion on it as of right now.

Copy link
Contributor Author

@UntimelyCreation UntimelyCreation Dec 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coming from neovim, I try to stay as close as possible to folke's colors, as I intended when I first created the helix ones.
You can see this as a long due, small correction. I just didn't want to make a PR only for this, and thus waited for a more general update.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me!

"keyword.control.import" = { fg = "cyan" }
"keyword.operator" = { fg = "turquoise" }
"keyword.function" = { fg = "magenta", modifiers = ["italic"] }
"operator" = { fg = "turquoise" }
"punctuation" = { fg = "turquoise" }
"string" = { fg = "light-green" }
"string.regexp" = { fg = "light-blue" }
"tag" = { fg = "red" }
"type" = { fg = "teal" }
"namespace" = { fg = "blue" }
"variable" = { fg = "white" }
"keyword.control.return" = { fg = "purple", modifiers = ["italic"] }
"keyword.directive" = { fg = "cyan" }
"keyword.function" = { fg = "magenta" }
"keyword.operator" = { fg = "magenta" }
label = { fg = "blue" }
namespace = { fg = "cyan" }
operator = { fg = "turquoise" }
punctuation = { fg = "turquoise" }
special = { fg = "aqua" }
string = { fg = "light-green" }
"string.regexp" = { fg = "light-cyan" }
"string.special" = { fg = "aqua" }
tag = { fg = "magenta" }
type = { fg = "aqua" }
"type.builtin" = { fg = "aqua" }
"type.enum.variant" = { fg = "orange" }
variable = { fg = "fg" }
"variable.builtin" = { fg = "red" }
"variable.other.member" = { fg = "green" }
"variable.parameter" = { fg = "yellow", modifiers = ["italic"] }

"diff.plus" = { fg = "green" }
"diff.delta" = { fg = "orange" }
"diff.minus" = { fg = "red" }
"markup.bold" = { modifiers = ["bold"] }
"markup.heading" = { fg = "blue", modifiers = ["bold"] }
"markup.heading.completion" = { bg = "bg-menu", fg = "fg" }
"markup.heading.hover" = { bg = "fg-selected" }
"markup.italic" = { modifiers = ["italic"] }
"markup.link" = { fg = "blue", underline = { style = "line" } }
"markup.link.label" = { fg = "teal" }
"markup.link.text" = { fg = "teal" }
"markup.link.url" = { underline = { style = "line" } }
"markup.list" = { fg = "orange", modifiers = ["bold"] }
"markup.normal.completion" = { fg = "comment" }
"markup.normal.hover" = { fg = "fg-dark" }
"markup.raw" = { fg = "teal" }
"markup.raw.inline" = { bg = "black", fg = "blue" }
"markup.strikethrough" = { modifiers = ["crossed_out"] }

"ui.background" = { fg = "foreground", bg = "background" }
"ui.cursor" = { modifiers = ["reversed"] }
"ui.cursor.match" = { fg = "orange", modifiers = ["bold"] }
"ui.cursor.primary" = { modifiers = ["reversed"] }
"ui.cursorline.primary" = { bg = "background_menu" }
"ui.help" = { fg = "foreground", bg = "background_menu" }
"ui.linenr" = { fg = "foreground_gutter" }
"ui.linenr.selected" = { fg = "foreground" }
"ui.menu" = { fg = "foreground", bg = "background_menu" }
"ui.menu.selected" = { bg = "background_highlight" }
"ui.popup" = { fg = "foreground", bg = "background_menu" }
"ui.selection" = { bg = "background_highlight" }
"ui.selection.primary" = { bg = "background_highlight" }
"ui.statusline" = { fg = "foreground", bg = "background_menu" }
"ui.statusline.inactive" = { fg = "foreground_gutter", bg = "background_menu" }
"ui.statusline.normal" = { fg = "black", bg = "blue" }
"ui.statusline.insert" = { fg = "black", bg = "green" }
"ui.statusline.select" = { fg = "black", bg = "magenta" }
"ui.text" = { fg = "foreground" }
"ui.text.focus" = { fg = "cyan" }
"ui.virtual.ruler" = { bg = "foreground_gutter" }
"ui.virtual.whitespace" = { fg = "foreground_gutter" }
"ui.virtual.inlay-hint" = { fg = "comment" }
"ui.window" = { fg = "black" }
"diff.delta" = { fg = "change" }
"diff.delta.moved" = { fg = "blue" }
"diff.minus" = { fg = "delete" }
"diff.plus" = { fg = "add" }

"error" = { fg = "red" }
"warning" = { fg = "yellow" }
"info" = { fg = "blue" }
"hint" = { fg = "teal" }
"diagnostic.error" = { underline = { style = "curl", color = "red" } }
"diagnostic.warning" = { underline = { style = "curl", color = "yellow" } }
"diagnostic.info" = { underline = { style = "curl", color = "blue" } }
"diagnostic.hint" = { underline = { style = "curl", color = "teal" } }
"special" = { fg = "orange" }
error = { fg = "error" }
hint = { fg = "hint" }
info = { fg = "info" }
warning = { fg = "yellow" }
"diagnostic.error" = { underline = { style = "curl" } }
"diagnostic.warning" = { underline = { style = "curl" } }
"diagnostic.info" = { underline = { style = "curl" } }
"diagnostic.hint" = { underline = { style = "curl" } }

"markup.heading" = { fg = "cyan", modifiers = ["bold"] }
"markup.list" = { fg = "cyan" }
"markup.bold" = { fg = "orange", modifiers = ["bold"] }
"markup.italic" = { fg = "yellow", modifiers = ["italic"] }
"markup.strikethrough" = { modifiers = ["crossed_out"] }
"markup.link.url" = { fg = "green" }
"markup.link.text" = { fg = "light-gray" }
"markup.quote" = { fg = "yellow", modifiers = ["italic"] }
"markup.raw" = { fg = "cyan" }
"ui.background" = { bg = "bg", fg = "fg" }
"ui.cursor" = { modifiers = ["reversed"] }
"ui.cursor.match" = { fg = "orange", modifiers = ["bold"] }
"ui.cursorline.primary" = { bg = "bg-menu" }
"ui.help" = { bg = "bg-menu", fg = "fg" }
"ui.linenr" = { fg = "fg-gutter" }
"ui.linenr.selected" = { fg = "fg-linenr" }
"ui.menu" = { bg = "bg-menu", fg = "fg" }
"ui.menu.selected" = { bg = "fg-selected" }
"ui.popup" = { bg = "bg-menu", fg = "border-highlight" }
"ui.selection" = { bg = "bg-highlight" }
"ui.selection.primary" = { bg = "bg-highlight" }
"ui.statusline" = { bg = "bg-menu", fg = "fg-dark" }
"ui.statusline.inactive" = { bg = "bg-menu", fg = "fg-gutter" }
"ui.statusline.normal" = { bg = "blue", fg = "bg", modifiers = ["bold"] }
"ui.statusline.insert" = { bg = "light-green", fg = "bg", modifiers = ["bold"] }
"ui.statusline.select" = { bg = "magenta", fg = "bg", modifiers = ["bold"] }
"ui.text" = { bg = "bg", fg = "fg" }
"ui.text.focus" = { bg = "bg-visual" }
"ui.text.inactive" = { fg = "comment", modifiers = ["italic"] }
"ui.text.info" = { bg = "bg-menu", fg = "fg" }
"ui.virtual.ruler" = { bg = "fg-gutter" }
"ui.virtual.whitespace" = { fg = "fg-gutter" }
"ui.virtual.inlay-hint" = { bg = "bg-inlay", fg = "teal" }
"ui.window" = { fg = "border", modifiers = ["bold"] }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As someone that uses tokyo-night-storm and inlay-hints, i'd be relatively unhappy in having so strong colours for inlay-hints they should imo be as unnoticeable as possible. That's why i also made them have no bg as well as its fg-color to be the same as comments (which imo is the best way to handle it).

Any insight as to why make them so bold in colour?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just think of it the other way around. I like to make them stand out a bit from the base code as it is not part of it and is useful hinting, so I kept the upstream colors.
I also completely understand your point of view, and would be happy to leave them as they were before, which is "ui.virtual.inlay-hint" = { fg = "comment" } as you described.

Copy link
Contributor

@SoraTenshi SoraTenshi Dec 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't mind giving your idea a test-drive, there's always the ability to revert it anyway in the future :)
Maybe i would base the decision on whether it should be colorful / plain based on how it is handled in other themes? (i can't quite tell yet as i am using my own fork, i don't know what the current status quo is)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After looking at the other themes, the inlay hints do seem to follow the more discreet approach, though there are both.
I'd say it's just a matter of personal preference.
As you seem OK with the change, let's leave it like this for now. There's always the option to change it back afterwards as you said!


[palette]
red = "#f7768e"
orange = "#ff9e64"
yellow = "#e0af68"
light-green = "#9ece6a"
green = "#73daca"
aqua = "#2ac3de"
teal = "#1abc9c"
turquoise = "#89ddff"
light-cyan = "#b4f9f8"
teal = "#2ac3de"
cyan = "#7dcfff"
blue = "#7aa2f7"
purple = "#9d7cd8"
magenta = "#bb9af7"
white = "#c0caf5"
light-gray = "#9aa5ce"
parameters = "#cfc9c2"
comment = "#565f89"
black = "#414868"
foreground = "#a9b1d6"
foreground_highlight = "#c0caf5"
foreground_gutter = "#363b54"
background = "#1a1b26"
background_highlight = "#30374b"
background_menu = "#16161e"

add = "#449dab"
change = "#6183bb"
delete = "#914c54"

error = "#db4b4b"
hint = "#1abc9c"
info = "#0db9d7"

fg = "#c0caf5"
fg-dark = "#a9b1d6"
fg-gutter = "#3b4261"
fg-linenr = "#737aa2"
fg-selected = "#343a55"
border = "#15161e"
border-highlight = "#27a1b9"
bg = "#1a1b26"
bg-inlay = "#1a2b32"
bg-highlight = "#292e42"
bg-menu = "#16161e"
bg-visual = "#283457"
41 changes: 41 additions & 0 deletions runtime/themes/tokyonight_day.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Author: Paul Graydon <[email protected]>

inherits = "tokyonight"

[palette]
red = "#f52a65"
orange = "#b15c00"
yellow = "#8c6c3e"
light-green = "#587539"
green = "#387068"
aqua = "#188092"
teal = "#118c74"
turquoise = "#006a83"
light-cyan = "#2e5857"
cyan = "#007197"
blue = "#2e7de9"
purple = "#7847bd"
magenta = "#9854f1"
comment = "#848cb5"
black = "#a1a6c5"

add = "#aecde6"
change = "#d6d8e3"
delete = "#dfccd4"

error = "#c64343"
hint = "#118c74"
info = "#07879d"

fg = "#3760bf"
fg-dark = "#6172b0"
fg-gutter = "#a8aecb"
fg-linenr = "#68709a"
fg-selected = "#b3b8d1"
border = "#e9e9ed"
border-highlight = "#2496ac"
bg = "#e1e2e7"
bg-inlay = "#acd7eb"
bg-highlight = "#c4c8da"
bg-menu = "#e9e9ec"
bg-visual = "#b6bfe2"
41 changes: 41 additions & 0 deletions runtime/themes/tokyonight_moon.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Author: Paul Graydon <[email protected]>

inherits = "tokyonight"

[palette]
red = "#ff757f"
orange = "#ff966c"
yellow = "#ffc777"
light-green = "#c3e88d"
green = "#4fd6be"
aqua = "#65bcff"
teal = "#4fd6be"
turquoise = "#89ddff"
light-cyan = "#b4f9f8"
cyan = "#86e1fc"
blue = "#82aaff"
purple = "#fca7ea"
magenta = "#c099ff"
comment = "#636da6"
black = "#444a73"

add = "#b8db87"
change = "#7ca1f2"
delete = "#e26a75"

error = "#c53b53"
hint = "#4fd6be"
info = "#0db9d7"

fg = "#c8d3f5"
fg-dark = "#828bb8"
fg-gutter = "#3b4261"
fg-linenr = "#737aa2"
fg-selected = "#363c58"
border = "#1b1d2b"
border-highlight = "#589ed7"
bg = "#222436"
bg-inlay = "#273644"
bg-highlight = "#2f334d"
bg-menu = "#1e2030"
bg-visual = "#2d3f76"
12 changes: 8 additions & 4 deletions runtime/themes/tokyonight_storm.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
# Author: Paul Graydon <[email protected]>
# Author: Paul Graydon <[email protected]>

inherits = "tokyonight"

[palette]
background = "#24283b"
background_highlight = "#373d5a"
background_menu = "#1f2335"
border = "#1d202f"
bg = "#24283b"
bg-inlay = "#233745"
bg-highlight = "#373d5a"
bg-menu = "#1f2335"
bg-visual = "#2e3c64"
border-highlight = "#29a4bd"
Loading