Added Catppuccin Mocha Theme

[Rekit0]

---

Added Catppuccin Mocha Theme

Pull Request Type

• Bugfix
• Feature Implementation

Related issue
Closes: #2394

Description
This PR adds Catppuccin Mocha theme based on Catppuccin Mocha color palette by making the following changes:

• Adds light and dark versions of the logo using Catppuccin Mocha Colors to /FreeTube/_icons.
• Adds new window background color using Catppuccin Mocha base color to /FreeTube/src/main/index.js.
• Adds the base theme and Catppuccin Mocha accent colors to /FreeTube/src/renderer/themes.css.
• Adds .CatppuccinMocha class to /FreeTube/src/renderer/components/ft-share-button/ft-share-button.sass.
• Adds 'catppuccinMocha' base theme value to /FreeTube/src/renderer/components/theme-settings/theme-settings.js.
• Adds Catppuccin Mocha accent colors names and colors in hex to /FreeTube/src/renderer/store/modules/utils.js.
• Adds theme and accent colors name strings to /FreeTube/static/locales/en-US.yaml.

Screenshots

Testing:
Manually tested:

• Selecting the new theme and observing the changes.
• Selecting each new color as the main theme color and observing the changes.
• Selecting each new color as the secondary color and observing the changes.

Desktop:

• OS: Linux Mint
• OS Version: 20.3 (Una)
• FreeTube version: upstream/development

[GilgusMaximus]

Looks good to me. The theme is consistent across pages, the different colors look good.

Nothing is out of the expected and no unnecessary file is changed.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Everything looks good to me! Only noticed that the text gets cut off but i dont know if we really want to address this.

VirtualBoxVM_jTjrHjK6kb.mp4

[Rekit0]

Everything looks good to me! Only noticed that the text gets cut off but i dont know if we really want to address this.
VirtualBoxVM_jTjrHjK6kb.mp4

How about this:

[efb4f5ff-1298-471a-8973-3d47447115dc]

lgtm!

[PikachuEXE]

Tested a few theme colors and a few screens
Might even looks better than what I am using now oops

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @Rekit0 how did u create those icons and how did u know what color to give them?

Asking for #3915

[dotunwrap]

@efb4f5ff-1298-471a-8973-3d47447115dc I'm assuming they used the base (for dark) and text (for light) colors as defined by the official Mocha theme on this repo.

I can easily replicate using the base and text colors for frappe and exporting from GIMP.

[Rekit0]

@efb4f5ff-1298-471a-8973-3d47447115dc I did exactly what @dotunwrap said, I used gimp to change the colors according to Mocha official repo.