feat: Added dark mode to site

[pateldivyesh1323]

Description

Added Dark mode feature to the site

Linked Issues

Fixes : #25

Video

CEL.Playground.-.Google.Chrome.2023-10-03.00-23-21.mp4

How has this been tested?

• Click on the theme toggle button and change the mode

Checklist

• I have labeled this PR with the relevant Type labels
• I have documented my code (if applicable)
• My changes are covered by tests

[CLAassistant]

All committers have signed the CLA.

[matheusfm]

Thank you for opening the PR, @pateldivyesh1323!
I appreciate your contribution.

Could you please consider implementing the persistence of the user's chosen theme?
Currently, it reverts to the default light theme upon page refresh, and having theme persistence would greatly enhance the user experience. One approach to achieve this could be using localStorage.
Sorry for not including this in the issue description.

We will also provide you with the color palette for the dark theme next Monday (October 9th), as soon as our Designer returns.

[matheusfm]

Hi @pateldivyesh1323,

We've prepared a Figma design with precise color details and improvements for our dark mode. You can access it here: https://www.figma.com/file/pasjtGKiZws9pkiVK9Gzp3/Playground?type=design&node-id=0-1&mode=design

Here are the key changes:

• Adjusted the shade of purple.
• For dark mode, textareas should use the Tomorrow Night Ace theme.
• The output textarea should be a disabled Ace editor to ensure we can use the Tomorrow Night theme in text mode.
• Please ensure that the user's chosen theme (dark or light) persists, as discussed in the previous comment.

You can interact with the Figma prototype here: https://www.figma.com/proto/pasjtGKiZws9pkiVK9Gzp3/Playground?type=design&node-id=29-836&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=29%3A836&hide-ui=1

Could you please implement these changes?

Thank you for your patience.

[pateldivyesh1323]

@matheusfm I have made some commits and need a review on it.

I am confused with

• The Output text area, as it currently does not use ace-editor, and implementing ace-editor on it breaks
  some things.
• should text color of input text areas should be changed as shown in figma?

[matheusfm]

• should text color of input text areas should be changed as shown in figma?

It's not necessary. For these two areas, just use themes clouds (current) and tomorrow_night for the light and dark modes, respectively.

• The Output text area, as it currently does not use ace-editor, and implementing ace-editor on it breaks some things.

What excatly does it break?

[matheusfm]

@pateldivyesh1323
If using ace-editor on the output textarea doesn't work, you can try setting the same background color to match the 'tomorrow night' theme.

[pateldivyesh1323]

@matheusfm ok, I will do that.

[pateldivyesh1323]

@matheusfm Updated.

[matheusfm]

Awesome, @pateldivyesh1323!
Thank you very much for your contribution and collaboration.
We really appreciate it.

[0xHericles]

Impressive, guys! @matheusfm @pateldivyesh1323