[Feature Request]: Grey option for main and secondary color theme

[bungadrum]

Guidelines

• I have searched the issue tracker for a feature request that matches the one I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.

Problem Description

Can you add a Light-Dark Grey color option for Main and Secondary color theme ?

Proposed Solution

Can you add a Light-Dark Grey color option for Main and Secondary color theme ?

Alternatives Considered

Can you add a Light-Dark Grey color option for Main and Secondary color theme ?

Issue Labels

new feature, new optional setting

Additional Information

Here are some color sample suggestions:

Davy’s Gray
Hex #555555
RGB 85, 85, 85
CMYK 0, 0, 0, 67

Dark Gray
Hex #A9A9A9
RGB 169, 169, 169
CMYK 0, 0, 0, 34

Battleship Gray
Hex #848482
RGB 132, 132, 130
CMYK 0, 0, 2, 48

Gray
Hex #808080
RGB 128, 128, 128
CMYK 0, 0, 0, 50

Dim Gray
Hex #696969
RGB 105, 105, 105
CMYK 0, 0, 0, 59

[fdarcey]

I've added grey options to the FreeTube/src/renderer/themes.css file. I'm going to look for the code that makes these options in the settings - themes settings area of the website and add the greys there. If I don't succeed by December I'll provide a download for the updated themes.css file.

[shadycloud]

We tested it on my machine. Color changing works, but we still have "Settings.player Settings." code showing up in the UI to figure out.
This seems like important info, node_modules/@isaacs/cliui/node_modules/ansi-styles/readme.md:All supported style strings are exposed as an array of strings for convenience. colorNames is the combination of foregroundColorNames and backgroundColorNames.

cloud@cloud:~/FreeTube$ grep -r colorNames
src/renderer/components/theme-settings/theme-settings.js:    colorNames: function () {
grep: src/renderer/components/theme-settings/.theme-settings.vue.swp: binary file matches
src/renderer/components/theme-settings/theme-settings.vue:        :select-names="colorNames"
src/renderer/components/theme-settings/theme-settings.vue:        :select-names="colorNames"
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js:    colorNames: function () {
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.vue:      :select-names="colorNames"
node_modules/@isaacs/cliui/node_modules/ansi-styles/readme.md:### `modifierNames`, `foregroundColorNames`, `backgroundColorNames`, and `colorNames`
node_modules/@isaacs/cliui/node_modules/ansi-styles/readme.md:All supported style strings are exposed as an array of strings for convenience. `colorNames` is the combination of `foregroundColorNames` and `backgroundColorNames`.
node_modules/@isaacs/cliui/node_modules/ansi-styles/index.d.ts:export const colorNames: readonly ColorName[];
node_modules/@isaacs/cliui/node_modules/ansi-styles/index.js:export const colorNames = [...foregroundColorNames, ...backgroundColorNames];
cloud@cloud:~/FreeTube$ vi 

[fdarcey]

[fdarcey]

The reason I got the "Setting.theme..." text to stop was because I put the greys into the colors section of en-US.yalm. The static/locales folder has files for other languages, so the problem will persist for those languages until the other files are given their versions.