Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Catppuccin Mocha Theme #2395

Merged
merged 3 commits into from
Jul 20, 2022

Conversation

Rekit0
Copy link
Contributor

@Rekit0 Rekit0 commented Jul 12, 2022


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
Screenshot_2022-07-12_03-32-16
Screenshot_2022-07-12_01-59-01
Screenshot_2022-07-12_01-59-44
Screenshot_2022-07-12_02-01-06
Screenshot_2022-07-12_01-58-10

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

@PrestonN PrestonN enabled auto-merge (squash) July 12, 2022 02:59
@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc added the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 12, 2022
GilgusMaximus
GilgusMaximus previously approved these changes Jul 14, 2022
Copy link
Contributor

@GilgusMaximus GilgusMaximus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

Rekit0 commented Jul 16, 2022

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:
Screenshot_2022-07-16_13-56-19

auto-merge was automatically disabled July 16, 2022 13:08

Head branch was pushed to by a user without write access

@PrestonN PrestonN enabled auto-merge (squash) July 16, 2022 13:08
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

Copy link
Collaborator

@PikachuEXE PikachuEXE left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@PrestonN PrestonN merged commit e14a579 into FreeTubeApp:development Jul 20, 2022
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 20, 2022
@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
Copy link

@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
Copy link
Contributor Author

Rekit0 commented Aug 27, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: Add Catppuccin Mocha Theme
6 participants