helix-editor / helix

A post-modern modal text editor.
https://helix-editor.com
Mozilla Public License 2.0
33.07k stars 2.46k forks source link

add adwaita light theme #10631

Open AbrA-K opened 5 months ago

AbrA-K commented 5 months ago

Hey, I've been using the adwaita-dark theme and would love to see a adwaita-light theme when in a bright environment. I've started to play around with the dark theme and made a light version. I tried to stay as close to the original adwaita-dark theme, but I made some changes:

Here are some screenshots: image in comparison, here is the dark version: image

A pull request would be more fitting, but I've heard it's better to ask if this addition is wanted. So, what do you all think?

AbrA-K commented 5 months ago

wow I just realized that the color palette in gtksourceview5 for Adwaita are in fact different from the colors in Adwaita-Dark..🤦 well, I'll change that later and wait for the verdict.

brielov commented 4 months ago

I'm very interested in this as well.

AbrA-K commented 4 months ago

I don't remember what, but there where some problems with my draft. For now, here is my current implementation. (If you don't know, paste the contents to ~/.config/helix/themes/adwaita-light.toml and it should recognize the theme)

btw: the different colors in gtksourceview5 for Adwaita where lighter and I think the current ones I used here provide more contrast to the background.

# Author: Mofiqul Islam <mofi0islam@gmail.com>

"attribute" = "violet_4"

"type" = "teal_5"
"type.builtin" = "teal_4"

"constructor" = "blue_2"

"constant" = "violet_4"
"constant.builtin" = { fg = "violet_4", modifiers = ["bold"] }
"constant.character" = "teal_5"
"constant.numeric" = { fg = "teal_5", modifiers = ["bold"] }
"constant.character.escape" = "violet_4"

"string" = "teal_5"
"string.regexp" = "purple_4"
"string.special" = "blue_4"

"comment" = "light_7"

"variable" = "dark_2"
"variable.parameter" = "orange_4"
"variable.builtin" = "orange_4"
"variable.other" = "teal_4"
"variable.other.member" = "teal_4"

"label" = "purple_4"

"punctuation" = "dark_4"
"punctuation.delimiter" = "dark_4"
"punctuation.bracket" = "dark_4"
"punctuation.special" = "red_4"

"keyword" = { fg = "orange_4", modifiers = ["bold"] }
"keyword.control" = { fg = "orange_4", modifiers = ["bold"] }
"keyword.operator" = "purple_4"
"keyword.directive" = { fg = "orange_4", modifiers = ["bold"] }
"keyword.function" = "orange_4"
"keyword.storage" = { fg = "orange_4", modifiers = ["bold"] }

"operator" = "purple_3"

"function" = "blue_4"
"function.builtin" = "blue_4"
"function.macro" = { fg = "blue_4", modifiers = ["bold"] }
"function.special" = { fg = "blue_4", modifiers = ["bold"] }

"tag" = "teal_4"

"namespace" = "orange_5"

"markup" = "dark_2"
"markup.heading" = { fg = "teal_4", modifiers = ["bold"] }
"markup.list" = { fg = "orange_4", modifiers = ["bold"] }
"markup.bold" = { fg = "dark_1", modifiers = ["bold"] }
"markup.italic" = { fg = "dark_3", modifiers = ["italic"] }
"markup.link" = { fg = "blue_5", modifiers = ["underlined"] }
"markup.quote" = { fg = "dark_5", modifiers = ["italic"] }
"diff.plus" = "teal_5"
"diff.minus" = "red_3"
"diff.delta" = "orange_5"
"diff.delta.moved" = "orange_4"

"ui.background" = { fg = "dark_2", bg = "light_1" }
"ui.background.separator" = { fg = "split_and_borders", bg = "light_2" }
"ui.cursor" = { fg = "light_2", bg = "dark_2" }
"ui.cursor.insert" = { fg = "light_2", bg = "dark_1" }
"ui.cursor.select" = { fg = "light_2", bg = "dark_1" }
"ui.cursor.match" = { fg = "blue_3", bg = "light_3" }
"ui.cursor.primary" = { fg = "light_2", bg = "dark_2" }
"ui.linenr" = "light_5"
"ui.linenr.selected" = { fg = "dark_4", bg = "light_3", modifiers = [
  "bold",
] }
"ui.statusline" = { fg = "dark_3", bg = "light_4" }
"ui.statusline.inactive" = { fg = "dark_2", bg = "light_3" }
"ui.statusline.insert" = { fg = "dark_2", bg = "teal_1" }
"ui.statusline.select" = { fg = "dark_2", bg = "blue_2" }
"ui.popup" = { bg = "light_popup" }
"ui.window" = "split_and_borders"
"ui.help" = { bg = "light_3" }
"ui.text" = "dark_3"
"ui.virtual" = "light_5"
"ui.virtual.ruler" = { bg = "light_popup"}
"ui.menu" = { fg = "dark_4", bg = "light_popup" }
"ui.menu.selected" = { fg = "dark_2", bg = "blue_1" }
"ui.menu.scroll" = { fg = "dark_5", bg = "light_4" }
"ui.selection" = { bg = "blue_1" }
"ui.selection.primary" = { bg = "blue_1" }
"ui.cursorline.primary" = { bg = "light_3" }

