**As** a user 
**I want to** be able to use dark mode without bugs
**so that** I don't need to switch back to light mode

**Acceptance criteria**

* Review all the colours used in the light mode to meet the designs provided in the mockups. Specially the background colours as they have been updated.

* Using the designs provided, link all colours of the light mode to the dark mode.

* Double-check the colours implemented to the dark mode are passing the AA accessibility checks.

* Follow this table to switch the colours:

<figure class="table op-uc-figure op-uc-figure_align-center"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Colour name</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Description</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Light mode</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Dark mode</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">mainColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Main colour in the app. Used as an accent colour in various places.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF1A67A3</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">mainLightColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">-- Not used any more --&nbsp;</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD1E1ED</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Base background colour. used in vast majority of screens.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFFFFFFF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgMutedColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Secondary background colour, used as a background for pages or widgets</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFF6F8FA</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgActiveColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Background for activated elements (i.e. when button is pressed, it will have this background). Seldom uses in the app.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD0D7DE</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgLockedColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Background for internal comments&nbsp;</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFEEEAE2</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Main foreground colour. used mainly for texts.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF1F2328</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorMuted</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Foreground colour. Widely used for icons or secondary texts&nbsp;</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF636C76</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorDisabled</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Foreground colour. Used for disabled (inactive) texts&nbsp;</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF8C959F</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorSuccess</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Mainly used for green active buttons</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF1A7F37</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorAttention</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only in for a locker icon for internal comment</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF9A6700</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColorDisabled</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a background colour for disabled buttons</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD9D9D9</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColorSuccessEmphasis</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used for loading square animation, icon for excel files, as mark as read button in notification item (to see it, swipe right on item). Maybe can be merged with <code class="op-uc-code">fgColorSuccess</code></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF1F883D</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColorAccentMuted</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a background colour in selected elements (i.e. for ripple effect)</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFDDF4FF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">borderColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">a default border colour</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD0D7DE</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">borderColorEmphasis</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a border colour for non-focused states of element (i.e. in text fields)</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF6E7781</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">borderColorFocused</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a border colour for focused elements</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF0969DA</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">borderLocked</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only as a border for locked internal comments</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF856D4C</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">colorError</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a default colour for errors (if UI element has a separate error state)</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFCF222E</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">dangerColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Also used as an error colour. Might need to be merged with <code class="op-uc-code">colorError</code> above</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD1242F</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">colorAttention</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as colour of Stars icons and as a background for an audio file type in files tab</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFD4A72C</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fabBgSecondColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as secondary accent colour. Most likey can be replaced with a main one</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFDAFBE1</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bottomBarBgColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as bottom bar background colour</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF24292F</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">colorTextMention</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">a link colour. Is used for texts that has to be clickable. An example is a colour of mentioning: <mention class="mention" data-id="85313" data-type="user" data-text="@Oleksii Borysenko">@Oleksii Borysenko</mention>&nbsp;</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">mainColor</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">mainColor</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorOnEmphasis</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a colour for texts or icons on buttons (when the background for button is too dark). Might need to be replaced with just <code class="op-uc-code">bgColor</code></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFFFFFFF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">inverseSurfaceColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a background colour for snack bars. Might need to be replaced with fg or bg colours</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF2D322C</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">onInverseSurfaceColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used a text colour for snack bars. Might need to be replaced with fg or bg colour.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFEEF2E9</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">accentOnInverseSurfaceColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used a gif file type and as dropdown text colour for relation bottom sheet. Might need to be replaced with mainColour.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF54AEFF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgNeutralMutedColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a colour for shimmer animation effect and for group header colour</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0x33AFB8C1</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgBadgeColor</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as a colour for small blue circle if colour is not read. Also in tabs to show unread count</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF00A3FF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColorSevereOnInverse</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used as an indicator in tab bar (not needed after redesign). Also as an icon colour for MS Power point colours</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFFB8F44</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColorRest</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only as a background for Primer toggle border. Might need to be replaced wit default background colour.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFEAEEF2</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">borderColorRest</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only as a border for Primer toggle border. Might need to be replaced wit default border colour.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFF868F99</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">warningLight</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only as a background of tile on the top of a screen in manual scheduling dialog.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFFFE6C6</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">feedbackInfoLight</code></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">Used only as a background of tile on the top of a screen in automatic scheduling dialog.</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br data-cke-filler="true"></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">0xFFE3F5FF</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr></tbody></table></figure>

**Technical notes**

* Request for mockups if any of the pages you need to validate with the dark mode is not provided or not clear on how to be implemented.


**Out of scope**

* <br>