# Feature OP-11935 - Update date picker and associated components to use current theme colours
Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-11935
## Planning
| Attribute | Value |
| --- | --- |
| Date | |
| Priority | Medium |
| Target versions | 12.5.0 |
| Sprint | 12.5.0 |
| Backlog bucket | |
| Votes | |
| List | |
| Roadmap | |
| Relevance | |
## OPEN POINTS / FEEDBACK
_No work packages_
## Features and Chunks
_No work packages_
## Bugs and other work packages
_No work packages_
## Technical Details
| Attribute | Value |
| --- | --- |
| Module | |
| Feature Flag | |
| Requires doc change | No |
| Enterprise plan | |
## Details
| Attribute | Value |
| --- | --- |
| Pull preview | |
| Mockups | |
| Found in mobile app version | |
| Follow-up feedback e-mail | |
| Accessibility | No |
## People
| Attribute | Value |
| --- | --- |
| Assignee | |
| Accountable | |
| Product manager | |
| Developers | |
| Designer | Parimal Satyal |
| Ordered by | |
| Signed off by | |
| Interest by | |
## Estimates and progress
| Attribute | Value |
| --- | --- |
| PD (min) | |
| PD (max) | |
| Work | |
| Labor costs | |
## Description
### Context
Today, the date picker only partially adapts to the current theme. This was as specified initially for 12.2 (\#42047) and then updated for 12.3 (to include non-working days, \#41341).
The active field colour, links and action bar take the theme colours but the date selections in the mini calendar and the switches do not. Iinstead, they use shades of the OpenProject blue: *Main/Main* for the primary blue, and *Main/Light* for the lighter blue to indicate selection.
Here's an example of what a date picker in a red SouvAP theme looks like, with the OpenProject blue mixing with the theme red:
### Known issues
The current theming system (in *Administration → Design*) does not use the colour system we use in our Design system, notably because we are still working on a consistent way to handle themed colours.
**To allow the current date picker to adapt to existing themes, we have to find a way to derive certain colours (for example** ***Main/Main Light*****).**
For reference, there was a work package to map these colours for 12.2, which we descoped in favour of using the standard blue in the date picker: ###42165
- Our current theming system allows the user to select a **primary colour** (here: \#9E292B) that we use for the buttons; we can use this for the start/end dates.
- We need a lighter colour for selections but can't use any user-defined value defined (the user can set "alternative" and "dark" colours but we can use neither, since they can be any colour).
This work package aims to make the date picker adapt to the current theme before we define a proper theme-sensitive colour system for our Design system.
### **Acceptance criteria**
For the mini calendar:
- Use **Primary colour of the theme** for the selected start and finish dates (instead of Main/Main).
- **Derive a lighter shade** for the background of dates in the selected range between the start and end dates (Main/Main Light, using *Minor 3* as a reference).
- Use this lighter shade as foreground colour for non-working days when the selection spans non-working days, over the current grey.
For the switches:
- Use **Primary colour of the theme** for the main switch colour (instead of Main/Main), and for the outlinen when ON.
- Use the derived lighter shade of the primary colour (Main/Main Light, using *Minor 3* as a reference) of the theme as the background of the switch when ON.
### Visuals
**Themed date picker with a selected range:**
**Themed date picker with banner:**
**Themed date picker (basic):**
