Add tokyonight theme

[paulgraydon]

Hello there! I'd like to add support for the beautiful tokyonight theme, based on the original color scheme (https://github.com/enkia/tokyo-night-vscode-theme), and on the neovim theme (https://github.com/folke/tokyonight.nvim).
Note that this is for the Night variant only (darkest one), but the other variants can easily be made from this one by changing the palette!

[sudormrfbin]

Thank you ! Could you add a screenshot to the Themes wiki ?

[Antonio-Bennett]

You GOAT I was literally just searching up how to do themes to attempt this. I will use this as a base since I want the storm variant :)

[paulgraydon]

Happy to help! I was planning on doing the Storm variant as well, but if you want to give it a shot it seems you only need to change background and background_menu, and maybe background_highlight if it doesn't fit. I took the colors from here (https://github.com/folke/tokyonight.nvim/blob/main/lua/tokyonight/)

[Antonio-Bennett]

@paulgraydon You might have to go ahead and do it. I tried installing from source and I'm getting the issue #1973 out of nowhere 🥹

[sudormrfbin]

@Antonio-Bennett You don't need to install from source to develop themes, simply place the theme file in the runtime folder and select the theme from within the editor.

[Antonio-Bennett]

@sudormrfbin I don't think I am understanding what you're saying. When installed with homebrew the theme is detected from config when developing right? So far I've just been making the theme in there and then I plan to just push with the changes via the repo. Only thing I'm sad about is that I can't have the latest changes rn with homebrew.

Also do you know why I get this error?

This line shows I have "ui.selection"

[the-mikedavis]

Can you paste the full text of the theme?

[paulgraydon]

I took care of it and did a new pull request for the Storm variant

[Antonio-Bennett]

@the-mikedavis it was this not sure what I had wrong. But at the moment since building from source isn't working for me I don't have latest changes and stuff.

# These are the styles for syntax highlighting

"type" = "blue1"
"constructor" = "magenta"

"constant" = "orange"
# "constant.builtin" = 
# "constant.builtin.boolean" = 
"constant.character" = "green"
"constant.character.escape" = "magenta" 
# "constant.numeric" = 
# "constant.numeric.integer" = 
# "constant.numeric.float" = 

"string" = "green"
"string.regexp" = "blue6"
"string.special" = "blue1"
# "string.special.path" = 

"comment" = "comment"
# "comment.line" = 
# "comment.block" = 
# "comment.block.documentation" = 

"variable" = "magenta"
"variable.builtin" = "red"
"variable.parameter" = "yellow"
# "variable.other" = 
# "variable.other.member" = 
# "variable.function" = 

"label" = "blue"

"punctuation" = "blue5"
"punctuation.delimeter" = "blue5" 

"keyword" = {fg = "cyan", modifiers = ["italic"] }
# "keyword.control.repeat" = 
# "keyword.control.import" = 
# "keyword.control.return" = 
# "keyword.control.exception" = 
# "keyword.operator" = 
# "keyword.directive" = 
"keyword.function" = "magenta" 

"operator" = "blue5"

# "function.macro" = 
# "function.special" = 

"tag" = "red"
# "namespace" = 

"markup" = "blue"
"markup.heading" = "orange"
# "markup.heading.marker" = 
"markup.heading.1" = { fg = "magenta", modifiers = ["bold"] }
"markup.heading.2" = { modifiers = ["bold"] }
# "markup.heading.3" = 
# "markup.heading.4" = 
# "markup.heading.5" = 
# "markup.heading.6" = 
# "markup.list" = 
# "markup.list.unnumbered" = 
# "markup.list.numbered" = 
"markup.bold" = { modifiers = ["bold"] }
"markup.italic" = { modifiers = ["italic"] } 
# "markup.link" = 
# "markup.link.url" = 
# "markup.link.label" = 
"markup.link.text" = { modifiers = ["underlined"] }
# "markup.quote" = 
"markup.raw" = "teal"
# "markup.raw.inline" = 
# "markup.raw.block" = 

"diff" = "blue7"
"diff.plus" = "#283B4D"
"diff.minus" = "#3F2D3D#" 
"diff.delta" = "#272D43"
"diff.delta.moved" = 

#These styles affect editor interface

# "markup" = 
# "markup.normal" = 
"markup.normal.completion" = "teal" 
"markup.normal.hover" = "teal"
# "markup.heading" = 
"markup.heading.completion" = "teal"
"markup.heading.hover" = "teal"
# "markup.raw" = 
# "markup.raw.inline" = 
# "markup.raw.inline.completion" = 
# "markup.raw.inline.hover" = 

"ui.background" = "bg"
"ui.cursor" = { fg = "bg", bg = "fg" }
# "ui.cursor.insert" = 
"ui.cursor.select" = "bg_visual"
"ui.cursor.match" = { fg = "fg_dark", bg = "orange" }
# "ui.cursor.primary" = 
"ui.statusline" = { fg = "fg_sidebar", bg = "bg_statusline" }
"ui.text" = "fg"
# "ui.text.focus" = 
# "ui.text.info" = 
"ui.menu" = { fg = "fg", bg = "bg_float" }
"ui.menu.selected" = { bg = "#363D59"}
"ui.selection" = { bg = "bg_visual" }
# "ui.selection.primary" =  

"warning" = "yellow"
"error" = "red1"
"info" = "blue2"
"hint" = "teal"
"diagnostic" = { modifiers = ["underlined"] }

[palette]
bg = "#24283b"
bg_visual = "#364A82"
fg = "#c0caf5"
fg_dark = "#a9b1d6"
fg_gutter = "#3b4261"
comment = "#565f89"
blue = "#7aa2f7"
cyan = "#7dcfff"
blue1 = "#2ac3de"
blue2 = "#0db9d7"
blue5 = "#89ddff"
blue6 = "#B4F9F8"
blue7 = "#394b70"
magenta = "#bb9af7"
orange = "#ff9e64"
yellow = "#e0af68"
green = "#9ece6a"
teal = "#1abc9c"
red = "#f7768e"
red1 = "#db4b4b"

[the-mikedavis]

Ah looks like a syntax error on line 81: "diff.delta.moved" doesn't have a right-hand-side. Curious that that kind of syntax error ends up with that error message 🤔

[Antonio-Bennett]

Yup that was it. Sigh well Paul continues to be a GOAT and took care of this but I'll have to copy it when he's finished maybe I'll try to build from source again