{"_id":"5635b294d209b50d0031dfea","user":"5469e5dfa3b67a0e00559b06","project":"550a7754635c660d0052808e","category":{"_id":"5635b291d209b50d0031dfc7","pages":["5635b294d209b50d0031dfdf","5635b294d209b50d0031dfe0","5635b294d209b50d0031dfe1","5635b294d209b50d0031dfe2","5635b294d209b50d0031dfe3","5635b294d209b50d0031dfe4","5635b294d209b50d0031dfe5","5635b294d209b50d0031dfe6","5635b294d209b50d0031dfe7","5635b294d209b50d0031dfe8","5635b294d209b50d0031dfe9","5635b294d209b50d0031dfea","5635b294d209b50d0031dfeb","5635b294d209b50d0031dfec"],"project":"550a7754635c660d0052808e","__v":1,"version":"5635b290d209b50d0031dfc4","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-09T03:24:43.474Z","from_sync":false,"order":2,"slug":"customizing-telescope","title":"Customizing Telescope"},"__v":0,"githubsync":"","version":{"_id":"5635b290d209b50d0031dfc4","__v":1,"project":"550a7754635c660d0052808e","createdAt":"2015-11-01T06:34:56.868Z","releaseDate":"2015-11-01T06:34:56.868Z","categories":["5635b291d209b50d0031dfc5","5635b291d209b50d0031dfc6","5635b291d209b50d0031dfc7","5635b291d209b50d0031dfc8","5635b291d209b50d0031dfc9","5635b291d209b50d0031dfca"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.25.0","version":"0.25"},"updates":["557eb9c9eb75d80d00af3f22"],"next":{"pages":[],"description":""},"createdAt":"2015-05-15T05:11:21.828Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":26,"body":"Telescope lets its users define a few key colors to style their app. If you're a theme author (or if you just want a way to reuse those colors inside your code), Telescope provides a way to access them. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Registering an Element Color\"\n}\n[/block]\nThe `Telescope.colorElements.add` lets you apply a color to a specific element. It takes three arguments: \n\n- `selector`: the CSS selector used to target the element.\n- `color`: the name of the color to apply. One of `accentColor`, `accentContrastColor`, `secondaryColor`, or `secondaryContrastColor`.\n- `property`: optionally, the CSS property on which to apply the color. Defaults to `color`. \n\nFor example, if your custom code includes the following element:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"/some-link\\\" class=\\\"my-link\\\">Click me!</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou can color it with the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Telescope.colorElements.add(\\\".my-link\\\", \\\"accentColor\\\");\\nTelescope.colorElements.add(\\\".my-link\\\", \\\"accentContrastColor\\\", \\\"background-color\\\");\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNote that the reason why we can't simply style the element in CSS is because `accentColor` and `accentContrastColor` are Settings variables stored in the database, and they're thus not accessible in your CSS code.","excerpt":"","slug":"color-hooks","type":"basic","title":"Color Hooks"}

Getting Started

Using Telescope

Customizing Telescope

Internals

Case Studies

Color Hooks

Telescope lets its users define a few key colors to style their app. If you're a theme author (or if you just want a way to reuse those colors inside your code), Telescope provides a way to access them. [block:api-header] { "type": "basic", "title": "Registering an Element Color" } [/block] The `Telescope.colorElements.add` lets you apply a color to a specific element. It takes three arguments: - `selector`: the CSS selector used to target the element. - `color`: the name of the color to apply. One of `accentColor`, `accentContrastColor`, `secondaryColor`, or `secondaryContrastColor`. - `property`: optionally, the CSS property on which to apply the color. Defaults to `color`. For example, if your custom code includes the following element: [block:code] { "codes": [ { "code": "<a href=\"/some-link\" class=\"my-link\">Click me!</a>", "language": "html" } ] } [/block] You can color it with the following code: [block:code] { "codes": [ { "code": "Telescope.colorElements.add(\".my-link\", \"accentColor\");\nTelescope.colorElements.add(\".my-link\", \"accentContrastColor\", \"background-color\");", "language": "javascript" } ] } [/block] Note that the reason why we can't simply style the element in CSS is because `accentColor` and `accentContrastColor` are Settings variables stored in the database, and they're thus not accessible in your CSS code.