use color-mix with variables

  • BabaBambule

    23 days ago

    So basically a follow up to this post

    https://discord.com/channels/972416966683926538/1266378893292732436/1266381383425720351

    I want to add color-mix to my theme and using it like this
    color-mix(in, oklab, #E85002, 80%, #FFFFFF, 20%)

    already works, but I'd like to replace the fixed color values for var(--brand) and var(--white)

    but writing
    color-mix(in, oklab, var(--brand), 80%, var(--white), 20%)
    always converts to
    color-mix(in, oklab, --brand, 80%, --white, 20%)

    and doesn't work anymore. Is that just not possible yet or am I missing something?
  • Erik Beuschau

    23 days ago

    That sounds like a bug on our end in our CSS parsing 🤔 I'll check if we can fix this 🤞
    🚀1
  • Erik Beuschau

    23 days ago

    Just to clarify. This is after entering the value in the color picker when setting up a color in your theme right?
  • /attachments/1450462934621880382/1450473984746459207/image.png

    BabaBambule

    23 days ago

    yep so entering the values manually works just fine
    image.png
  • but whenver I enter color-mix(in oklab, #hex 80%, #hex 20%) it converts the output to this color-mix(in, oklab, #6d7a79, 80%, #FFFFFF, 20%)
  • /attachments/1450462934621880382/1450474488012734579/image.png

    BabaBambule

    23 days ago

    color-mix(in oklab, var(--brand) 20%, #FFFFFF 80%) this gets converted to this color-mix(in, oklab, --brand, 20%, #FFFFFF, 80%) but doesn't work
    image.png
  • Erik Beuschau

    23 days ago

    Got it 👍 I'll check if I can fix this in the color picker 🤞
  • /attachments/1450462934621880382/1450480963254489128/CleanShot_2025-12-16_at_14.30.372x.png

    Erik Beuschau

    23 days ago

    I know that we're planning to deprecate the current theme system very soon, and it seems that inputting your color-mix function in the new theme setup does seem to work.
    You can try it out by enabling the Style-Variables-V2 on this page https://editor.nordcraft.com/flags
    We hope to release the new theming system before Christmas, but it might be delayed until early January.

    I hope that's okay for now, since we would prefer not to touch/break anything in the existing theming system 😅
    CleanShot_2025-12-16_at_14.30.372x.png
  • BabaBambule

    23 days ago

    before I enable the flag. Does it potentially break my current projects? otherwise I'd clone my current project first and try it there
  • Tod

    23 days ago

    Great job @BabaBambule! Your contribution to the Nordcraft Community just made you advance to Community Level 4! 🌲
  • Erik Beuschau

    23 days ago

    It should not. But it does mean that you need to "migrate" your current theme. You can just do it on a fresh branch on your project, and check if things work as expected. If not, just delete the branch again
  • BabaBambule

    23 days ago

    cool created a clone anyway.... can you select multiple variants and delete them?
  • Erik Beuschau

    23 days ago

    I don't believe we support deleting multiple variables in 1 go atm no. @Jacob Kofoed might want to see if this is feasible to include eventually 🤞
    👍1
  • BabaBambule

    23 days ago

    alright thx for the quick help. I'll give it a try and see if it breaks too much stuff for now 😅
    👍1
  • /attachments/1450462934621880382/1450485837694505132/image.png

    BabaBambule

    23 days ago

    so neither is working @Erik Beuschau
    image.png
    image.png
  • Erik Beuschau

    23 days ago

    Oh, I tested it and thought it looked alright 🙈 Sorry about that. We'll check what causes this 👍
    👍1
  • /attachments/1450462934621880382/1450486486179905607/image.png

    BabaBambule

    23 days ago

    tried using all syntax modes but doesn't help either
    image.png
  • Erik Beuschau

    23 days ago

    Thanks for trying it out 👍
  • /attachments/1450462934621880382/1450497654994894908/image.png

    BabaBambule

    23 days ago

    FYI @Erik Beuschau this does work
    image.png
    1
  • Jacob Kofoed

    20 days ago

    I will take a look at this 👍 Looks like something funky in our custom CSS parser.
  • Pascal

    20 days ago

    @Jacob Kofoed What am I missing, how do I actually deploy the different themes to a rendered page?

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.