{"__v":12,"_id":"551df609a7e98017009e3ee0","category":{"__v":9,"_id":"551df586e52a0b23000c62b6","pages":["551df5bfa77fec1700f6f296","551df5c9fa7f722d00db21f0","551df5dfa77fec1700f6f298","551df5eca7e98017009e3ede","551df5f4a77fec1700f6f29a","551df5fdfa7f722d00db21f3","551df609a7e98017009e3ee0","551f3c0450a0fc210057968e","552836448962f339009a67ab"],"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-03T02:05:58.352Z","from_sync":false,"order":3,"slug":"cloud9-bundle","title":"Cloud9 Bundle"},"parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"__v":10,"_id":"54d5635532d98b0d00384afb","forked_from":"54d53c7c23010a0d001aca0f","project":"54d53c7b23010a0d001aca0c","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-03T02:08:09.079Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"Syntax themes define the styling for the keywords that are recognized by [language modes](doc:language-mode). Cloud9 comes with various default themes available via the `View / Themes` menu. This article describes how to create a custom theme and add it to a [Cloud9 Bundle](doc:cloud9-bundle).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6BvhDvriRXyju2mzQtXF_2015-04-13_1858.png\",\n        \"2015-04-13_1858.png\",\n        \"1570\",\n        \"554\",\n        \"#5b9fde\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Creating Syntax Themes\n\nThe easiest and currently recommended way is to use [this online theme editor](https://tmtheme-editor.herokuapp.com/). It allows you to easily create a new custom theme and download it as a .tmTheme file.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/xPhP9YjhTMiapVUWM9xL_2015-04-13_1902.png\",\n        \"2015-04-13_1902.png\",\n        \"2910\",\n        \"1906\",\n        \"#b9625c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nConvert that TextMate theme to a Cloud9 theme file using [the TextMate theme importer guide](doc:import-a-textmate-theme). \n\n# Adding a Syntax Theme to a Bundle\n\nA bundle can contain one or more syntax themes. Each theme *must* be placed in the `themes` directory. \n\nSuppose your theme is called `tomorrow-night.css`. Your file structure will look something like this:\n\n```\n└─ your.plugin\n    ├─ themes\n    |    └─ tomorrow-night.css\n    ├─ package.json\n    └─ README.md\n```","excerpt":"","slug":"themes","type":"basic","title":"Themes"}
Syntax themes define the styling for the keywords that are recognized by [language modes](doc:language-mode). Cloud9 comes with various default themes available via the `View / Themes` menu. This article describes how to create a custom theme and add it to a [Cloud9 Bundle](doc:cloud9-bundle). [block:image] { "images": [ { "image": [ "https://files.readme.io/6BvhDvriRXyju2mzQtXF_2015-04-13_1858.png", "2015-04-13_1858.png", "1570", "554", "#5b9fde", "" ] } ] } [/block] # Creating Syntax Themes The easiest and currently recommended way is to use [this online theme editor](https://tmtheme-editor.herokuapp.com/). It allows you to easily create a new custom theme and download it as a .tmTheme file. [block:image] { "images": [ { "image": [ "https://files.readme.io/xPhP9YjhTMiapVUWM9xL_2015-04-13_1902.png", "2015-04-13_1902.png", "2910", "1906", "#b9625c", "" ] } ] } [/block] Convert that TextMate theme to a Cloud9 theme file using [the TextMate theme importer guide](doc:import-a-textmate-theme). # Adding a Syntax Theme to a Bundle A bundle can contain one or more syntax themes. Each theme *must* be placed in the `themes` directory. Suppose your theme is called `tomorrow-night.css`. Your file structure will look something like this: ``` └─ your.plugin ├─ themes | └─ tomorrow-night.css ├─ package.json └─ README.md ```