Master 'Dark Mode Toggle' Using Shadcn-ui and Remix - A Practical Guide

preview_player
Показать описание
A detailed guide on implementing applying Dark Mode to your SSR apps using Remix and Shadcn-ui.

Timecodes
0:00 - Intro
1:12 - Requirements of a dark-mode toggle
2:30 - Using next-themes
4:30 - How does next-themes work ?
6:05 - Client preference cookies
7:35 - Client-hint cookie concept
8:37 - Using ch-cookie based on epic-stack
13:04 - Pros of using cookies
14:19 - Tradeoffs
  1. Raj talks tech
  2. Shadcn-ui
  3. frontend
  4. react
  5. remix
  6. nextjs
Рекомендации по теме
Master 'Dark Mode 0:15:07

Master 'Dark Mode Toggle' Using Shadcn-ui and Remix - A Practical Guide

How To Make 0:10:05

How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS

Light/Dark Theme Toggle 0:07:56

Light/Dark Theme Toggle using HTML CSS & JavaScript

Dark Theme Toggle 0:28:01

Dark Theme Toggle - React JS - Switch From Light Theme To Dark Theme - Beginner Tutorial

Build An Easy 0:15:25

Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

Master DARK MODE 0:08:09

Master DARK MODE in REACT - Nobody told you all this was so simple!

Creating 'Enable Dark 0:19:19

Creating 'Enable Dark Mode' Button Using useState Hook | Complete React Course in Hindi #...

Master Dark Mode 0:07:54

Master Dark Mode Toggle In React | Must-know React Interview Questions Answered!

Building a Dark/Light 0:20:14

Building a Dark/Light Mode Toggle for Your Website Using HTML, CSS, and JavaScript | Free Code

Light and Dark 0:15:43

Light and Dark Modes with Color Variables in Figma. How to Create Mode Inheritance.

React Dark Mode 0:11:13

React Dark Mode | Dark Mode Toggle With React and Styled Components

HTML only Dark 0:00:52

HTML only Dark & Light mode!

Cloning Google Font's 0:51:34

Cloning Google Font's Light/Dark Mode Toggle

Framer Update: Light 0:05:45

Framer Update: Light & Dark Mode

CSS Variables | 0:16:19

CSS Variables | Toggle to the Dark Mode using CSS Variables | Complete Web Development Course #29

Light & Dark 0:09:18

Light & Dark Mode with CSS Variables #1 - Intro & Setup

Day Night Toggle 0:01:31

Day Night Toggle button in two minute using Figma

🔦 Light Mode 0:00:29

🔦 Light Mode to 🥸 Dark Mode!!

React Native Dark 0:18:50

React Native Dark Mode - Redux 🔥| Switch between Dark and Light Theme | Engineer Codewala

What Would Happen 0:00:24

What Would Happen If An Inkling Dipped Their Finger In Water? #splatoon3 #shorts

Add Dark Theme 0:14:56

Add Dark Theme To Your React Native & Expo projects | Project & Tutorial For Beginners | Jav...

Mi Turbo Charge 0:00:15

Mi Turbo Charge 👍

Master Dark Mode: 0:10:23

Master Dark Mode: Exciting SwiftUI Side Menu Guide 🧑🏻‍💻

How To Add 0:07:49

How To Add Dark-mode To Your Website

Комментарии
Автор

👍 Very detailed explanation. Although the cookie implementation seems like more effort, I think it scales well. I added a `time zone` client hint so the server can render date/time correctly. It's always helpful when the server has all the information it needs up front to render the page vs potential "flash of incorrect content" on the client.

Kiliman
Автор

Was just struggling with this, thank you!

runever
Автор

Pretty cool! More remix run videos will be appreciated, also and example how to implement remix and shadcn ui" Data Table" from "tanstack/table/v8", that will be awesome!!! 👌

NunoCostapt
Автор

Does Remix has something like "Partial Prerendering" like Nextjs 14 ?

zunnoorainrafi
Автор

How I wish it wasn't so complicated 😭

mailok