Created a High Contrast Theme #3238
-
|
I found #3217 , and created this theme based on vscode dark high contrast theme. However, I'm not familiar with create theme, so could anyone give me some advice? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
This looks very sweet! I'm not familiar with it either, which is why I haven't had a chance to give it a go and try myself. Would it be possible to add a border around the menus and pop-ups to more easily tell where the menu/pop-up is contained? It could be the same color as the window divider. As is, I cannot really tell unless I look really hard. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the advice 😊
I would like to create it that is easy for you to look at so far. "ui.background" = { bg = "base00" }
"ui.background.separator" = { fg = "base05" }
"ui.virtual.whitespace" = "base03"
"ui.virtual.ruler" = { fg = "base03", bg = "base05", modifiers = ["reversed"] }
"ui.virtual.indent-guide" = "base05"
"ui.menu" = { fg = "base05", bg = "base01" }
"ui.menu.selected" = { fg = "base02", modifiers = ["underlined"] }
"ui.popup" = { bg = "base01" }
"ui.popup.info" = { bg = "base01" }
"ui.window" = { fg = "base04" }
"ui.linenr" = { fg = "base05", bg = "base00" }
"ui.linenr.selected" = { fg = "base02", bg = "base00", modifiers = ["bold"] }
"ui.selection" = { fg = "base01", bg = "base05" }
"ui.statusline" = { fg = "base05", bg = "base01" }
"ui.statusline.inactive" = { fg = "base03" }
"ui.statusline.normal" = { fg = "base00", bg = "base04" }
"ui.statusline.insert" = { fg = "base00", bg = "base02" }
"ui.statusline.select" = { fg = "base00", bg = "base06" }
"ui.statusline.separator" = "base04"
"ui.text" = "base05"
"ui.text.focus" = "base05"
"ui.cursor" = { fg = "base00", bg = "base05" }
"ui.cursor.primary" = { fg = "base05", bg = "base00", modifiers = ["reversed", "slow_blink"] }
"ui.cursor.secondary" = "base05"
"ui.cursorline.primary" = { fg = "base02" ,modifiers = ["underlined"] }
"ui.cursorline.secondary" = { fg = "base02" ,modifiers = ["underlined"] }
"ui.cursor.match" = { fg = "base00", bg = "base05", modifiers = ["underlined"] }
"type" = "base0A"
"comment" = { fg = "base03", modifiers = ["italic"] }
"operator" = "base05"
"variable" = "base04"
"constant" = "base04"
"constant.numeric" = "base0A"
"attributes" = "base09"
"type.buildin" = "base0A"
"string" = "base0B"
"variable.other.member" = "base0B"
"constant.character.escape" = "base0C"
"function" = "base0C"
"constructor" = "base04"
"special" = "base02"
"keyword" = { fg = "base09" }
"label" = "base09"
"namespace" = "base09"
"ui.help" = { fg = "base05", bg = "base01" }
"markup.heading" = { fg = "base0C", modifiers = ["bold", "underlined"] }
"markup.list" = "base08"
"markup.bold" = { fg = "base0A", modifiers = ["bold"] }
"markup.italic" = { fg = "base09", modifiers = ["italic"] }
"markup.link.url" = { fg = "base09", modifiers = ["underlined"] }
"markup.link.text" = "base08"
"markup.quote" = "base0C"
"markup.raw" = "base0B"
# *** ¯\_(ツ)_/¯ ***
"diff.plus" = "base0D"
"diff.delta" = "base09"
"diff.minus" = "base08"
"diagnostic" = "base05"
"diagnostic.info" = { bg = "base05", modifiers = ["underlined"] }
"diagnostic.hint" = { fg = "base05", modifiers = ["underlined"] }
"diagnostic.warning" = { fg = "base0C", modifiers = ["underlined"] }
"diagnostic.error" = { fg = "base0E", modifiers = ["underlined"] }
"ui.gutter" = { bg = "base00" }
"info" = { fg = "base05", modifiers = ["underlined"]}
"hint" = { fg = "base05", modifiers = ["underlined"]}
"debug" = { fg = "base02", modifiers = ["underlined"]}
"warning" = { fg = "base0C", modifiers = ["underlined"]}
"error" = {fg = "base0E" , modifiers = ["underlined"]}
[palette]
base00 = "#000000" # Black
base01 = "#1f2e55" # Navy-blue
base02 = "#f38518" # Orange
base03 = "#585858" # Gray
base04 = "#6fc3df" # Aqua
base05 = "#ffffff" # White
base06 = "#c586c0" # Purple
base07 = "#f8f8f8" # Light-gray
base08 = "#de0900" # Red
base09 = "#569cd6" # Blue
base0A = "#4ec9b0" # Emerald green
base0B = "#c3916b" # Brown
base0C = "#dcce7b" # Light-yellow
base0D = "#008000" # green
base0E = "#b65f5f" # Light-red
base0F = "#000000" # Unused |
Beta Was this translation helpful? Give feedback.
-
|
That looks MUCH better! Just a shy darker would be a little better, as contrast is lost a little for the text that is not white. It looks really good, however, for white text, but a bit less so for colored symbols. |
Beta Was this translation helpful? Give feedback.
-
|
I added underlining to "keyword" and darkened the pop-ups a bit. I've also lined up three of them above for your reference. It was very difficult to create a light theme. It's hard to fine tune. My eyes are tired.
"ui.background" = { bg = "base05" }
"ui.background.separator" = { fg = "base07" }
"ui.selection" = { fg = "base05", bg = "base09" }
"ui.cursor" = { fg = "base01", bg = "base00" }
"ui.cursor.insert" = { fg = "base01", bg = "base00" }
"ui.cursor.select" = { fg = "base01", bg = "base00" }
"ui.cursor.match" = { fg = "base01", modifiers = ["underlined"] }
"ui.cursor.primary" = { fg = "base0C", bg = "base09", modifiers = ["rapid_blink"] }
"ui.cursor.secondary" = "base03"
"ui.cursorline.primary" = { fg = "base00", modifiers = ["underlined"] }
"ui.cursorline.secondary" = { fg = "base00", modifiers = ["underlined"] }
"ui.virtual.whitespace" = "base07"
"ui.virtual.ruler" = { fg = "base07", bg = "base00", modifiers = ["reversed"] }
"ui.virtual.indent-guide" = "base00"
"ui.menu" = { fg = "base00", bg = "base05" }
"ui.menu.selected" = { fg = "base05", bg = "base0F" }
"ui.popup" = { fg = "base05", bg = "base10" }
"ui.popup.info" = { fg = "base00", bg = "base05" }
"ui.window" = { fg = "base09" }
"ui.linenr" = { fg = "base00", bg = "base05" }
"ui.linenr.selected" = { fg = "base0F", bg = "base05", modifiers = ["bold"] }
"ui.text" = { fg = "base03" }
"ui.text.focus" = { fg = "base04" }
"ui.statusline" = { fg = "base03", bg = "base05" }
"ui.statusline.inactive" = { fg = "base07" }
"ui.statusline.normal" = { fg = "base05", bg = "base04" }
"ui.statusline.insert" = { fg = "base05", bg = "base02" }
"ui.statusline.select" = { fg = "base05", bg = "base06" }
"ui.statusline.separator" = "base04"
"type" = "base0A"
"comment" = { fg = "base00", modifiers = ["italic"] }
"operator" = "base00"
"variable" = "base04"
"constant" = "base04"
"constant.numeric" = "base0A"
"attributes" = "base09"
"type.buildin" = "base0A"
"string" = "base03"
"variable.other.member" = "base0D"
"constant.character.escape" = "base0C"
"function" = "base06"
"constructor" = "base04"
"special" = "base0F"
"keyword" = { fg = "base09" }
"label" = "base09"
"namespace" = "base09"
"ui.help" = { fg = "base00", bg = "base05" }
"markup.heading" = { fg = "base0F", modifiers = ["bold", "underlined"] }
"markup.list" = "base08"
"markup.bold" = { fg = "base0A", modifiers = ["bold"] }
"markup.italic" = { fg = "base09", modifiers = ["italic"] }
"markup.link.url" = { fg = "base09", modifiers = ["underlined"] }
"markup.link.text" = "base08"
"markup.quote" = "base0C"
"markup.raw" = { fg = "base0B", modifiers = ["underlined"] }
"markup.normal.completion" = "base0C"
"markup.normal.hover" = { fg = "base09" }
"diff.plus" = "base0D"
"diff.delta" = "base09"
"diff.minus" = "base08"
"diagnostic" = "base00"
"diagnostic.info" = { fg = "base00", modifiers = ["underlined"] }
"diagnostic.hint" = { fg = "base00", modifiers = ["underlined"] }
"diagnostic.warning" = { fg = "base0C", modifiers = ["underlined"] }
"diagnostic.error" = { fg = "base0E", modifiers = ["underlined"] }
"ui.gutter" = { bg = "base05" }
"info" = { fg = "base00", modifiers = ["underlined"] }
"hint" = { fg = "base00", modifiers = ["underlined"] }
"debug" = { fg = "base02", modifiers = ["underlined"] }
"warning" ={fg = "base0C", modifiers = ["underlined"] }
"error" = { fg ="base0E", modifiers = ["underlined"] }
[palette]
base00 = "#292929" # Black
base01 = "#0c141f" # Dark Navy
base02 = "#f38518" # Orange
base03 = "#515151" # Gray
base04 = "#185e89" # Aqua
base05 = "#ffffff" # White
base06 = "#5e2cbc" # Purple
base07 = "#cccccc" # Light-gray
base08 = "#b5200d" # Red
base09 = "#0f4a85" # Dark-aqua
base0A = "#185e73" # Emerald green
base0B = "#c3916b" # Brown
base0C = "#dcce7b" # Light-yellow
base0D = "#008000" # green
base0E = "#b65f5f" # Light-red
base0F = "#0431fa" # Blue
base10 = "#fff2cc" |
Beta Was this translation helpful? Give feedback.
-
|
It looks perfect! Thank you very much! I would personally never be able to look at the high contrast light theme, so I can't help much on that one, but here's a pro tip that I use to make everything into dark mode if you're on windows 10/11. In accessibility settings, in filters, you can set invert colors and enable a shortcut that you can use to toggle it on and off with For Linux, you can use |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the tips! |
Beta Was this translation helpful? Give feedback.
This looks very sweet! I'm not familiar with it either, which is why I haven't had a chance to give it a go and try myself.
Would it be possible to add a border around the menus and pop-ups to more easily tell where the menu/pop-up is contained? It could be the same color as the window divider. As is, I cannot really tell unless I look really hard.
If this is not possible, then adding a few shades lighter background for these would also do the trick, although may not be ideal for some people that need a really high contrast.