Skip to main content
L
luigim5441160
Participating Frequently
March 24, 2022
Question

Create a white solid color which is not detected as #FFFFF by XD

  • March 24, 2022
  • 2 replies
  • 2104 views

Hi,

 

I'm working on a project which has 2 themes versions: Dark and Light.

Some colors on dark theme needs to be converted in white on the light theme.

The issue is that when I edit these colors in white, they will disappear from components palette and there is no way to keep them. This is quite annoying... about text for exemple, it will not be possible to change them with a single color palette edit and all the components and text wich are in white, will be no longer editable via the color palette assets.

I'm wondering if there is a way to have so a white color which can be interpretated as a custom swatch by Adobe XD, just like Adobe Indesign do with "Paper" swatch in order to differentiate this from white.

 

Any toughts?

    This topic has been closed for replies.

    2 replies

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    March 24, 2022

    Hey there. I agree it's a bit confusing how that works. These colors in the assets are essentially swatches, so if you change one and make it the same as another, it kinda doesn't make sense for both of them to exist. If they were "layer styles", similar to CSS classes in web development, then it would make sense for them to be independent entities.

     

    What we actually need is a way to select all objects with a certain fill color, and select a different swatch to be applied to them, instead of changing the swatch itself. There's a neat plugin called Selection, which does this - you can select one object, and then use the plugin to select all objects with the same fill color - this way you can change them without modifying the swatches and keep all the colors. Try it out and see if it does the trick 🙂

     

      L
      luigim5441160Author
      Participating Frequently
      March 24, 2022

      Thanks for your reply @Spas K. 

      I do know the plugin you mention, by the way it is very important to me to have a white swatch because you will always have the color reference and expecially for text, it will be very useful, also while you have to create a web UI kit and work in a team. Imagine having all your dark components text and some other elements like icons in white and then you have to switch white text to a dark grey but not the icons; you could still have a swatch reference and keep it in the assets. So in order to better comunicate with developers, you could always have a swatch with his own code and his HEX reference and easly show what color has to switch beetween a theme to another. Of course, you could change the main state of components but then you have to do this on all components.

      I understand the CSS based concept, but in real life of design this is not quite the same...

       

      I post an attachement to show you and community why (in my humble opinion) not having a white asset swatch is not optimal.

      Spas K.
      Community Expert
      Spas K.Community Expert
      Community Expert
      March 24, 2022

      I guess I don't understand how having multiple swatches will help you. If you want to have one white swatch for icons, another for text, and another for buttons so you can target them differently, the problem is not the color, but grouping elements in certain categories and bulk-changing their colors independently. When you edit a swatch, you are editing the color itself and any instance in which it is used (text, borders, fills, etc.) Xd sees these just as colors, not properties, so it doesn't make sense for it to have 2 instances of the same color as they would target the same elements upon change.

       

      In your case the best practice is to have a strong naming convention for different categories of elements. So all your icons would be icon-home, icon-close etc., and you can target them via their name and change the color of all icons at once. Same goes for other elements. So we mostly need better selection, naming & filters. Figma for example excels in that regard, because they have properties for variants and you can bulk rename groups of items to have a dark/light prefixes and target them easily.

       

      CSS classes are real life, because that's how the whole web is styled. You have classes which carry both color and other characteristics. So you can have an "icon" style / class, another for text, and another for other elements. This way you would be able to control both color and other features like shadows, borders, etc. In Xd you have colors, text styles (that carry both color and font properties), and components which can be sort of used as classes, but not really. So being able to attach a 'class' or a 'style' to some elements and modify their properties together later on would be great, but alas 🙂 There's even a feature request for it, although the context of it is a bit different.

       

      When I've had to create light and dark themes in Xd, I've handled them in separate files, since Xd still has a lot of catching up to do when it comes to organizing design systems. This gives you better separation so there's no danger in modifying or destroying the colors on your other theme.

        L
        luigim5441160Author
        Participating Frequently
        March 24, 2022

        Just to make my self clear, please see the attachement of what I think could be helpful in order to control and edit all elements in white color. And if there is a way to get a similar result do not hesitate to let me know.

         

        Thanks

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices