Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Changing Notion base icon colors #796

Open
laurakennedy5059 opened this issue Mar 29, 2023 · 2 comments
Open

Feature Request: Changing Notion base icon colors #796

laurakennedy5059 opened this issue Mar 29, 2023 · 2 comments

Comments

@laurakennedy5059
Copy link

Screenshot 2023-03-29 at 5 57 09 AM

Like we're able to change the text, highlight, tag, etc. colors, I would like to be able to change the color options for the default Notion icons (see attached screenshot as an example).

Notion is moving towards wanting users to use the default icons vs. uploading their own. Ex. The new feature that allows you to update the icons of database items in bulk only gives you the option of emojis or Notion default icons. Similarly, database column titles can only be changed to Notion default icons.

As someone that changes the existing colors for Notion, I'm unable to use the Notion default icons as they do not correlate to my color coding. This is a problem for many of the Notion themes that exist in the enhancer right now too. Would love to see this as a tweak and I'm sure others would benefit as well, especially those who utilize color changes.

@dragonwocky
Copy link
Member

This is one of the things that I've been struggling with a bit as I've been working on the next release. In most places where these icons are used, they're embedded as image files rather than as SVGs, which means you can't just set background-color or fill on them to change their colour. E.g.

<img src="/icons/video-game-classic_pink.svg?mode=dark" referrerpolicy="same-origin" style="display: block; object-fit: cover; border-radius: 3px; width: 78px; height: 78px; transition: opacity 100ms ease-out 0s;">

It's possible to apply a filter over the image to change its colour, e.g. I can turn the pink icon above blue with filter: hue-rotate(245deg), but that doesn't really let me specify the actual colour I want.

An approach using pseudo-elements with mask-image: url(attr(src)) set may be a possible solution, but I haven't had much success with that yet.

@ghost
Copy link

ghost commented Apr 19, 2023

Glad to hear still in active dev! I'm just getting started using Notion and love the enhanced "version"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants