A rather geeky/technical weblog, est. 2001, by Bramus
color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed. :root { –column-bg: #ae0001; –menu-bg-hover: #680001; –active-item: #D3A625; –active-item-text: #680001; –hover-item: #BE0002; –text-color: #FFFFFF; –active-presence: #00FFBA; …
Continue reading “Theming with CSS Custom Properties (CSS Variables)”