Css svg fill currentcolor

Cascading SVG Fill Color

One time someone told me their biggest problem with SVG icons is that they didn’t match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn’t think of it at the time, but there is a pretty easy solution for this. The idea is to use the currentColor value in CSS to pass that text color through to the SVG shapes. For instance:

fill only affects SVG anyway, so it won’t be doing anything we don’t want it to do, and it’s easily overridable by a more specific selector anyway. The trouble is that doesn’t quite work as is. Take this example, which is just our original example inside the :

  
You'd think the SVG would fill blue too?
 

What is the currentColor at the

Update: Works (properly?) in Chrome now. Firefox and Safari still show the strange red fill.

And that will ensure it snags the color from whatever you would normally expect it to. You can also apply the fill to the use, path, symbol, circle, rect, etc, but hitting the svg just kinda covers it all (which is nice for simple one-color use cases). See the Pen lcDBd by Chris Coyier (@chriscoyier) on CodePen.

Источник

doctor Brain

Несколько дней назад Вы могли прочитать статью о использовании ключевого слова currentColor для создания расширяемых компонентов — “CSS: currentColor”. Однако, currentColor можно применять и для svg-изображений.

fill для SVG

Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета с основным текстом.

Возьмем картинку с деревом (

Если атрибуты fill и stroke не определены, дерево будет черным (#000000) — это цвет по умолчанию.

Например, цвет текста на сайте “темно-угольный” (#272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path :

Динамический цвет для SVG

Вышеприведенный подход несомненно работает. Но как поступить, если возникнет необходимость добавить такую картинку в параграф с текстом другого цвета например, зеленого.

В данном случае цвет текста #009900. Вам придется еще раз изменить значение параметра fill для изображения:

Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.

Именно в таких случаях ключевое слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill : цвет svg-картинки будет соответствовать цвету текста:

Это очень хороший и, что важно, очень востребованный трюк.

Когда не нужно использовать currentColor

В некоторых случаях использование значения currentColor для атрибута fill неуместно. Например, если изображение является логотипом и должно сохранять свой специфический цвет независимо от контекста и действий, совершаемых на сайте.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

Color for SVG icons and elements with currentColor

Making reusable SVG icons and consistent color theme for components while keeping the style sheets short is now achievable with currentColor — a CSS Module 3 variable. But what’s exactly is currentColor ? And how do we achieve color consistency and create reusable SVG icons with it?

What is currentColor ?

currentColor is a CSS variable that contains the computed value of the closest color property being used on an element.

In short, the value of currentColor = value of the closet color property.

currentColor is not a custom variable, and its value is read-only; hence we can’t override or assign a value to it.

For example, to give currentColor a blue value:

/* Invalid syntax */ h1  currentColor: blue; > /* Correct syntax */ h1  color: blue; > 

We can map the value of currentColor to any property that can receives color. Let’s look at the following example:

div class="textbox"> h1>My box shadow should be blueh1> div> 

Assume we already have color of h1 is set to blue . We can assign the color value of border to currentColor , as shown below:

.blue-border  border: 1px solid currentColor; > 

When we add blue-border to h1 element

h1 class="blue-border"> My border should be blue h1> 

The border now takes the same color as the text. Simple as that.

Next question — what if we don’t set any text color for h1 , how do currentColor pick up the right color?

Color inheritance with currentColor keyword

Like other CSS variables, it follows the Cascading rule, which means if there is no color property existed in the CSS ruleset of an element, it will inherit the color property from the closest ancestor of the component. If there is no color in any ancestor, currentColor will automatically receive the fallback value defined by the browser, which is most likely black.

Take the following DOM tree structure, for instance:

html> head> head> body> div class="section purple" id="section"> div class="box-wrapper green" id="box-wrapper"> div class="box-1 box blue" id="box-1">div> div class="box-2 box" id="box-2">div> div> div> body> html> 

In which, the element div#section has color set to purple with purple class, the element div#box-wrapper has green class, and our target element div#box-1 has blue class for color. For experimenting, we add the following to any element with class box (including our target element)

The following describes how color inheritance works for currentColor for div#box-1 element and div#box-2 according to the above structure

A more detailed explanation diagram is as below:

But not all properties really need access to currentColor . While some can inherit the value of color , a few other properties need help to get the right color. For such properties, currentColor is extremely helpful.

So which property does not need currentColor ’s help and which one needs?

Color inheritance in CSS

There are many CSS properties have color inheritance enabled by default, including:

• border-color
• border
• outline and outline-color for text element
• color
• box-shadow

Also, all text elements, including alt text of an image will inherit color value, unless there is a different color is assigned to them explicitly.

Take the following for example:

div class="list-wrapper"> ul class="list-container"> li>List item 1li> li>List item 2li> li>List item 3li> ul> div> 

Once the color of the parent div changes, color of all related properties and text elements changes as well.

For the above scenarios, there is no need for using currentColor . Otherwise, currentColor is essential to enable color inheritance between elements, such as theming and building consistent SVG icons.

Let’s take a look at these use cases, shall we?

Build your reusable icon component with SVG and currentColor

Using SVG for icons is a recommended practice, for many good reasons. And there are many approaches to create a reusable SVG icon component. A straightforward method is to create SVG sprite with use and symbol elements.

Create SVG sprites with use

The most straightforward is to create a container for icons using element as the sprite. We wrap each icon with and reuse it with use . is an nested element of SVG and allows us to define an icon without rendering it on screen. Only when there is a reference to that icon using element. Consider the following SVG icons sprite container, for instance:

body> svg style="display: none"> symbol viewBox="0 0 32 32" id="heart-icon"> symbol> svg> body> 

We assign an id to the icon symbol, and then re-use this heart icon anywhere in the page by referencing to its id with , such as in a text button:

button class="favorite-btn"> svg width="24px" height="24px"> use xlink:href="#heart-icon">use> svg> Favorite me! button> 

And a bit of CSS to make the button’s content aligned.

.favorite-btn  display: flex; align-items: center; > 

That’s it. The button will looks like:

What if we want to this button to render in white text with purple background?

Adding color

For the button’s background and text color, we can add the CSS styles to the button according to its class favorite-btn , as follows:

.favorite-btn  /*. */ background: #3d1472; color: white; > 

The icon color, unfortunately, is not in sync with the button text. To change its color, we can use the fill property with a proper value:

.favorite-btn svg  fill: white; > 

Now we get the button rendered correctly:

If we want to change the text color of the button to grey on hover and match the icon color accordingly, we will need to add two additional rule sets in the CSS file:

.favorite-btn:hover  color: grey; // color for button text > .favorite-btn:hover svg  fill: grey; // color for icon > 

This solution is not optimal, especially when you have more text buttons with icons in different colors, in different scenarios (hover, active, etc.). It requires to write at least two CSS rule sets per button, two extra rule sets per button state, hence making our CSS file long and hard to maintain.

Any better solution? Use currentColor 😉

Simply set the value of fill to currentColor for any svg element:

We no longer need the CSS style for favorite-btn svg selector. So our CSS code now will be:

.favorite-btn  background: #3d1472; color: white; > .favorite-btn:hover  color: grey; > svg  fill: currentColor > 

And our icon’s color will automatically match the button’s text color. Also, changing the button’s text color will only require modification in the button container’s CSS style. Less code, a shorter CSS file, and less bug 🐛.

Easy right? Feel free to try out the code demo yourself here

How about the next use case — theming with currentColor ?

Theming with currentColor and CSS custom variables

I previously showed and wrote a post about how to dynamically customize a dark/light mode theme with CSS custom variables. So what benefit currentColor can add to theming besides?

Consider we have a slide component for input range as follows:

And we want to achieve the consistent look and feel for dark/light mode according to the below themes:

With the help of CSS custom variables, we can define the primary color for the app as below

:root  --page-bg-dark-mode: #808080; --page-color-dark-mode: #69bac9; --page-color-light-mode: #0b4491; > .dark-mode  background: var(--page-bg-dark-mode); color: var(--page-color-dark-mode); > .light-mode  color: var(--page-color-light-mode); > 

For the toggle, we use currentColor for the background of the input range to inherit the theme color automatically.

.input-range  /* . */ background-color: currentColor; color: inherit; /* make sure input text color is consistent with the theme */ > 

And tada 🎉, we get a component reactive to the theme changed

Awesome. You can experiment with the full code here and easily add more components such as slider, checkbox, etc. to create your own design system. After all, why not? 😊

Summary

Large CSS files cause longer TTFB (time to the first byte) and first paint, hurting the site’s overall performance. Also, it’s harder to read and maintain them in the long run. With currentColor , we can finally automate theming while keeping the CSS short, in combination with other tools such as custom variables. Also, we finally can KISS rule to CSS stylesheets and make them DRY (don’t repeat yourself), so what else are you waiting for?

Have some new showcases with currentColor ? Hit me up 🔥.

👉 If you’d like to catch up with me sometimes, follow me on Twitter | Facebook.

Like this post or find it useful ? Share it 👇🏼 😉

Источник