{"action":"opened","issue":{"url":"https://api.github.com/repos/ionic-team/ionic-docs/issues/159","repository_url":"https://api.github.com/repos/ionic-team/ionic-docs","labels_url":"https://api.github.com/repos/ionic-team/ionic-docs/issues/159/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/ionic-docs/issues/159/comments","events_url":"https://api.github.com/repos/ionic-team/ionic-docs/issues/159/events","html_url":"https://github.com/ionic-team/ionic-docs/issues/159","id":374503049,"node_id":"MDU6SXNzdWUzNzQ1MDMwNDk=","number":159,"title":"docs(theming): add a section on how to add a new color ","user":{"login":"brandyscarney","id":6577830,"node_id":"MDQ6VXNlcjY1Nzc4MzA=","avatar_url":"https://avatars1.githubusercontent.com/u/6577830?v=4","gravatar_id":"","url":"https://api.github.com/users/brandyscarney","html_url":"https://github.com/brandyscarney","followers_url":"https://api.github.com/users/brandyscarney/followers","following_url":"https://api.github.com/users/brandyscarney/following{/other_user}","gists_url":"https://api.github.com/users/brandyscarney/gists{/gist_id}","starred_url":"https://api.github.com/users/brandyscarney/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brandyscarney/subscriptions","organizations_url":"https://api.github.com/users/brandyscarney/orgs","repos_url":"https://api.github.com/users/brandyscarney/repos","events_url":"https://api.github.com/users/brandyscarney/events{/privacy}","received_events_url":"https://api.github.com/users/brandyscarney/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-26T18:44:48Z","updated_at":"2018-10-26T18:44:48Z","closed_at":null,"author_association":"MEMBER","body":"**I'm submitting a ...**  (check one with \"x\")\r\n[ ] bug report\r\n[x] feature request\r\n\r\n<!-- Please do not submit support requests or \"How to\" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->\r\n\r\n**URL:**\r\nhttps://beta.ionicframework.com/docs/theming/advanced\r\n\r\nWhen I added this documentation I went in depth on how to change the existing colors, but I forgot to document how to add a new one. Basically document this: https://github.com/ionic-team/ionic-conference-app/blob/master/src/theme/variables.scss#L88-L139\r\n\r\nIn case the link dies:\r\n\r\n```\r\n// Additional Ionic Colors\r\n// --------------------------------------------------\r\n// In order to add colors to be used with Ionic components,\r\n// the color should be added as a class with the convention `.ion-color-{COLOR}`\r\n// where `{COLOR}` is the color to be used on the Ionic component\r\n// and each variant is defined for the color. For more information, please see\r\n// https://beta.ionicframework.com/docs/theming/advanced\r\n\r\n.ion-color-favorite {\r\n  --ion-color-base: #69bb7b;\r\n  --ion-color-base-rgb: 105,187,123;\r\n  --ion-color-contrast: #ffffff;\r\n  --ion-color-contrast-rgb: 255,255,255;\r\n  --ion-color-shade: #5ca56c;\r\n  --ion-color-tint: #78c288;\r\n}\r\n```\r\n\r\nAlso document how they can use it in their app, basically they need to define the variable with whatever name they'd like, but I think we should encourage the `--ion` naming convention:\r\n\r\n```css\r\n:root {\r\n  --ion-color-favorite: #69bb7b;\r\n  --my-color: #444;\r\n}\r\n```\r\n\r\n```css\r\nbody {\r\n  background: var(--ion-color-favorite);\r\n  color: var(--my-color);\r\n}\r\n```\r\n\r\n"}}
{"actor":{"display_login":"brandyscarney"}}