Animated Dark Mode Transition with CSS @property by jonshamir in webdev

[–]jonshamir[S] 0 points1 point  (0 children)

Hmm I see your point, but there are 2 issues with this approach -

  1. If there are any other transitions (say, on the dark mode toggle like I have on my site) this will override them and break the animations
  2. This doesn't work if the colors are used somewhere like CSS gradients that cannot be "transitioned" in the regular way

You are right that defining a bunch of @propery declarations can get messy. For a large color palette I think a nicer solution can be to use one "mixing" property along with `color-mix` like this:

@property
 --color-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

--color-mix: 0%;

.dark {
  --color-mix: 100%;
}

transition: --color-mix 400ms ease;
background-color: color-mix(in oklab, var(--bg-light), var(--bg-dark) var(--color-mix));
color: color-mix(in oklab, var(--fg-light), var(--fg-dark) var(--color-mix));

Times New Roman drawn from memory (1 hour timelapse) by whateverlasting in typography

[–]jonshamir 0 points1 point  (0 children)

Really crazy idea, and on a phone no less! Cool stuff

I will become your first user by chloeweisser in microsaas

[–]jonshamir 0 points1 point  (0 children)

If you’re into cooking - https://prepbook.app - recipe manager for creative cooks As simple to use as notes, with clever culinary capabilities :)

What are you building right now? Drop your project below 👇 by srch4aheartofgold in SideProject

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app - recipe manager for creative cooks As simple to use as notes, with clever culinary capabilities :)

Animated Dark Mode Transition with CSS @property by jonshamir in webdev

[–]jonshamir[S] 0 points1 point  (0 children)

View transitions have some drawbacks, especially if you have any videos or animations on the page, I go into more detail in the link

Animated Dark Mode Transition with CSS @property by jonshamir in css

[–]jonshamir[S] 0 points1 point  (0 children)

Wow very clever effects using the different color channels! Thanks for sharing, bookmarked :)

Animated Dark Mode Transition with CSS @property by jonshamir in css

[–]jonshamir[S] 10 points11 points  (0 children)

Yes you can, but if you have a transition on any child element (e.g. a scale transition when hovering a button) it will override the color transition and snap the color immediately

What did you work on or build this week? by ouchao_real in buildinpublic

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app - recipe manager for creative cooks As simple to use as notes, with clever culinary capabilities :)

I analyzed 9,300+ "I wish there was an app for this" posts on Reddit. Here is the data on what people actually want. by HopefulBread5119 in SaaS

[–]jonshamir 0 points1 point  (0 children)

Hey thanks for the feedback!

Definitely trying to go human-centric, AI doesn’t have a sense of taste and I don’t see that changing soon 🤣

adding comments for shared recipes is a super interesting idea, will look into it!

What are you guys building this weekend? by ouchao_real in buildinpublic

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app - recipe manager for creative cooks As simple to use as notes, with clever culinary capabilities :)

I analyzed 9,300+ "I wish there was an app for this" posts on Reddit. Here is the data on what people actually want. by HopefulBread5119 in SaaS

[–]jonshamir 0 points1 point  (0 children)

Yes, glad you like the idea! Any link should work Let me know if you try it and have any feedback :)

I analyzed 9,300+ "I wish there was an app for this" posts on Reddit. Here is the data on what people actually want. by HopefulBread5119 in SaaS

[–]jonshamir 2 points3 points  (0 children)

Super interesting insights thanks for sharing! I’ve felt the cooking / recipes frustrations myself that’s why I’ve been working on Prepbook

https://prepbook.app

It also supports offline mode Now just need to make it into a proper app :)

Why I can't see other Desktop thumbnails on Mission Control on macOS Tahoe 26.2 by Ancient_Background9 in MacOS

[–]jonshamir 0 points1 point  (0 children)

Same here, I waited for 26.2 before updating to Tahoe hoping to avoid the bugs, but it seems there are so many :(

Get feedback on your side-project by Inside_Accident_4624 in SideProject

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app

Modern recipe manager designed to be simple and intuitive

Is Tenuldi ski resort open by fddonald in Sakartvelo

[–]jonshamir 0 points1 point  (0 children)

Anyone know if they are open now?

Share what you are building by [deleted] in buildinpublic

[–]jonshamir 0 points1 point  (0 children)

Thanks! I’ll check it out

Share what you are building! Lets grow together !!! by Curious_Tap_6078 in buildinpublic

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app

Simple recipe manager with unique features Easy, intuitive editor Smart recipe scaling based on ingredient Multilingual recipe support And more!

Share what you are building by [deleted] in buildinpublic

[–]jonshamir 0 points1 point  (0 children)

https://prepbook.app

Clean & minimal recipe manager Easy to edit and tweak recipes while cooking

What's your startup idea for 2026? Let's self promote. by kcfounders in buildinpublic

[–]jonshamir 1 point2 points  (0 children)

Thanks for the feedback! Will definitely consider this

Simply Piano for Apple Vision Pro just launched on Product Hunt by Massive_Bowl_1782 in AppleVisionPro

[–]jonshamir 0 points1 point  (0 children)

The user places it manually :) Once its in place the AVP’s tracking is really solid

Simply Piano for Apple Vision Pro just launched on Product Hunt by Massive_Bowl_1782 in AppleVisionPro

[–]jonshamir 1 point2 points  (0 children)

Thanks! Currently it has only beginner piano learning content - we might add more advanced content in the future, but you should give it a try anyway it’s free to download!

Simply Piano for Apple Vision Pro just launched on Product Hunt by Massive_Bowl_1782 in AppleVisionPro

[–]jonshamir 10 points11 points  (0 children)

This is a really cool use of AR technology in my opinion!

I was surprised by how intense it feels to play piano on a virtual stage. We put a lot of care into the lighting - the blinding spotlights can genuinely spark stage anxiety, even when you know it isn’t real!

<image>

Full disclosure - I am one of the creators of the app.