Back to course
38 views
0% completed

Adding dark mode

We can't ship this without adding dark mode support, can we?

Video thumbnail

Get full access

You need to subscribe to get full access to the video and lesson content.

Join 6.5K+ learners from companies like Shopify, Microsoft, Tiktok, AppSumo and Instacart.

$229
one-time payment

We're now at the stage where we can implement dark mode and make some UI improvements before deploying the app. Let's go through the changes we've made:

  1. Initially, we added the dark class to the <html> element in app.blade.php and public.blade.php .
  2. We then modified our app.js to dynamically add the dark class based on the user's system preferences.

UI Improvements

Background Colors

We updated the background colors for dark mode:

  • Main background: dark:bg-zinc-900
  • Navigation: dark:bg-zinc-900
  • Menu items on hover: dark:bg-zinc-800

Table Styling

We improved the table styling for dark mode:

  • Table header: dark:bg-zinc-800
  • Table body: dark:bg-zinc-800
  • Divider lines: dark:divide-zinc-700

...

Subscribe now to get full access to the lesson content.

Get started →

Get full access

You need to subscribe to get full access to the lesson content.

Join 6.5K+ learners from companies like Shopify, Microsoft, Tiktok, AppSumo and Instacart.

$229
one-time payment

Course Progress