{"id":24206329,"url":"https://github.com/open-tech-foundation/js-cli-styles","last_synced_at":"2026-03-07T11:32:00.787Z","repository":{"id":57133396,"uuid":"392202245","full_name":"Open-Tech-Foundation/js-cli-styles","owner":"Open-Tech-Foundation","description":"Style your CLI text using ANSI escape sequences.","archived":false,"fork":false,"pushed_at":"2024-04-03T04:18:13.000Z","size":1884,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T01:38:26.163Z","etag":null,"topics":["ansi","cli","colors","console","style","terminal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Open-Tech-Foundation.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-03T05:31:54.000Z","updated_at":"2024-08-24T05:53:09.000Z","dependencies_parsed_at":"2024-02-21T08:23:49.965Z","dependency_job_id":"d1a54a44-d294-4886-89ad-9f7597598854","html_url":"https://github.com/Open-Tech-Foundation/js-cli-styles","commit_stats":{"total_commits":82,"total_committers":2,"mean_commits":41.0,"dds":0.2195121951219512,"last_synced_commit":"046ea3ed5dd5866c89fa4d36a10728ff25b6ebd4"},"previous_names":["open-tech-world/js-ansi-styles","open-tech-world/es-cli-styles"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/Open-Tech-Foundation/js-cli-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2Fjs-cli-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2Fjs-cli-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2Fjs-cli-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2Fjs-cli-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Open-Tech-Foundation","download_url":"https://codeload.github.com/Open-Tech-Foundation/js-cli-styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2Fjs-cli-styles/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262030224,"owners_count":23247613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ansi","cli","colors","console","style","terminal"],"created_at":"2025-01-14T00:20:05.558Z","updated_at":"2026-03-07T11:32:00.694Z","avatar_url":"https://github.com/Open-Tech-Foundation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"left\" src=\"https://open-tech-foundation.pages.dev/img/Logo.svg\" width=\"50\" height=\"50\"\u003e\n\n\u0026nbsp;[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)\n\n\u003cdiv align=\"center\"\u003e\n\n# CLI Styles\n\n[![Build](https://github.com/open-tech-foundation/js-cli-styles/actions/workflows/build.yml/badge.svg)](https://github.com/open-tech-foundation/js-cli-styles/actions/workflows/build.yml)\n\n\u003c/div\u003e\n\n\u003e Style your CLI text using [ANSI](https://en.wikipedia.org/wiki/ANSI_escape_code) escape sequences.\n\n\u003cdiv align=\"center\"\u003e\n\n**Try it online at [https://node-repl.pages.dev](https://node-repl.pages.dev/)**\n\n\u003c/div\u003e\n\n---\n\n🚀 [@opentf/std](https://js-std.pages.dev/) - An Extensive JavaScript Standard Library. Please review and give feedback.\n\n---\n\n## Features\n\n- 24-Bit colors only (True Color)\n\n- Nested styles\n\n- Auto detects CLI color support\n\n- Supports RGB \u0026 Hex color modes\n\n- Respects [NO_COLOR](https://no-color.org/) \u0026 [FORCE_COLOR](https://nodejs.org/api/cli.html#force_color1-2-3)\n\n## Supported Terminals (Popular)\n\n✔️ GNOME Terminal\n\n✔️ Konsole\n\n✔️ xfce4-terminal\n\n✔️ MATE Terminal\n\n✔️ iTerm2\n\n✔️ VS Code\n\n✔️ Tabby\n\n✔️ Hyper\n\n✔️ Alacritty\n\n✔️ Contour\n\n✔️ kitty\n\n✔️ WezTerm\n\n✔️ Windows Terminal\n\n❌ Terminal.app\n\n\\*Missing your favorite terminal emulators here? Please give a PR or file an issue in [Github](https://github.com/Open-Tech-Foundation/js-cli-styles/issues/new).\n\n## Installation\n\n```shell\nnpm install @opentf/cli-styles\n```\n\n```shell\nyarn add @opentf/cli-styles\n```\n\n```shell\npnpm add @opentf/cli-styles\n```\n\n```shell\nbun add @opentf/cli-styles\n```\n\n## Syntax\n\n```ts\nstyle(str: string, options?: { color: boolean }): string;\n```\n\n## Usage\n\n```ts\nimport { style } from '@opentf/cli-styles';\n\nconst out = style('$key[.key...]{Text}');\nconsole.log(out);\n```\n\n## Examples\n\nUsing foreground color\n\n```ts\nstyle(\n  '🍊 - An $o{orange} is a fruit of various citrus species in the family Rutaceae.'\n);\n```\n\n![](assets/orange.png)\n\nUsing multiple colors\n\n```ts\nstyle(\n  '$bgy.bl{The $r.bol{R}$g.bol{G}$b.bol{B} color model is an additive color model in which the $r.bol{red}, $g.bol{green} and $b.bol{blue} primary colors of light are added together in various ways to reproduce a broad array of colors.}'\n);\n```\n\n![](assets/rgb.png)\n\nNested colors\n\n```ts\nstyle(\n  \"$bgbl.b{THE QUICK $g{BROWN $r.bol{CAT} JUMPED} OVER THE LAZY $r.bol{DOG}'S BACK}\"\n);\n```\n\n![](assets/nested.png)\n\nComposing different styles\n\n```ts\nstyle('$bol.w.bgg{ PASS }');\n```\n\n![](assets/pass.png)\n\nInverse colors\n\n```ts\nstyle('$inv.r.bgw.bol{ FAILED }');\n```\n\n![](assets/failed.png)\n\nNormal vs Bold vs Dim text\n\n```ts\nstyle('Normal text | $bol{Bold text} | $dim{Dimmed text}');\n```\n\n![](assets/fontweight.png)\n\nItalic fonts\n\n```ts\nstyle(\n  '$ita.fuchsia.bol.bgw{\"This poem is endless,\\n the odds against us are endless,\\n our chances of being alive together statistically nonexistent;\\n still we have made it\"}'\n);\n```\n\n![](assets/italic.png)\n\nUnderlined texts\n\n```ts\nstyle('$und{Straight underline}');\nstyle('$und{Straight $nou{(No underline here)}  underline}');\nstyle('$dbu{Double underline}');\nstyle('$cru{Curly underline}');\nstyle('$dou{Dotted underline}');\nstyle('$dau{Dashed underline}');\nstyle('$und.ug{Straight underline colored}');\nstyle('$dbu.uy{Double underline colored}');\nstyle('$cru.ur{Curly underline colored}');\nstyle('$dou.ub{Dotted underline colored}');\nstyle('$dau.uo{Dashed underline colored}');\nstyle('$und.urgb(100,200,255){Straight underline RGB colored}');\nstyle('$und.ub{Straight $ruc{underline reset} colored}');\n```\n\n![Underline Demo](assets/Underline-Demo.png)\n\n\\*Output from VS Code.\n\nStrikethrough text\n\n```ts\nstyle('Price: $str.r{\\\\$75.00} $g{\\\\$50.00}');\n```\n\n![](assets/strike.png)\n\nCode Highlighting:\n\n```js\nimport { style } from '@opentf/cli-styles';\nimport hljs from 'highlight.js';\nimport { decode } from 'html-entities';\n\nfunction highlight(code) {\n  let html = hljs.highlight(code, {\n    language: 'js',\n  }).value;\n  html = html.replaceAll('\u003cspan class=\"hljs-keyword\"\u003e', '$fuchsia{');\n  html = html.replaceAll('\u003cspan class=\"hljs-variable language_\"\u003e', '$b{');\n  html = html.replaceAll('\u003cspan class=\"hljs-title function_\"\u003e', '$lime{');\n  html = html.replaceAll('\u003cspan class=\"hljs-string\"\u003e', '$y{');\n  html = html.replaceAll('\u003cspan class=\"hljs-params\"\u003e\u003c/span\u003e', '');\n  html = html.replaceAll('\u003cspan class=\"hljs-comment\"\u003e', '$gr.dim{');\n  html = html.replaceAll('\u003c/span\u003e', '}');\n  html = decode(html);\n  return style(html);\n}\n\nconst code = `\n// Comment\nfunction greet() {\n  console.log('Hello World!');\n}\n`;\n\nconsole.log(highlight(code));\n```\n\n![](assets/highlight_code.png)\n\nUsing Template Literals:\n\n```ts\nconst cpu = 90;\nconst ram = 40;\nconst disk = 70;\n\nconst getColor = (n) =\u003e (n \u003c= 50 ? 'g' : n \u003e 50 \u0026\u0026 n \u003c= 70 ? 'y' : 'r');\n\nstyle(`\n CPU: $${getColor(cpu)}{${cpu}%}\n RAM: $${getColor(ram)}{${ram}%}\nDISK: $${getColor(disk)}{${disk}%}\n`);\n```\n\n![](assets/template_literal.png)\n\nEscape characters:\n\nUse double back slashes to escape a character in the string.\n\n```ts\nstyle(\n  `\u003c$hex(#39CCCC){input} name=$y{\"price\"} value=$y{\"\\\\$\\\\{ Cost + Tax \\\\}.00\"} /\u003e`\n);\n```\n\n![](assets/escape.png)\n\nBlinking Text:\n\n```ts\nstyle('$g.bol{SALE! -} $blk.r.bol{50% OFFER}');\n```\n\n![](assets/sale.gif)\n\n## Color Keys\n\n| Key                    | Description                                                                                                                                                         |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| r                      | Red - rgb(255,65,54)                                                                                                                                                |\n| g                      | Green - rgb(46,204,64)                                                                                                                                              |\n| b                      | Blue - rgb(0,116,217)                                                                                                                                               |\n| o                      | Orange - rgb(255,133,27)                                                                                                                                            |\n| y                      | Yellow - rgb(255,220,0)                                                                                                                                             |\n| w                      | White - rgb(255,255,255)                                                                                                                                            |\n| m                      | Magenta - rgb(255,105,193)                                                                                                                                          |\n| c                      | Cyan - rgb(154, 236, 254)                                                                                                                                           |\n| n                      | Navy - rgb(0,31,63)                                                                                                                                                 |\n| a                      | Aqua - rgb(127,219,255)                                                                                                                                             |\n| t                      | Teal - rgb(57,204,204)                                                                                                                                              |\n| p                      | Purple - rgb(177,13,201)                                                                                                                                            |\n| f                      | Fuchsia - rgb(240,18,190)                                                                                                                                           |\n| s                      | Silver - rgb(221,221,221)                                                                                                                                           |\n| ma                     | Maroon - rgb(133,20,75)                                                                                                                                             |\n| ol                     | Olive - rgb(61,153,112)                                                                                                                                             |\n| li                     | Lime - rgb(1,255,112)                                                                                                                                               |\n| bl                     | Black - rgb(17,17,17)                                                                                                                                               |\n| gr                     | Grey - rgb(170,170,170)                                                                                                                                             |\n| pi                     | Pink - rgb(255, 191, 203)                                                                                                                                           |\n| rgb(red, green, blue)  | The RGB foreground colors, Eg: rgb(255,0,0) for red color.                                                                                                          |\n| urgb(red, green, blue) | The RGB underlined colors, Eg: urgb(255, 255, 0) for yellow underlined color.                                                                                       |\n| hex(#------)           | The 6-digit Hex colors, Eg: hex(#00ff00) for green color.                                                                                                           |\n| bg\\*                   | The background colors can be applied with prefix `bg` to any color keys.\u003cbr\u003e Eg: \u003cbr/\u003ebgw for white bg\u003cbr/\u003ebgrgb(0,0,0) for black bg\u003cbr/\u003ebghex(#0000FF) for blue bg |\n| u\\*                    | The underline colors.                                                                                                                                               |\n\n## Modifier Keys\n\n| Key | Description                            |\n| --- | -------------------------------------- |\n| res | Reset all attributes to normal.        |\n| nor | Normal intensity Neither bold nor dim. |\n| bol | Bold or increased intensity text.      |\n| dim | Dimmed or decreased intensity text.    |\n| ita | Italic text.                           |\n| inv | Swap foreground and background colors. |\n| noi | Not inversed.                          |\n| str | Strikethrough text.                    |\n| nos | Not Strikethrough text.                |\n| hid | Hidden text.                           |\n| vis | Visible text.                          |\n| und | Straight underline text.               |\n| nou | No Underlined text.                    |\n| dbu | Doubly Underlined text.                |\n| cru | Curly Underlined text.                 |\n| dou | Dotted Underlined text.                |\n| dau | Dashed Underlined text.                |\n| ruc | Reset Underlined text color.           |\n| ovl | Overlined text.                        |\n| noo | Not Overlined text.                    |\n| blk | Blinking text.                         |\n| nob | No Blinking text.                      |\n\n## Color Overrides\n\nYou can disable colors/styles by the following methods:\n\n- Pass `color` option `false` to the `style` function.\n\n- Pass `--no-color` or `--color=false` to the process arguments.\n\n- Set `FORCE_COLOR=0` in enviroment variables.\n\nYou can force enable colors/styles by setting `FORCE_COLOR=3` in enviroment variables.\n\n## Modifier Keys Supported Terminals\n\n| Supported Terminals | res | nor | bol | dim | ita | inv | str | hid | ovl | blk | und | dbu |\n| ------------------- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| Gnome Terminal      | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n| Konsole             | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  |\n| xfce4-terminal      | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n| MATE Terminal       | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n| iTerm2              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  | ❌  | ❌  | ✅  | ❌  |\n| VS Code             | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  | ✅  | ✅  |\n| Tabby               | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  | ❌  | ✅  | ✅  |\n| Hyper               | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  | ❌  | ✅  | ❌  |\n| Alacritty           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ❌  | ❌  | ✅  | ❌  |\n| Contour             | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n| kitty               | ✅  | ✅  | ✅  | ✅  | ❌  | ✅  | ✅  | ❌  | ❌  | ❌  | ✅  | ✅  |\n| WezTerm             | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n| Windows Terminal    | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  |\n\n## References\n\nhttps://en.wikipedia.org/wiki/ANSI_escape_code\n\nhttps://github.com/termstandard/colors\n\nhttps://no-color.org/\n\nhttps://nodejs.org/api/cli.html#force_color1-2-3\n\nhttps://clrs.cc/\n\nhttps://developer.chrome.com/docs/devtools/console/format-style/\n\n## Related\n\n- [@opentf/std](https://js-std.pages.dev/) - An Extensive JavaScript Standard Library.\n\n- [@opentf/cli-pbar](https://www.npmjs.com/package/@opentf/cli-pbar) - The CLI progress bar.\n\n## License\n\nCopyright (c) 2022, [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](./LICENSE)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-tech-foundation%2Fjs-cli-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-tech-foundation%2Fjs-cli-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-tech-foundation%2Fjs-cli-styles/lists"}