feat: dark mode & theme switching

[doug-andrade]

Added theme switching to feat/refresh

https://www.loom.com/share/57687e631ab34cecb37b670a69bff8d8

Needs Work:

• Sign In Page
• Sign Up Page
• Signature Pad Stroke Color in Dark-mode

^ To complete these pages I will need "dark-mode" versions of the image assets and background pattern.

Build Result

web % npm run build

> @documenso/web@0.1.0 build
> next build

...
...
...

Route (app)                                Size     First Load JS
┌ ○ /                                      135 B          77.6 kB
├ λ /dashboard                             0 B                0 B
├ λ /documents                             0 B                0 B
├ λ /documents/[id]                        0 B                0 B
├ λ /settings                              0 B                0 B
├ λ /settings/billing                      0 B                0 B
├ λ /settings/password                     0 B                0 B
├ λ /settings/profile                      0 B                0 B
├ ○ /signin                                0 B                0 B
└ ○ /signup                                0 B                0 B
+ First Load JS shared by all              77.5 kB
  ├ chunks/7fd0f9f1-3fb3dc3e14815666.js    50.5 kB
  ├ chunks/9-cf592fc7a319a8e7.js           24.4 kB
  ├ chunks/main-app-9a6c377ca6c4fdfa.js    211 B
  └ chunks/webpack-41c748f0fd6fc070.js     2.34 kB

Route (pages)                              Size     First Load JS
┌ ○ /404                                   178 B          86.7 kB
├ λ /api/auth/[...nextauth]                0 B            86.5 kB
├ λ /api/claim-plan                        0 B            86.5 kB
├ λ /api/document/create                   0 B            86.5 kB
├ λ /api/stripe/webhook                    0 B            86.5 kB
└ λ /api/trpc/[trpc]                       0 B            86.5 kB
+ First Load JS shared by all              86.5 kB
  ├ chunks/main-c32231f5001c0b96.js        84 kB
  ├ chunks/pages/_app-415a5670032b79f5.js  190 B
  └ chunks/webpack-41c748f0fd6fc070.js     2.34 kB

ƒ Middleware                               22.9 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

[Mythie]

This is really great work Doug! The signature pad is going to be a pain since it is actually storing it as an image, I'd probably suggest dealing with the background of the canvas and then using filter: invert(1) for the stroke even if it is a bit dirty.

This is mostly because we want to keep the black stroke since it's going to be placed onto the outgoing PDF 😄

[doug-andrade]

The signature pad is going to be a pain since it is actually storing it as an image, I'd probably suggest dealing with the background of the canvas and then using filter: invert(1) for the stroke even if it is a bit dirty.

This is mostly because we want to keep the black stroke since it's going to be placed onto the outgoing PDF 😄

Solution:
Decided the best route was to filter: invert(1) the entire canvas
Then set the signature-pad.tsx background and border colors to the inverse of the the correct colors using a dark: tag

#e2d7c5 as inverse of:

.dark {
  --border: 216 34% 17%;
}

#fcf8ee as inverse of:

.dark {
  --background: 224 71% 4%;
}

Video:
https://www.loom.com/share/d85e2b6a8f5247b49c37e285c473b5df

[doug-andrade]

Just wrapped up the signin.tsx and signup.tsx pages.

Before Styling:

After Styling:

Video:
https://www.loom.com/share/a7c6ce76a3404c72a10296f9e85e6f5f

Solution for Background Image:
className="dark:brightness-95 dark:invert dark:sepia"
I think it turned out looking very nice. However, if keeping the subtle green gradient is important we can just create a second version of the image.

Zoomed Inspection of Background Image Variations:

[Mythie]

Looks great 🤩 Is there anything else you'd like to add otherwise I'm happy to merge!

[doug-andrade]

I'm happy with it for now.

Send it 🎉

[Mythie]

Thanks for your contribution 🎉

[Mythie]

/tip 150

[algora-pbc]

👉 @Mythie: Click here to proceed

[algora-pbc]

@doug-andrade: You just got a $150 tip! 👉 Complete your Algora onboarding to collect your payment.

[algora-pbc]

🎉🎈 @doug-andrade has been awarded $150! 🎈🎊