[User Story]: Enable Custom and Accessibility-Focused Color Schemes in the User Interface

[kallewesterling]

Role

As an assurance case editor

Desired Feature

I want to select and apply different color schemes for the user interface of the assurance case editor

Benefit

So that I can customise the appearance to match corporate branding or enhance accessibility for users with visual impairments like color blindness

Acceptance Criteria

GIVEN I am editing an assurance case, WHEN I access the settings menu in the editor interface, THEN I can choose from a list of predefined color schemes, AND I have the option to create a custom color scheme, AND the selected color scheme only affects the interface view and not the exported assurance case.

Dependencies

• [ ] Create a set of predefined color schemes.
• [ ] Create guidelines for creating custom schemes for documentation.

Technical Notes

• Implement functionality using CSS variables to easily switch themes.
• Ensure that color schemes meet WCAG accessibility standards for color contrast.
• Color schemes should be stored in user preferences and applied dynamically during the session.
• Decide on a standard colour scheme (Fruto had originally proposed a monochrome one).

Definition of Done

• [X] The feature fulfills all acceptance criteria.
• [X] The code is reviewed and meets team coding standards.
• [X] All unit, integration, and end-to-end tests are passed.
• [X] The feature meets accessibility standards set for the project.
• [X] The code passes the CI/CD pipeline quality controls (style and linting).
• [X] The feature is merged into the main branch.
• [X] The feature is deployed and functional in the QA environment.
• [X] The feature was demonstrated to the team and accepted by the product owner.