GraphQL

Laravel

NextJS

ReactJS

TailwindCSS

Dark mode is an essential feature in any modern application. Why is there nothing more irritant than going to a website with a white background at 1AM. Users expect dark mode out of the box. They aren't interested in your excuses and they also don't care how long it will take to implement, they just want dark mode!

# Below, what you will learn in this article:

- Next.js: The React framework
- TailwindCSS: A utility CSS framework
- Next-themes: An abstraction for themes for Next.js apps

# Getting started

Create your Next.js application with the command:

```bash
yarn create next-app --typescript
# or
npx create-next-app@latest --ts
```

And add Tailwind as a development dependency in the application:

```bash
yarn add tailwindcss autoprefixer postcss -D
# or
npm install -D tailwind autoprefixer postcss
```

Then install the TailwindCSS Typography plugin. It provides a set of prose classes that provide consistently typographic patterns:

```bash
yarn add @tailwindcss/typography -D
# or
npm install -D @tailwindcss/typography
```

Now, one thing I always like to do is move the `pages` folder into `src` folder, and delete the `styles` folder from the root.

The next step will be to create the Tailwind configuration file in the root directory called `tailwind.config.js`. This file provides TailwindCSS the information it needs to correctly run in your environment.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}"
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}
```

When you add `darkMode: 'class'` to the configuration file, you tell TailwindCSS to include all CSS utility classes for dark mode. This enables a dark variant that you can now add as classes to your React elements like `className="bg-white dark:bg-gray-700"` and the correct class will be provided when **dark** is active on your **html** element.

# Creating a theme with React Hooks

There are many ways to approach the problem of changing themes. And with the `next-themes` implementation this becomes easier.

Run the command:

```bash
yarn add next-themes
# or
npm install next-themes
```

And then open the `src/pages/_app.tsx` file and import the `ThemeProvider` and wrap your application `Component` with it:

```javascript
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <ThemeProvider attribute={'class'}>
        <Component {...pageProps} />
      </ThemeProvider>
  );
}

export default MyApp
```

# Toggling between dark and light mode

Now let's create the component to do a theme switch. I'll call it `Switcher`, and since it's a component, it's located inside the `components` folder:

```javascript
// ./src/components/Switcher/index.tsx

import React from 'react';
import { useTheme } from 'next-themes';

export function Switcher() {
  const { theme, setTheme } = useTheme();

  const changeTheme = (event: React.MouseEvent<HTMLInputElement>) => {
    setTheme(theme === 'dark'? 'light' : 'dark');
  }

  return (
    <div className={'fixed top-1/4 -right-1 z-3'}>
      <span className={'relative inline-block'}>
          <input type={'checkbox'} id={'chk'} onClick={changeTheme} />
          <label className={'label bg-slate-900 dark:bg-white dark:shadow-gray-800 cursor-pointer'} htmlFor={'chk'}>
              Switch theme
          </label>
      </span>
    </div>
  );
}
```

Now that we have everything ready, let's build our index page:

```javascript
// .src/pages/index.tsx

import type { NextPage } from 'next';
import { Switcher } from '../components/Switcher';

const Home: NextPage = () => {
  return (
    <div className={'text-base text-black dark:text-white dark:bg-slate-900 mx-auto'}>
      <h1>Hello world!</h1>
      <Switcher />
    </div>
  );
};

export default Home;
```

And that's it, now just run the `yarn dev` command in your terminal to see the final result.

I hope this has given you an idea of how to implement light and dark modes in your application. ☀️🌙

Thank's !

Dark mode with Next.js and TailwindCSS

I recently worked on a project where the requirement was to send emails via Amazon SES, and here in this article I will share with you what I learn.

# Setting up AWS SES driver in Laravel

*Remembering that before that it is necessary to go to the AWS console and configure an email address and enable sending.*

Install AWS SDK with this command: `composer require aws/aws-sdk-php`.

Open and edit your .env file which is found in root of your Laravel application:

```env
MAIL_MAILER=ses
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME=

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=
AWS_BUCKET=
AWS_SES_CONFIGURATION_SET_NAME=bounces
```

Go to config/services.php, and config it as follows:

```php
<?php

return [
  ...
  'ses' => [
    'key' => env('AWS_ACCESS_KEY_ID'),
    'secret' => env('AWS_SECRET_ACCESS_KEY'),
    'region' => env('AWS_DEFAULT_REGION'),
    'configuration_set' => env('AWS_SES_CONFIGURATION_SET_NAME'),
  ]
];
```

# Creating email

Let’s generate a Laravel Mailable with this command:

```bash
php artisan make:mail TestSendAmazonSesMail
```

You should now have a file at this path: `app/Mails/TestSendAmazonSesMail.php`. Add this content to it:

```php
<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Message;
use Illuminate\Queue\SerializesModels;

class TestSendAmazonSesMail extends Mailable implements ShouldQueue {

  use Queueable, SerializesModels;

  public function __construct() {}

  public function build(): Mailable {
    return $this->from('from@mail.com')
      ->subject('Subject')
      ->view('path-to-view', [])
      ->withSwiftMessage(function ($objMessage) {
        /* @var $objMessage Message */
        $objMessage->getHeaders()->addTextHeader('x-ses-configuration-set', config('services.ses.configuration_set'));
    });
  }

}
```

Now we just have to send the email where we want. I will create a route /test to test that everything works well.

In `web/routes.php` add:

```php
<?php
...
Route::get('test', function () {
  Mail::to('john.doe@mail.com')->send(new TestSendAmazonSesMail('It works!'));
});
```

You should receive the email on the indicated address.

I hope this helps. Thanks! ✌️ 

Dark mode with Next.js and TailwindCSS

Author

Tags Cloud

Contact Me

Have question? Get in touch!