[TB] Implement Light and Dark Modes page for primary color

[aaronreed708]

Problem/Concern

The outcome from this issue should be the implementation of the Light and Dark Modes page that allows the user to change their design system's color theme at any time, which is the fundamental capability desired by the parent epic, #820. This will include:

• [ ] Implement the logic rules detailed by @lwnoble, detailed below
• [ ] Implement the tri-state controller that controls whether the user sees light mode, dark mode or both

Proposed Solution

Implement the wireframes here: https://www.figma.com/design/Co8gYdDmE64Wv90eWy9FwE/Mentorship---Edit-Theme-Builder-Colors-and-Themes?node-id=201-63801&t=E5PcLhRG9eQhu8VC-4

[aaronreed708]

The rules @lwnoble created for this page is:

NOTE: Once the primary color
is selected by the user the rest of the
site navigation is enabled and the  Dark Mode - the dark mode version of the color appears in the Dark Mode panel .

When a user selects a Theme Color
the following happens:

A  background is set to the selected color  and shade in light mode and the 300 shade of the color in dark mode

A gradient background is created for the color in light mode with color-1 set to the 100 shade and color-2 set to the 300 shade and in dark mode color-1 is set to 200 and color-2 is set to 300

Theme Elements - 
Theme Builder selects a shade of the color that has the required contrast that reflects the selected WCAG small text contrast guidelines (for both light and dark mode) for light shades (050-100) and dark shades (800-900)

Theme builder selects a shade with a 3.1:1 contrast to the background for the icon (for both light and dark mode) for light shades (050-100) and dark shades (800-900)

IF PRIMARY Theme builder selects a shade of the color that has the required contrast that reflects the selected WCAG small text contrast guidelines for the hotlink color in both light and dark mode.

IF PRIMARY Theme builder selects a of the shade that has a 3.1:1 contrast to the background color for the button in light mode and dark mode

IF PRIMARY Theme builder selects a shade of the color that has the required contrast that reflects the selected WCAG small text contrast guidelines for the hotlink color in both light and dark mode.


If the rules change or there are differences in the rules and the implementation, they must be captured in this issue or in the issue that details the changes so that they are captured and be referenced at any time in the future.