"warning" = "yellow_4"
"error" = "red_5"
"info" = "purple_4"
"hint" = "blue_4"

"diagnostic.hint" = { fg = "blue_4", modifiers = ["dim"] }
"diagnostic.info" = { fg = "purple_4", modifiers = ["dim"] }
"diagnostic.error" = { fg = "red_5", modifiers = ["underlined"] }
"diagnostic.warning" = { fg = "yellow_4", modifiers = ["underlined"] }
"diagnostic.unnecessary" = { modifiers = ["dim"] }
"diagnostic.deprecated" = { modifiers = ["crossed_out"] }

"ui.bufferline" = { fg = "dark_1", bg = "light_3" }
"ui.bufferline.active" = { fg = "dark_3", bg = "light_1", modifiers = ["bold"]}

[palette]
blue_1 = "#99C1F1"
blue_2 = "#62A0EA"
blue_3 = "#3584E4"
blue_4 = "#1C71D8"
blue_5 = "#1A5FB4"
blue_6 = "#1B497E"
blue_7 = "#193D66"
brown_1 = "#CDAB8F"
brown_2 = "#B5835A"
brown_3 = "#986A44"
brown_4 = "#865E3C"
brown_5 = "#63452C"
chameleon_3 = "#4E9A06"
dark_1 = "#77767B"
dark_2 = "#5E5C64"
dark_3 = "#504E55"
dark_4 = "#3D3846"
dark_5 = "#241F31"
dark_6 = "#000000"
dark_7 = "#1c1c1c"
green_1 = "#8FF0A4"
green_2 = "#57E389"
green_3 = "#33D17A"
green_4 = "#2EC27E"
green_5 = "#26A269"
green_6 = "#1F7F56"
green_7 = "#1C6849"
libadwaita_dark = "#1D1D1D"
libadwaita_dark_alt = "#303030"
libadwaita_popup = "#282828"
light_1 = "#FFFFFF"
light_2 = "#FCFCFC"
light_3 = "#F6F5F4"
light_4 = "#DEDDDA"
light_5 = "#C0BFBC"
light_6 = "#B0AFAC"
light_7 = "#9A9996"
light_popup = "#DADADA"
orange_1 = "#FFBE6F"
orange_2 = "#FFA348"
orange_3 = "#FF7800"
orange_4 = "#E66100"
orange_5 = "#C64600"
purple_1 = "#DC8ADD"
purple_2 = "#C061CB"
purple_3 = "#9141AC"
purple_4 = "#813D9C"
purple_5 = "#613583"
red_1 = "#F66151"
red_2 = "#ED333B"
red_3 = "#E01B24"
red_4 = "#C01C28"
red_5 = "#A51D2D"
teal_1 = "#93DDC2"
teal_2 = "#5BC8AF"
teal_3 = "#33B2A4"
teal_4 = "#26A1A2"
teal_5 = "#218787"
violet_2 = "#7D8AC7"
violet_3 = "#6362C8"
violet_4 = "#4E57BA"
yellow_1 = "#F9F06B"
yellow_2 = "#F8E45C"
yellow_3 = "#F6D32D"
yellow_4 = "#F5C211"
yellow_5 = "#E5A50A"
yellow_6 = "#D38B09"
split_and_borders = "#C6C6C6" # was #4F4F4F
brielov commented 4 months ago

Thanks man, very nice of you to share! Using it right now

brielov commented 4 months ago

btw, are you planning on opening a PR for this in the future?

AbrA-K commented 4 months ago

yes! I just know I had an issue with it it but I don't remember what it was. I just remember it making something VERY hard to see. I'll use it the following days and if I don't find anything, then I'll make the request.

AbrA-K commented 3 months ago

I know what bugged me! Open gnome terminal, set insert = bar in [editor.cursor-shape], go into insert mode in an empty line and your cursor disappears! Fixed by setting:

"ui.virtual.whitespace" = "light_7" # or any color

I will make a pull request soon.

brielov commented 3 months ago

I know what bugged me! Open gnome terminal, set insert = bar in [editor.cursor-shape], go into insert mode in an empty line and your cursor disappears! Fixed by setting:

"ui.virtual.whitespace" = "light_7" # or any color

I will make a pull request soon.

Oh great one! This will make a great addition to helix default themes, I'll be using it for sure.