{"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"}}