Build a Dark Mode without a White Mode Flash!

  • Опубликовано: День назад

    Coding in PublicCoding in Public
    подписчиков: 41 тыс.

    Right now, the first 500 people to use my link will get a one month free trial of Skillshare" skl.sh/codinginpublic11231
    Join the early access list for my course! learnastro.dev
    In this tutorial, we’ll:
    0:00 Introduction
    1:40 Setup CSS for theme switching
    6:57 Add HTML toggles
    8:37 Skillshare
    10:23 Update/save theme on click with JS
    16:44 Load theme on window DOMContentLoaded
    19:27 Load on SSR with Astro.cookies helper
    🔗 Key Links 🔗
    - Github: github.com/coding-in-public/a...
    🎥 Related Videos 🎥
    - Astro SSG vs SSR: • Choosing between SSR, ...
    ---------------------------------------
    🌐 Connect With Me 🌐
    - Website: codinginpublic.dev
    - Blog: chrispennington.blog
    - Twitter: / cpenned
    - Patreon: / coding_in_public
    - Buy Me a Coffee: www.buymeacoffee.com/chrispen...

@abidibnazam4462
@abidibnazam4462

This is the most needed video.. Thanks CIP

3 месяца назад
@CodinginPublic
@CodinginPublic

Glad it was helpful!

3 месяца назад
@bpj
@bpj

Could view transitions also work, maybe with pre caching

22 дня назад
@ChristinaCodes +1
@ChristinaCodes

Slay queen ✨

3 месяца назад
@CodinginPublic
@CodinginPublic

😂 thx?

3 месяца назад
@igorskyflyer
@igorskyflyer

Why is my man Chris a queen?! 🤨🤣

3 месяца назад
@ChristinaCodes
@ChristinaCodes

He just has regal energy

3 месяца назад
@CodinginPublic +2
@CodinginPublic

lol Christina’s a good friend. Trolls will be trolls 😂

3 месяца назад
@CodinginPublic +1
@CodinginPublic

Why u gotta be this way? lol

3 месяца назад
@tanishqmanuja +2
@tanishqmanuja

Great work, but one downside is that this will limit the deployment options such as gh-pages etc.

3 месяца назад
@Yukitocyborg
@Yukitocyborg

There is a way to do it with inline scripting, so the script loads before the page.. Adding a script tag in your should solve this

3 месяца назад
@tanishqmanuja
@tanishqmanuja

Yeah you're right, found a video from adam argyle where he set up the same thing.

3 месяца назад
@CodinginPublic
@CodinginPublic

I’ve not had very consistent success using the head method in the past since the browser still starts to load the default colors before. But I may be doing it wrong. Mind dropping a link to that Adam argyle tutorial in case I’m just doing it wrong? Thanks!

3 месяца назад
@tanishqmanuja
@tanishqmanuja

Real world application - Google search "astro paper template", see live demo. (Not my project but a good reference)

3 месяца назад
@tanishqmanuja
@tanishqmanuja

​@@CodinginPublic, my comments with the link are disappearing on refresh :(

3 месяца назад
@venateshbanagarcse3188 +1
@venateshbanagarcse3188

🙏🙏🙏🙏🙏🙏

2 месяца назад
@matthijszondervan7638 +1
@matthijszondervan7638

Using sever side rendering feels like a cheat 😅

3 месяца назад
@CodinginPublic
@CodinginPublic

lol well you could also use middleware and SSG.

3 месяца назад
@imburgos7
@imburgos7

An example using NextJS and server components will be much appreciated!!!

3 месяца назад
@CodinginPublic +1
@CodinginPublic

Should be very similar. Next had a cookie helper if I remember. They actually use theme as an example in the docs here it looks like. https://nextjs.org/docs/app/api-reference/functions/cookies Hope that helps!

3 месяца назад
@truthteachers
@truthteachers

Again bro, this one is about Astro and the title did not mention this. We would have given skip and not click to find out.

Месяц назад
@CodinginPublic
@CodinginPublic

I try to mention Astro when you can only do something in Astro and keep it more general when I just happen to pick Astro, but you could do it in most any SSR stack.

Месяц назад

Далее

(NEW!) Optimize Image Features in Astro 3.0

18:32

(NEW!) Optimize Image Features in Astro 3.0

Coding in Public

Просмотров 6 тыс.

Astro Did It Again!!

13:13

Astro Did It Again!!

James Q Quick

Просмотров 14 тыс.

Редакция. News: 105-я неделя

45:19

Редакция. News: 105-я неделя

Редакция

Просмотров 1,3 млн

Два года войны

13:51

Два года войны

Алексей Шевцов

Просмотров 647 тыс.

React Dialogs (the right way)

15:46

React Dialogs (the right way)

Coding in Public

Просмотров 2,3 тыс.

Learn HTML5 and CSS3 For Beginners - Crash Course

3:54:03

Learn HTML5 and CSS3 For Beginners - Crash Course

developedbyed

Просмотров 2 млн

Dark mode with TailwindCSS in under 7 minutes

6:58

Dark mode with TailwindCSS in under 7 minutes

Built With Code

Просмотров 10 тыс.

You’re doing dark mode wrong!

7:54

You’re doing dark mode wrong!

Coding in Public

Просмотров 30 тыс.

Live Code: How to work with data in a real project (travel blog!)

2:01:00

Live Code: How to work with data in a real project (travel blog!)

Coding in Public

Просмотров 3,9 тыс.

Live Code: Frontend Mentor FAQ Accordion

2:13:09

Live Code: Frontend Mentor FAQ Accordion

Coding in Public

Просмотров 1,6 тыс.

Raycast for Developers (Best Extensions)

8:48

Raycast for Developers (Best Extensions)

Coding in Public

Просмотров 4,7 тыс.

Choosing between SSR, SSG, and dynamic rendering in Astro

12:19

Choosing between SSR, SSG, and dynamic rendering in Astro

Coding in Public

Просмотров 10 тыс.

Astro View Transitions (3.0 Release!)

16:44

Astro View Transitions (3.0 Release!)

Coding in Public

Просмотров 13 тыс.

РЕАКЦИЯ ОДНОКЛАССНИКА

0:29

РЕАКЦИЯ ОДНОКЛАССНИКА

LINASTYLE

Просмотров 1,4 млн

Các Thầy Đi Xe Gì #thắngtrầnauto #xeôtôlướt

0:16

Các Thầy Đi Xe Gì #thắngtrầnauto #xeôtôlướt

THẮNG TRẦN AUTO (Ô tô Lướt Uy Tín)

Просмотров 18 млн

Танцы под водой😱

0:29

Танцы под водой😱

FilmBytes

Просмотров 6 млн