Theming with CSS Custom Properties (CSS Variables) 관련

CSS > Article(s)

---

Article(s)

---

Theming with CSS Custom Properties (CSS Variables)

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. …

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;
  --mention-badge: #DE4C0D;
}

.sidebar {
  background: var(--column-bg, #ae0001);
}

Here’s a full working demo:

See Slack Theming with CSS Custom Properties by ramenhog on CodePen.

💁‍♂️

You can also use this with Responsive Web Design / Media Queries:

CSS Variables tutorial: How to make your HTML responsive with CSS Variables

---

By Per Harald Borgen _Learn how to create the following responsiveness with CSS Variables._ A quick tutorial on how to create responsive websites in 2019. If you haven’t heard of CSS Variables before, it’s a new feature of CSS which gives you the po...

Theming with CSS Custom Properties

Why you should care about CSS variables and what they mean for app theming

Theming with CSS Custom Properties (CSS Variables)

---

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. …