├── screenshot-lua.png ├── screenshot-rust.png ├── screenshot-python.png ├── screenshot-svelte.png ├── Readme.md ├── carbon_dev.toml └── carbon.toml /screenshot-lua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishikanthc/carbon-helix/HEAD/screenshot-lua.png -------------------------------------------------------------------------------- /screenshot-rust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishikanthc/carbon-helix/HEAD/screenshot-rust.png -------------------------------------------------------------------------------- /screenshot-python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishikanthc/carbon-helix/HEAD/screenshot-python.png -------------------------------------------------------------------------------- /screenshot-svelte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishikanthc/carbon-helix/HEAD/screenshot-svelte.png -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Carbon Helix Theme 2 | 3 | This is a theme for the [Helix](https://helix-editor.com/) text-editor that is inspired by 4 | the [Carbon Design System](https://carbondesignsystem.com/). 5 | 6 | ## Installation 7 | 8 | Copy the `carbon.toml` file into the `themes` directory of your helix config. If the themes 9 | directory doesn't exist create one with `mkdir -p ~/.config/helix/themes` and move the 10 | `carbon.toml` file to the directory. 11 | 12 | In your helix config add 13 | ```toml 14 | theme = "carbon" 15 | ``` 16 | 17 | ### Variants 18 | Based on some feedback I also created a non-italics version of the theme as it over-emphasizes 19 | things. I personally like italics a lot but for folks who don't want the italics, you can use 20 | the `carbon_dev` theme instead. Installation procedure is same as above, use the `carbon_dev.toml` 21 | file instead of `carbon.toml` 22 | 23 | ## Screenshot 24 | Below are a few screenshots for Python, Lua and svelte. 25 | 26 | ### Python 27 | ![python](screenshot-python.png) 28 | 29 | ### Lua 30 | ![Lua](screenshot-lua.png) 31 | 32 | ### Svelte 33 | ![svelte](screenshot-svelte.png) 34 | -------------------------------------------------------------------------------- /carbon_dev.toml: -------------------------------------------------------------------------------- 1 | # Syntax highlighting 2 | # ------------------- 3 | "attribute" = "base12" 4 | 5 | "type" = { fg = "base09" } 6 | "type.enum.variant" = "base08" 7 | 8 | "constructor" = "base12" 9 | 10 | "constant" = "base14" 11 | "constant.character" = "base07" 12 | "constant.character.escape" = "base12" 13 | 14 | "string" = "base14" 15 | "string.regexp" = "base12" 16 | "string.special" = "base11" 17 | "string.special.symbol" = "base10" 18 | 19 | "comment" = { fg = "base03" } 20 | 21 | "variable" = "base04" 22 | "variable.parameter" = { fg = "base04" } 23 | "variable.builtin" = "base04" 24 | "variable.other.member" = { fg = "base12" } 25 | 26 | "label" = "base09" # used for lifetimes 27 | 28 | "punctuation" = "cyan10" 29 | "punctuation.special" = "base08" 30 | "punctuation.bracket" = "cyan10" 31 | 32 | "keyword" = { fg = "base09" } 33 | "keyword.control.conditional" = { fg = "base09" } 34 | "keyword.function" = { fg = "aqua" } 35 | 36 | "operator" = "base09" 37 | 38 | "function" = { fg = "base12" } 39 | "function.macro" = { fg = "base07" } 40 | 41 | "tag" = "base11" 42 | 43 | "namespace" = { fg = "aqua" } 44 | 45 | "special" = "base11" # fuzzy highlight 46 | 47 | "markup.heading.marker" = { fg = "base15", modifiers = ["bold"] } 48 | "markup.heading.1" = "base10" 49 | "markup.heading.2" = "base12" 50 | "markup.heading.3" = "base13" 51 | "markup.heading.4" = "base14" 52 | "markup.heading.5" = "base07" 53 | "markup.heading.6" = "base08" 54 | "markup.list" = "base09" 55 | "markup.bold" = { modifiers = ["bold"] } 56 | "markup.italic" = { modifiers = ["italic"] } 57 | "markup.link.url" = { fg = "base11", modifiers = ["italic", "underlined"] } 58 | "markup.link.text" = "base12" 59 | "markup.raw" = "base13" 60 | 61 | "diff.plus" = "base13" 62 | "diff.minus" = "base10" 63 | "diff.delta" = "base09" 64 | 65 | # User Interface 66 | # -------------- 67 | "ui.background" = { fg = "base04", bg = "base00" } 68 | 69 | "ui.linenr" = { fg = "base02" } 70 | "ui.linenr.selected" = { fg = "base04" } 71 | 72 | "ui.statusline" = { fg = "blue60", bg = "base01" } 73 | "ui.statusline.inactive" = { fg = "base03", bg = "base01" } 74 | "ui.statusline.normal" = { fg = "base00", bg = "base09", modifiers = ["bold"] } 75 | "ui.statusline.insert" = { fg = "base00", bg = "base13", modifiers = ["bold"] } 76 | "ui.statusline.select" = { fg = "base00", bg = "base12", modifiers = ["bold"] } 77 | 78 | "ui.popup" = { fg = "base04", bg = "base01" } 79 | "ui.window" = { fg = "base01" } 80 | "ui.help" = { fg = "base03", bg = "base01" } 81 | 82 | "ui.bufferline" = { fg = "base03", bg = "base01" } 83 | "ui.bufferline.active" = { fg = "base09", bg = "base00", underline = { color = "base09", style = "none" } } 84 | "ui.bufferline.background" = { bg = "base01" } 85 | 86 | "ui.text" = "base04" 87 | "ui.text.focus" = { fg = "base04", bg = "base01", modifiers = ["bold"] } 88 | "ui.text.inactive" = { fg = "base03" } 89 | 90 | "ui.virtual" = "base02" 91 | "ui.virtual.ruler" = { bg = "base01" } 92 | "ui.virtual.indent-guide" = "base01" 93 | "ui.virtual.inlay-hint" = { fg = "base03", bg = "base00" } 94 | "ui.virtual.jump-label" = { fg = "base07", modifiers = ["bold"] } 95 | 96 | "ui.selection" = { bg = "base02" } 97 | 98 | "ui.cursor" = { fg = "base00", bg = "base08" } 99 | "ui.cursor.primary" = { fg = "base00", bg = "base08" } 100 | "ui.cursor.match" = { fg = "base15", modifiers = ["bold"] } 101 | 102 | "ui.cursor.primary.normal" = { fg = "base00", bg = "green" } 103 | "ui.cursor.primary.insert" = { fg = "base00", bg = "base13" } 104 | "ui.cursor.primary.select" = { fg = "base00", bg = "base08" } 105 | 106 | "ui.cursor.normal" = { fg = "base00", bg = "base11" } 107 | "ui.cursor.insert" = { fg = "base00", bg = "base13" } 108 | "ui.cursor.select" = { fg = "base00", bg = "base08" } 109 | 110 | "ui.cursorline.primary" = { bg = "base01" } 111 | 112 | "ui.highlight" = { bg = "base02", modifiers = ["bold"] } 113 | 114 | "ui.menu" = { fg = "white30", bg = "base01" } 115 | "ui.menu.selected" = { fg = "white30", bg = "base02", modifiers = ["bold"] } 116 | 117 | "diagnostic.error" = { underline = { color = "base10", style = "curl" } } 118 | "diagnostic.warning" = { underline = { color = "base14", style = "curl" } } 119 | "diagnostic.info" = { underline = { color = "base09", style = "curl" } } 120 | "diagnostic.hint" = { underline = { color = "base08", style = "curl" } } 121 | 122 | error = "base10" 123 | warning = "base14" 124 | info = "base09" 125 | hint = "base08" 126 | 127 | [palette] 128 | black = "#000000" 129 | white = "#FFFFFF" 130 | base00 = "#161616" 131 | base01 = "#262626" 132 | base02 = "#393939" 133 | base03 = "#525252" 134 | base04 = "#c8ccd4" 135 | base05 = "#d6cedd" 136 | base06 = "#fdfcfd" 137 | base07 = "#08bdba" 138 | base08 = "#3ddbd9" 139 | base09 = "#78a9ff" 140 | base10 = "#ee5396" 141 | base11 = "#78a8ff" 142 | base12 = "#ff7eb6" 143 | base13 = "#42be65" 144 | base14 = "#be95ff" 145 | base15 = "#82cfff" 146 | green = "#19b06a" 147 | aqua = "#00dfdb" 148 | yellow = "#fedc69" 149 | blue60 = "#0043ce" 150 | white10 = "#f4f4f4" 151 | white20 = "#e0e0e0" 152 | white30 = "#a8a8a8" 153 | cyan10 = "#6bcafe" 154 | cyan20 = "#32afff" 155 | -------------------------------------------------------------------------------- /carbon.toml: -------------------------------------------------------------------------------- 1 | # Syntax highlighting 2 | 3 | "attribute" = { fg = "blue60", modifiers = ["italic"] } 4 | 5 | "type" = { fg = "cyan30", modifiers = ["italic"] } 6 | "type.builtin" = { fg = "cyan30", modifiers = ["bold"] } 7 | "type.enum.variant" = "magenta40" 8 | 9 | "constructor" = { fg = "purple40", modifiers = ["bold"] } 10 | 11 | "constant" = "teal40" 12 | "constant.builtin" = { fg = "teal40", modifiers = ["bold"] } 13 | "constant.character" = "green40" 14 | "constant.character.escape" = "purple40" 15 | "constant.numeric" = "teal30" 16 | 17 | "string" = "green50" 18 | "string.regexp" = "purple40" 19 | "string.special" = "blue40" 20 | "string.special.symbol" = "cyan30" 21 | "string.special.url" = { fg = "blue30", modifiers = ["underlined"] } 22 | 23 | "comment" = { fg = "gray40", modifiers = ["italic"] } 24 | "comment.block.documentation" = { fg = "gray40", modifiers = ["italic"] } 25 | 26 | "variable" = "gray70" 27 | "variable.builtin" = { fg = "cyan30", modifiers = ["bold"] } 28 | "variable.parameter" = { fg = "magenta40", modifiers = ["italic"] } 29 | "variable.other.member" = { fg = "magenta30", modifiers = ["italic"] } 30 | 31 | "label" = { fg = "blue40", modifiers = ["italic"] } 32 | 33 | "punctuation" = "gray70" 34 | "punctuation.special" = "blue50" 35 | "punctuation.bracket" = "gray60" 36 | "punctuation.delimiter" = "gray60" 37 | 38 | "keyword" = { fg = "blue50", modifiers = ["bold"] } 39 | "keyword.control" = { fg = "blue50", modifiers = ["bold"] } 40 | "keyword.control.conditional" = { fg = "blue50", modifiers = ["bold"] } 41 | "keyword.control.repeat" = { fg = "blue50", modifiers = ["bold"] } 42 | "keyword.control.import" = { fg = "purple40", modifiers = ["bold"] } 43 | "keyword.control.return" = { fg = "red50", modifiers = ["bold"] } 44 | "keyword.control.exception" = { fg = "red40", modifiers = ["bold"] } 45 | "keyword.operator" = "blue40" 46 | "keyword.function" = { fg = "teal40", modifiers = ["bold", "italic"] } 47 | "keyword.storage" = { fg = "purple50", modifiers = ["bold"] } 48 | "keyword.storage.modifier" = { fg = "purple40", modifiers = ["italic"] } 49 | 50 | "operator" = "blue50" 51 | 52 | "function" = { fg = "blue40", modifiers = ["bold"] } 53 | "function.builtin" = { fg = "blue50", modifiers = ["bold"] } 54 | "function.method" = { fg = "blue40", modifiers = ["bold"] } 55 | # "function.macro" = { fg = "purple30", modifiers = ["bold", "italic"] } 56 | 57 | "tag" = "cyan40" 58 | "tag.builtin" = { fg = "cyan40", modifiers = ["bold"] } 59 | 60 | "namespace" = { fg = "teal40", modifiers = ["italic"] } 61 | 62 | "special" = "purple40" 63 | 64 | # Markup 65 | "markup.heading" = { fg = "blue50", modifiers = ["bold"] } 66 | "markup.heading.marker" = { fg = "gray60", modifiers = ["bold"] } 67 | "markup.heading.1" = { fg = "blue40", modifiers = ["bold"] } 68 | "markup.heading.2" = { fg = "cyan40", modifiers = ["bold"] } 69 | "markup.heading.3" = { fg = "teal40", modifiers = ["bold"] } 70 | "markup.heading.4" = { fg = "green40", modifiers = ["bold"] } 71 | "markup.heading.5" = { fg = "purple40", modifiers = ["bold"] } 72 | "markup.heading.6" = { fg = "magenta40", modifiers = ["bold"] } 73 | "markup.list" = "blue30" 74 | "markup.bold" = { modifiers = ["bold"] } 75 | "markup.italic" = { modifiers = ["italic"] } 76 | "markup.link.url" = { fg = "blue30", modifiers = ["underlined"] } 77 | "markup.link.text" = "cyan30" 78 | "markup.quote" = { fg = "green30", modifiers = ["italic"] } 79 | "markup.raw" = "teal30" 80 | 81 | # Diff 82 | "diff.plus" = "green40" 83 | "diff.minus" = "red40" 84 | "diff.delta" = "blue40" 85 | "diff.delta.moved" = "purple40" 86 | 87 | # UI Elements 88 | "ui.background" = { fg = "gray70", bg = "gray10" } 89 | "ui.background.separator" = { fg = "gray30" } 90 | 91 | "ui.cursor" = { fg = "gray10", bg = "blue50" } 92 | "ui.cursor.normal" = { fg = "gray10", bg = "blue50" } 93 | "ui.cursor.insert" = { fg = "gray10", bg = "green50" } 94 | "ui.cursor.select" = { fg = "gray10", bg = "purple50" } 95 | "ui.cursor.match" = { fg = "gray10", bg = "cyan40" } 96 | 97 | "ui.cursor.primary" = { fg = "gray10", bg = "blue60" } 98 | "ui.cursor.primary.normal" = { fg = "gray10", bg = "blue60" } 99 | "ui.cursor.primary.insert" = { fg = "gray10", bg = "green60" } 100 | "ui.cursor.primary.select" = { fg = "gray10", bg = "purple60" } 101 | 102 | "ui.linenr" = { fg = "gray40" } 103 | "ui.linenr.selected" = { fg = "gray70" } 104 | 105 | "ui.statusline" = { fg = "gray70", bg = "gray20" } 106 | "ui.statusline.inactive" = { fg = "gray50", bg = "gray20" } 107 | "ui.statusline.normal" = { fg = "gray10", bg = "blue50", modifiers = ["bold"] } 108 | "ui.statusline.insert" = { fg = "gray10", bg = "green50", modifiers = ["bold"] } 109 | "ui.statusline.select" = { fg = "gray10", bg = "purple50", modifiers = ["bold"] } 110 | 111 | "ui.popup" = { fg = "gray70", bg = "gray20" } 112 | "ui.popup.info" = { fg = "blue40", bg = "gray20" } 113 | "ui.window" = { fg = "gray30" } 114 | "ui.help" = { fg = "gray70", bg = "gray20" } 115 | 116 | "ui.text" = "gray70" 117 | "ui.text.focus" = { fg = "gray70", bg = "gray30", modifiers = ["bold"] } 118 | "ui.text.inactive" = { fg = "gray50" } 119 | "ui.text.info" = { fg = "blue40" } 120 | 121 | "ui.virtual.ruler" = { bg = "gray20" } 122 | "ui.virtual.whitespace" = "gray30" 123 | "ui.virtual.indent-guide" = "gray30" 124 | "ui.virtual.inlay-hint" = { fg = "gray50", bg = "gray10" } 125 | "ui.virtual.jump-label" = { fg = "yellow50", bg = "gray10" } 126 | 127 | "ui.selection" = { bg = "gray30" } 128 | "ui.selection.primary" = { bg = "gray40" } 129 | "ui.cursorline.primary" = { bg = "gray20" } 130 | 131 | "ui.highlight" = { bg = "gray30", modifiers = ["bold"] } 132 | "ui.highlight.frameline" = { bg = "blue20" } 133 | 134 | "ui.menu" = { fg = "gray70", bg = "gray20" } 135 | "ui.menu.selected" = { fg = "gray70", bg = "gray30", modifiers = ["bold"] } 136 | "ui.menu.scroll" = { fg = "blue40", bg = "gray30" } 137 | 138 | # Diagnostics 139 | "diagnostic" = { fg = "gray60" } 140 | "diagnostic.error" = { underline = { color = "magenta30", style = "curl" } } 141 | "diagnostic.warning" = { underline = { color = "yellow30", style = "curl" } } 142 | "diagnostic.info" = { underline = { color = "blue40", style = "curl" } } 143 | "diagnostic.hint" = { underline = { color = "cyan40", style = "curl" } } 144 | 145 | "error" = "magenta30" 146 | "warning" = "yellow30" 147 | "info" = "blue40" 148 | "hint" = "cyan40" 149 | 150 | [palette] 151 | # Softer, more aesthetic color palette inspired by IBM Carbon 152 | gray10 = "#161616" 153 | gray20 = "#262626" 154 | gray30 = "#393939" 155 | gray40 = "#525252" 156 | gray50 = "#6F6F6F" 157 | gray60 = "#8D8D8D" 158 | gray70 = "#a8a8a8" 159 | gray80 = "#c8ccd4" 160 | 161 | # Softer blues 162 | blue20 = "#0043ce" 163 | blue30 = "#4589ff" 164 | blue40 = "#78a9ff" 165 | blue50 = "#82cfff" 166 | blue60 = "#bae6ff" 167 | 168 | # Softer cyans 169 | cyan30 = "#08bdba" 170 | cyan40 = "#3ddbd9" 171 | cyan50 = "#9ef0f0" 172 | 173 | # Softer, more muted greens 174 | green30 = "#42be65" # Softened 175 | green40 = "#6fdc8c" # More pastel 176 | green50 = "#a7f0ba" # Even softer 177 | green60 = "#defbe6" # Very soft 178 | 179 | # Pinks and magentas (more prominent as per your preference) 180 | magenta30 = "#ff7eb6" # Your original pink 181 | magenta40 = "#ff9ec7" # Lighter pink 182 | magenta50 = "#ffd6e8" # Very soft pink 183 | 184 | # Softer purples 185 | purple30 = "#a56eff" 186 | purple40 = "#be95ff" 187 | purple50 = "#d4bbff" 188 | purple60 = "#e8daff" 189 | 190 | # Softer reds with pink undertones 191 | red30 = "#ff8389" # Softer red 192 | red40 = "#ffa4a9" # Pink-red 193 | red50 = "#ffd7d9" # Very soft 194 | 195 | # Softer teals 196 | teal30 = "#08bdba" 197 | teal40 = "#3ddbd9" 198 | teal50 = "#9ef0f0" 199 | 200 | # Warmer, softer yellows 201 | yellow30 = "#f1c21b" 202 | yellow40 = "#fddc69" 203 | yellow50 = "#fff1d2" 204 | --------------------------------------------------------------------------------