Color flicker when a custom color is used

Created on 1 March 2024, 9 months ago
Updated 10 April 2024, 8 months ago

Problem/Motivation

If a custom color is used from settings, the page initially shows grey background color & then loads in the color. Also color for other elements like buttons, links, etc flickers. See attached video .

Steps to reproduce

Go to gin settings & select custom accent color.

Save the configuration & navigate between pages.

Proposed resolution

The color overrides should be injected into the head element instead end of the body.

Feature request
Status

Postponed

Version

3.0

Component

Code

Created by

🇮🇳India tanmayk Maharashtra

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @tanmayk
  • Status changed to Closed: works as designed 9 months ago
  • 🇨🇭Switzerland saschaeggi Zurich

    I'm closing this as we moved it out of the head for security (CSP) reasons.

    If you use aggregation the switch should be barely visible. Maybe in the future we can generate a CSS file but for now we'll keep it as-is as we have other priorities and no functionality is impacted here.

    Cheers!

  • Status changed to Active 9 months ago
  • 🇺🇸United States mglaman WI, USA

    CSP blocks inline styles? Why couldn't it add a style tag to the head? Changing from a bug to a feature given it's not being considered a bug. The feature request being a refactor from JavaScript based injection to an inline style declaration.

  • Status changed to Postponed 9 months ago
  • 🇨🇭Switzerland saschaeggi Zurich

    Moving this to a feature request sounds good to me.

    There were (strong) arguments against it back in the day and thus we have changed the implementation towards the JS solution but I'll have to find them as it has been a while 😅

    Moving this to backlog for now, if anyone wants to pick it up in the meantime feel free to do so. Just make sure we don't break the live preview feature in settings.

  • 🇺🇸United States mglaman WI, USA

    Thanks saschaeggi! We may workaround it on our end but I'd like to push a patch. Also, good to know about the live preview. We could have the JS update the existing style element if it exists or insert if not.

  • Pipeline finished with Failed
    9 months ago
    Total: 250s
    #117034
  • Pipeline finished with Failed
    9 months ago
    Total: 217s
    #117037
  • Pipeline finished with Success
    9 months ago
    Total: 248s
    #117046
  • Pipeline finished with Success
    9 months ago
    Total: 275s
    #117047
  • 🇺🇸United States mglaman WI, USA

    We've got an MR open. I'll move away from Postponed once its been reviewed and worked a bit more. But we're using this code.

  • Pipeline finished with Success
    8 months ago
    Total: 222s
    #118212
  • Pipeline finished with Success
    8 months ago
    Total: 309s
    #118213
  • Pipeline finished with Success
    8 months ago
    Total: 247s
    #142765
  • Pipeline finished with Success
    8 months ago
    Total: 253s
    #142766
  • Pipeline finished with Success
    8 months ago
    Total: 308s
    #142774
  • Pipeline finished with Success
    8 months ago
    Total: 309s
    #142775
  • 🇺🇸United States mglaman WI, USA

    I wonder if Provide a parser for THEME.colors.yml Needs work will make this easier. If anything, it should provide the helper class for shading.

Production build 0.71.5 2024