Main accent colour: Override auto tint

  • Author
    Posts
  • #163354

    irfanquader
    Member

    Hi Taras,

    When I choose a main accent colour in the customizer, the theme automatically applies a tint to make it darker. Is there a way to override this?

    For example, if I try to choose a deep yellow for the accent colour, the theme displays a dark, murky green instead. Is there a way to display exactly the colour that I choose in the colour picker?

    Best,
    Irfan

    The blog I need help with is thegoodlifewithiq.com.

    #163355

    irfanquader
    Member

    Sorry, the site I’m referring to is: https://ensocounselling.com

    #163382

    tarasdashkevych
    Theme Author

    Hello Irfan,

    Custom Colors functionality from WordPress.com automatically generates some colors based on selected color.

    In my opinion, the easiest (and more flexible) way to specify a custom color for an accent color is to use a custom CSS.

    The theme provides an easy way to change this color using this simple custom CSS:

    
    body {
      --th-color-accent-dark: #2516C7;
      --th-color-accent-base: #1B4FAF;
      --th-color-accent-light: #30C9E8;
    }
    

    There are three version of the accent color: dark, base and light. Mostly, the theme uses base accent color.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163392

    irfanquader
    Member

    Hi Taras,

    I tried copying the code into the custom CSS section of the customizer, but it isn’t being accepted.

    These parts of the code are showing in red:

    color-accent-dark: #2516C7;
    color-accent-base: #1B4FAF;
    color-accent-light: #30C9E8;

    #163403

    tarasdashkevych
    Theme Author

    Hi Irfan,

    I’ve just run a few tests at WordPress.com, and it looks like WordPress.com does not allow to use CSS variables in the Custom CSS.

    It looks like CSS variables works fine in the Customizer, but after saving the changes, the actual site does not display that custom CSS. It seems like WordPress.com simply strips out these CSS when saving the changes. Here is a screenshot from the Customizer at WordPress.com: https://snipboard.io/viVz1l.jpg

    However, it works fine on a self-hosted WordPress installations (WordPress.org). So, I hope WordPress.com will fix this issue soon. I am going to report this issue to a WordPress.com team today.

    Alternatively, you may try to use this plugin (https://wordpress.org/plugins/simple-custom-css/), as a source of your custom CSS.

    Here a custom CSS:

    
    :root {
      --th-color-accent-dark: #2516C7;
      --th-color-accent-base: #1B4FAF;
      --th-color-accent-light: #30C9E8;
    }
    

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘Main accent colour: Override auto tint’ is closed to new replies.