{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]}},"next":{"description":"","pages":[]},"title":"Color Hooks","type":"basic","slug":"color-hooks","excerpt":"","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.","updates":["557eb9c9eb75d80d00af3f22"],"order":26,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5635b294d209b50d0031dfea","user":"5469e5dfa3b67a0e00559b06","createdAt":"2015-05-15T05:11:21.828Z","project":"550a7754635c660d0052808e","category":{"sync":{"isSync":false,"url":""},"pages":["5635b294d209b50d0031dfdf","5635b294d209b50d0031dfe0","5635b294d209b50d0031dfe1","5635b294d209b50d0031dfe2","5635b294d209b50d0031dfe3","5635b294d209b50d0031dfe4","5635b294d209b50d0031dfe5","5635b294d209b50d0031dfe6","5635b294d209b50d0031dfe7","5635b294d209b50d0031dfe8","5635b294d209b50d0031dfe9","5635b294d209b50d0031dfea","5635b294d209b50d0031dfeb","5635b294d209b50d0031dfec"],"title":"Customizing Telescope","slug":"customizing-telescope","order":2,"from_sync":false,"reference":false,"_id":"5635b291d209b50d0031dfc7","createdAt":"2015-04-09T03:24:43.474Z","project":"550a7754635c660d0052808e","__v":1,"version":"5635b290d209b50d0031dfc4"},"__v":0,"githubsync":"","version":{"version":"0.25","version_clean":"0.25.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5635b291d209b50d0031dfc5","5635b291d209b50d0031dfc6","5635b291d209b50d0031dfc7","5635b291d209b50d0031dfc8","5635b291d209b50d0031dfc9","5635b291d209b50d0031dfca"],"_id":"5635b290d209b50d0031dfc4","__v":1,"createdAt":"2015-11-01T06:34:56.868Z","project":"550a7754635c660d0052808e","releaseDate":"2015-11-01T06:34:56.868Z"}}

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.