Add Additional Accent Colours to Theme. #35

Closed
opened 2025-07-22 22:53:28 -04:00 by Cutieguwu · 5 comments
Owner

Currently there exists only:

  • --accent-blue
  • --accent-green
  • --accent-pink
  • --accent-purple

But the Quick Links panel is configured for five.

Also, currently, as of c0b98a1f1d this leads to some issues with where the eye is drawn around the menu. The Issue Reporting Quick Link uses --accent-pink as does all of the chunk of text above it. Thus, your eyes are drawn to see this:

image.png

In an effort to fix this and lend some more flexibility into future theming endeavors, the theme should include some additional accents.

Proposed colours include:

  • Red
  • Orange
  • Yellow
  • Indigo?
  • Cyan
  • Magenta?
Currently there exists only: - `--accent-blue` - `--accent-green` - `--accent-pink` - `--accent-purple` But the Quick Links panel is configured for five. Also, currently, as of c0b98a1f1d666f1e6c1bd5dd04f61428f012c08d this leads to some issues with where the eye is drawn around the menu. The Issue Reporting Quick Link uses `--accent-pink` as does all of the chunk of text above it. Thus, your eyes are drawn to see this: <img width="186" alt="image.png" src="attachments/4a454818-0c2c-4aa6-8ae8-656cf632066a"> In an effort to fix this and lend some more flexibility into future theming endeavors, the theme should include some additional accents. Proposed colours include: - Red - Orange - Yellow - Indigo? - Cyan - Magenta?
Cutieguwu added the EnhancementTheme labels 2025-07-22 22:53:28 -04:00
Cutieguwu added this to the Cutieguwu Website V2 milestone 2025-07-22 22:54:03 -04:00
Cutieguwu added this to the Cutieguwu Website V2 project 2025-07-22 22:54:05 -04:00
Author
Owner

Looking into adding colours, Indigo is very difficult to add. Ultimately, it becomes too close with Purple once brought in line with the lightness and saturation of the other accent colours. Magenta can probably be made more distinct to salvage it beside pink. That will mostly be to have a pink that's clear or distinguishable from the block of pink for the nav menu.

In order during testing:
Note: Purple is modified from original to try to make it distinguishable.

Indigo, Purple, Magenta, Pink

image.png
Looking into adding colours, Indigo is very difficult to add. Ultimately, it becomes too close with Purple once brought in line with the lightness and saturation of the other accent colours. Magenta can probably be made more distinct to salvage it beside pink. That will mostly be to have a pink that's clear or distinguishable from the block of pink for the nav menu. In order during testing: Note: Purple is modified from original to try to make it distinguishable. Indigo, Purple, Magenta, Pink <img width="135" alt="image.png" src="attachments/f0b92a98-c2fd-4549-a3e2-386f6e027b9b">
3.1 KiB
Author
Owner

I may have salvaged them all.

image.png
I may have salvaged them all. <img width="132" alt="image.png" src="attachments/418e74dc-09b1-47f5-bbc0-2371b49da8d8">
2.8 KiB
Author
Owner

I'm going to add all of these colours. I have slightly modified --accent-green to make it appear more in line with the other colours. --accent-pink is being left as is since it functions well for the nav menu. I may choose to shift it to a different identifier since --accent-magenta will likely get used more frequently to distinguish icons from site navigation elements.

I'm going to add all of these colours. I have slightly modified `--accent-green` to make it appear more in line with the other colours. `--accent-pink` is being left as is since it functions well for the nav menu. I may choose to shift it to a different identifier since `--accent-magenta` will likely get used more frequently to distinguish icons from site navigation elements.
Author
Owner

Doing touch ups for the commit; Indigo isn't distinguishable.

I'll leave it for now, but I may choose to remove it or purple later.

Doing touch ups for the commit; Indigo isn't distinguishable. I'll leave it for now, but I may choose to remove it or purple later.
Author
Owner

Completed in 9995094d66.

Completed in 9995094d6670b514aad4488d4fa3b838b61e939c.
Sign in to join this conversation.