diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index a6290f596..7e2dcdcc5 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -46,6 +46,19 @@
   --color-header-background: #3A78A3;
   /* between --oc-gray-6 and --oc-gray-7 with the same hue as Open Color grays */
   --color-text-muted: #6b737b;
+  /* text on the top menu and header backgrounds */
+  --color-top-menu-text: var(--oc-gray-2);
+  --color-top-menu-link: var(--oc-gray-1);
+  --color-header-text: var(--oc-white);
+  --color-header-link: var(--oc-gray-0);
+  /* page and content background */
+  --color-background: var(--oc-white);
+  /* background of dropdowns, modals and tooltips */
+  --color-background-overlay: var(--oc-white);
+  /* selected or highlighted items in menus, lists and pagination */
+  --color-selected-background: var(--oc-blue-7);
+  --color-selected-text: var(--oc-white);
+  --color-shadow-rgb: var(--oc-gray-9-rgb);
 }
 
 html, body { min-block-size: 100vh; }
@@ -83,7 +96,7 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 /***** Layout *****/
 #wrapper {
   min-block-size: inherit;
-  background: white;
+  background: var(--color-background);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -92,7 +105,7 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 
 nav.top-menu {
   background: var(--color-top-menu-background);
-  color: var(--oc-gray-2);
+  color: var(--color-top-menu-text);
   font-size: 0.75rem;
   padding-inline: 14px;
   display: flex;
@@ -108,7 +121,7 @@ nav.top-menu {
 }
 
 .top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited, #account .dropdown-trigger {
-  color: var(--oc-gray-1);
+  color: var(--color-top-menu-link);
   text-decoration: none;
   transition: background-color 0.18s ease, color 0.18s ease;
   transform-origin: center;
@@ -124,7 +137,7 @@ nav.top-menu {
 }
 
 .top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg {
-  stroke: var(--oc-gray-1);
+  stroke: var(--color-top-menu-link);
   transition: stroke 0.18s ease;
 }
 
@@ -152,7 +165,7 @@ nav.top-menu {
 #header {
   margin: 0;
   background: var(--color-header-background);
-  color: var(--oc-white);
+  color: var(--color-header-text);
   padding-block: 0.25rem 0;
   padding-inline: 1.25rem;
   position: relative;
@@ -160,7 +173,7 @@ nav.top-menu {
 body.has-main-menu #header {
   padding-block-end: 2rem;
 }
-#header a {color: var(--oc-gray-0);}
+#header a {color: var(--color-header-link);}
 #header a:hover {color: var(--oc-white);}
 #header h1 {
   overflow: hidden;
@@ -263,7 +276,7 @@ body.has-main-menu #header {
 }
 #main-menu li:hover ul.menu-children, #main-menu li ul.menu-children.visible {display: block;}
 #main-menu li a.selected, #main-menu li a.selected:hover {
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
   color: var(--oc-gray-9);
   font-weight: bold;
   box-shadow: inset 0 -2px 0 var(--color-current-marker);
@@ -287,23 +300,23 @@ body.has-main-menu #header {
   position:absolute;
   inline-size: inherit;
   z-index:45;
-  background-color:var(--oc-white);
+  background-color:var(--color-background-overlay);
   border-block-end: 1px solid var(--oc-blue-7);
   border-inline-start: 1px solid var(--oc-blue-7);
   border-inline-end: 1px solid var(--oc-blue-7);
-  box-shadow: 0 2px 4px rgba(var(--oc-gray-9-rgb), 0.1);
+  box-shadow: 0 2px 4px rgba(var(--color-shadow-rgb), 0.1);
 }
 #main-menu .menu-children li {float: inline-start; clear: both; inline-size: 100%;}
 #main-menu .menu-children li a {
   display: block;
   color: var(--oc-gray-7);
-  background-color:var(--oc-white);
+  background-color:var(--color-background-overlay);
   padding-block: 4px;
   padding-inline: 10px;
   font-weight:normal;
   border-radius: 0;
 }
-#main-menu .menu-children li a:hover {color: var(--oc-white); background-color: var(--oc-blue-7);}
+#main-menu .menu-children li a:hover {color: var(--color-selected-text); background-color: var(--color-selected-background);}
 
 #main-menu .tabs-buttons {
   position: absolute;
@@ -367,7 +380,7 @@ body.has-main-menu #header {
 
 #content {
   flex-grow: 1;
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
   margin: 0;
   padding-block: 18px 10px;
   padding-inline: 20px;
@@ -378,7 +391,7 @@ body.has-main-menu #header {
 #main.collapsedsidebar #sidebar { inline-size: 0; padding-inline-end: 0 }
 #main.collapsedsidebar #sidebar-wrapper { display: none; }
 
-#footer {clear: both; border-block-start: 1px solid var(--oc-gray-4); font-size: 0.9em; color: var(--oc-gray-5); padding: 5px; text-align: center; background: var(--oc-white);}
+#footer {clear: both; border-block-start: 1px solid var(--oc-gray-4); font-size: 0.9em; color: var(--oc-gray-5); padding: 5px; text-align: center; background: var(--color-background);}
 
 #login-form {
   margin-block: 5em 2em;
@@ -397,7 +410,7 @@ body.has-main-menu #header {
 #login-form a.lost_password {float:inline-end; font-weight:normal;}
 #login-form h3 {text-align: center;}
 
-div.modal { border-radius:5px; background:var(--oc-white); z-index:50; padding:4px;}
+div.modal { border-radius:5px; background:var(--color-background-overlay); z-index:50; padding:4px;}
 div.modal h3.title {display:none;}
 div.modal p.buttons {margin-block-end: 0;}
 div.modal .box p {margin-block: 0.3em; margin-inline: 0;}
@@ -468,7 +481,7 @@ a#toggle-completed-versions svg, a#toggle-completed-versions:hover svg {stroke:v
   inset-inline-end:0px;
   inset-block-start:25px;
   min-inline-size:100px;
-  background-color:var(--oc-white);
+  background-color:var(--color-background-overlay);
   border:1px solid var(--oc-gray-4);
   border-radius:4px;
   color:var(--oc-gray-7);
@@ -485,7 +498,7 @@ a#toggle-completed-versions svg, a#toggle-completed-versions:hover svg {stroke:v
 div + .drdn-items {border-block-start: 1px solid var(--oc-gray-4);}
 .drdn-items>* {
   display:block;
-  border:1px solid var(--oc-white);
+  border:1px solid var(--color-background-overlay);
   overflow:hidden;
   text-overflow: ellipsis;
   white-space:nowrap;
@@ -546,12 +559,12 @@ div + .drdn-items {border-block-start: 1px solid var(--oc-gray-4);}
   margin:0 !important;
   vertical-align:middle;
   color:var(--oc-gray-7);
-  background:var(--oc-white) url(/chevron-down.svg) no-repeat 98% 50%;
+  background:var(--color-background) url(/chevron-down.svg) no-repeat 98% 50%;
 }
 #project-jump .drdn.expanded .drdn-trigger {background-image:url(/arrow_up.png);}
 #project-jump .drdn-content {inline-size: 280px;}
 #project-jump .drdn-items>* {color:var(--oc-gray-7) !important;}
-#project-jump .drdn-items>a:hover {background-color: var(--oc-blue-7); color:var(--oc-white) !important;}
+#project-jump .drdn-items>a:hover {background-color: var(--color-selected-background); color:var(--color-selected-text) !important;}
 
 /***** Tables *****/
 table.list, .table-list {
@@ -712,7 +725,7 @@ tr.group td {
   padding-inline: 0.3em 0;
   border-block-end: 2px solid var(--oc-gray-4);
   text-align: start;
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
 }
 tr.group span.count {inset-block-start: -1px;}
 tr.group span.name {font-weight:bold;}
@@ -728,8 +741,8 @@ table td {padding:2px;}
 table p {margin:0;}
 
 /* No table striping within `.box` */
-.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even { background-color: var(--oc-white); }
-table.list:not(.odd-even) tbody tr:nth-child(odd), .odd { background-color: var(--oc-white); }
+.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even { background-color: var(--color-background); }
+table.list:not(.odd-even) tbody tr:nth-child(odd), .odd { background-color: var(--color-background); }
 table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: var(--oc-gray-0); }
 table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover,
 table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color:var(--oc-yellow-0); }
@@ -853,13 +866,13 @@ input, select, button {
   padding-block: 4px;
   padding-inline: 7px;
 }
-input, select, textarea, button { color: var(--oc-gray-9); background-color: var(--oc-white); border:1px solid var(--oc-gray-4); border-radius:3px; box-sizing: border-box;}
+input, select, textarea, button { color: var(--oc-gray-9); background-color: var(--color-background); border:1px solid var(--oc-gray-4); border-radius:3px; box-sizing: border-box;}
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   appearance: none;
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
   background-image: url(/chevron-down.svg);
   background-repeat: no-repeat;
   background-position: calc(100% - 2px) 50%;
@@ -870,7 +883,7 @@ input[type="file"] {border: 0; padding-inline: 0; block-size: initial; backgroun
 input[type="submit"], button[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
   block-size: 28px;
   -webkit-transition: background-color 100ms linear;
   -moz-transition: background-color 100ms linear;
@@ -895,7 +908,7 @@ input:placeholder-shown {
   text-overflow: ellipsis;
 }
 
-select[multiple=multiple] {background: var(--oc-white); padding-inline-end: initial; block-size: auto;}
+select[multiple=multiple] {background: var(--color-background); padding-inline-end: initial; block-size: auto;}
 fieldset {border: 1px solid var(--oc-gray-4); margin: 0; min-inline-size: inherit;}
 legend {color: var(--oc-gray-9);}
 hr { inline-size: 100%; block-size: 1px; background: var(--oc-gray-4); border: 0;}
@@ -943,7 +956,7 @@ div#sticky-issue-header {
   inset-block-start: 0;
   inset-inline-start: 0;
   inset-inline-end: 0;
-  background-color: white;
+  background-color: var(--color-background);
   border-block-end: 1px solid var(--oc-gray-4);
   box-shadow: 0 2px 6px rgba(var(--oc-black-rgb), 0.15);
   font-size: 0.8125rem;
@@ -1128,7 +1141,7 @@ div#roadmap article.version-article form {
   padding-inline-start: 1.5rem;
 }
 
-div#version-summary { float: inline-end; inline-size: 28%; margin-inline-start: 16px; margin-block-end: 16px; background-color: var(--oc-white); }
+div#version-summary { float: inline-end; inline-size: 28%; margin-inline-start: 16px; margin-block-end: 16px; background-color: var(--color-background); }
 div#version-summary fieldset { margin-block-end: 1em; }
 div#version-summary fieldset.time-tracking table { inline-size: 100%; }
 div#version-summary th, div#version-summary td.total-hours { text-align: end; }
@@ -1179,7 +1192,7 @@ ul.projects div.description ul li {list-style-type:initial;}
   border: 1px solid var(--oc-gray-4);
   border-radius: 3px;
   box-sizing: border-box;
-  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   break-inside: avoid-column;
@@ -1292,8 +1305,8 @@ span.pagination {margin-inline-start: 3px; color: var(--color-text-muted); displ
   border-end-end-radius: 4px;
 }
 .pagination ul.pages li.current {
-  color: white;
-  background-color: var(--oc-blue-7);
+  color: var(--color-selected-text);
+  background-color: var(--color-selected-background);
 }
 .pagination ul.pages li.page:hover {
   background-color: var(--oc-gray-2);
@@ -1420,7 +1433,7 @@ span.required {color: var(--oc-red-9);}
   overflow-y:auto;
   padding-block: 2px 4px;
   padding-inline: 2px 4px;
-  background:var(--oc-white);
+  background:var(--color-background);
   border:1px solid var(--oc-gray-4);
   border-radius:3px
 }
@@ -1464,7 +1477,7 @@ div.attachments span.attachment-journal { display: inline-flex; inline-size: 18p
 
 div.thumbnails {margin:0.6em;}
 div.thumbnail {
-  background: var(--oc-white);
+  background: var(--color-background);
   border: 2px solid var(--oc-gray-3);
   display: inline-block;
   margin-inline-end: 2px;
@@ -1489,7 +1502,7 @@ input#principal_search, input#user_search {inline-size: 90%}
 .roles-selection label {display: inline-block; inline-size: 210px;}
 
 input.autocomplete {
-  background: var(--oc-white) url(/search.svg) no-repeat 2px 50%; padding-inline-start: 20px !important;
+  background: var(--color-background) url(/search.svg) no-repeat 2px 50%; padding-inline-start: 20px !important;
 }
 [dir="rtl"] input.autocomplete {
   background-position: right 2px top 50%;
@@ -1653,7 +1666,7 @@ ul.cal {
   border: 1px solid var(--oc-gray-4);
   border-spacing: 0;
   border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
 }
 
 .cal .calhead {
@@ -1684,7 +1697,7 @@ ul.cal {
   line-height: 1.2;
   min-block-size: calc(1.2em * 6);
   padding: 2px;
-  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
 }
 
 .cal .calbody p.day-num {font-size: 1.1em; text-align: end;}
@@ -1710,7 +1723,7 @@ ul.cal {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.cal .calbody.this-month {background-color:var(--oc-white);}
+.cal .calbody.this-month {background-color:var(--color-background);}
 .cal .calbody.other-month {background-color:var(--oc-gray-0);}
 .cal .calbody.other-month p.day-num {color: var(--color-text-muted);}
 .cal .calbody.today p.day-num {font-weight: bold;}
@@ -1749,11 +1762,11 @@ position:absolute;
 inset-block-start: 12px; inline-size: 270px;
 border:1px solid var(--oc-gray-7);
 border-radius: 3px;
-background-color:var(--oc-white);
+background-color:var(--color-background-overlay);
 padding: 4px;
 font-size: 0.75rem;
 color:var(--oc-gray-7);
-box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
 }
 
 table.cal div.tooltip:hover span.tip {
@@ -1873,21 +1886,21 @@ p.progress-info {clear: inline-start; font-size: 86%; margin-block-start: -4px;
 }
 
 #content .tabs ul li a.selected {
-  background-color: var(--oc-white);
+  background-color: var(--color-background);
   border: 1px solid var(--oc-gray-4);
-  border-block-end: 1px solid var(--oc-white);
+  border-block-end: 1px solid var(--color-background);
   color: var(--oc-gray-8);
   box-shadow: 0 1px 2px rgba(var(--oc-black-rgb), 0.1);
 }
 
-#content .tabs ul li a.selected:hover {background-color: var(--oc-white);}
+#content .tabs ul li a.selected:hover {background-color: var(--color-background);}
 
 div.tabs-buttons {
   position: absolute;
   inset-inline-end: 0;
   inline-size: 54px;
   block-size: 24px;
-  background: white;
+  background: var(--color-background);
   inset-block-end: 0px;
   border-block-end: 1px solid var(--oc-gray-5);
 }
@@ -2025,7 +2038,7 @@ div.pre-wrapper a.mermaid-download-link {
   cursor: pointer;
   display: none;
   border-radius: 3px;
-  background: var(--oc-white);
+  background: var(--color-background);
   border: 1px solid var(--oc-gray-4);
   padding-block: 0 3px;
   padding-inline: 3px;
@@ -2092,7 +2105,7 @@ div.wiki .task-list input.task-list-item-checkbox {
 
 /***** My page layout *****/
 .block-receiver {
-  border:1px dashed var(--oc-white);
+  border:1px dashed var(--color-background);
   padding-block: 15px 0;
   padding-inline: 0;
 }
@@ -2108,7 +2121,7 @@ div.wiki .task-list input.task-list-item-checkbox {
   color:var(--oc-gray-7);
   line-height:1.5em;
   border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
 }
 
 .mypage-box>.contextual {opacity:0.001; transition: opacity 0.2s;}
@@ -2374,7 +2387,7 @@ div.avatar-with-child > .avatar:nth-child(2) {
 }
 
 div.avatar-with-child > .avatar:nth-child(2).group-avatar {
-    background-color: var(--oc-white);
+    background-color: var(--color-background);
 }
 
 h2 .avatar, h3 .avatar {margin-inline-end: 4px;}
@@ -2390,7 +2403,7 @@ h2 img { vertical-align:middle; }
 
 .hascontextmenu { cursor: context-menu; }
 
-.sample-data {border:1px solid var(--oc-gray-4); border-collapse:collapse; background-color:var(--oc-white); margin:0.5em;}
+.sample-data {border:1px solid var(--oc-gray-4); border-collapse:collapse; background-color:var(--color-background); margin:0.5em;}
 .sample-data td {
   border:1px solid var(--oc-gray-4);
   padding-block: 2px;
@@ -2403,7 +2416,7 @@ h2 img { vertical-align:middle; }
 #progress-label {
 position: absolute; inset-inline-start: 50%; inset-block-start: 4px;
 font-weight: bold;
-color: var(--oc-gray-7); text-shadow: 1px 1px 0 var(--oc-white);
+color: var(--oc-gray-7); text-shadow: 1px 1px 0 var(--color-background);
 }
 
 .repository-graph {inline-size: 75%; margin-block-end: 2em;}
@@ -2572,8 +2585,8 @@ div.news .reaction {
   max-inline-size: 500px;
 }
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
-  border-color: var(--oc-blue-7);
-  background: var(--oc-blue-7);
+  border-color: var(--color-selected-background);
+  background: var(--color-selected-background);
 }
 .ui-widget-overlay {
     background: var(--oc-black);
@@ -2582,11 +2595,11 @@ div.news .reaction {
 
 /* Custom tribute styles */
 .tribute-container ul {
-  background-color: var(--oc-white);
+  background-color: var(--color-background-overlay);
   border: 1px solid var(--oc-gray-4);
   border-radius: 2px;
 }
-.tribute-container li.highlight {background-color: var(--oc-blue-7); color:var(--oc-white);}
+.tribute-container li.highlight {background-color: var(--color-selected-background); color:var(--color-selected-text);}
 
 /************* Rouge styles *************/
 /* Based on the Pygments "colorful" theme, with colors mapped to Open Color */
@@ -2703,7 +2716,7 @@ img {
   padding: 1em;
   border: 1px solid var(--oc-gray-4);
   border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
+  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
   overflow-x: auto;
 }
 
diff --git a/app/assets/stylesheets/context_menu.css b/app/assets/stylesheets/context_menu.css
index b802ad8ad..3a2923002 100644
--- a/app/assets/stylesheets/context_menu.css
+++ b/app/assets/stylesheets/context_menu.css
@@ -42,10 +42,10 @@
 #context-menu li:hover ul, #context-menu li:hover li:hover ul { display:block; }
 
 /* selected element */
-.context-menu-selection { background-color:var(--oc-blue-7) !important; color:var(--oc-gray-0) !important; }
-.context-menu-selection a, .context-menu-selection a:hover { color:var(--oc-gray-0) !important; }
-.context-menu-selection:hover { background-color:var(--oc-blue-7) !important; color:var(--oc-gray-0)  !important; }
-.context-menu-selection svg.icon-svg { stroke: var(--oc-white) !important; }
+.context-menu-selection { background-color:var(--color-selected-background) !important; color:var(--color-selected-text) !important; }
+.context-menu-selection a, .context-menu-selection a:hover { color:var(--color-selected-text) !important; }
+.context-menu-selection:hover { background-color:var(--color-selected-background) !important; color:var(--color-selected-text)  !important; }
+.context-menu-selection svg.icon-svg { stroke: var(--color-selected-text) !important; }
 .gantt-timeline .context-menu-selection { background-color: rgba(var(--oc-blue-7-rgb), 0.4) !important; }
 .gantt-timeline .context-menu-selection:hover { background-color: rgba(var(--oc-blue-7-rgb), 0.4) !important; }
 .gantt-timeline .context-menu-selection a { color: var(--oc-blue-9) !important; }
diff --git a/app/assets/stylesheets/dropdown.css b/app/assets/stylesheets/dropdown.css
index e8a387336..88abd901f 100644
--- a/app/assets/stylesheets/dropdown.css
+++ b/app/assets/stylesheets/dropdown.css
@@ -19,7 +19,7 @@
 
 .dropdown-content {
   /* Configuration Variables */
-  --dropdown-bg: var(--oc-white);
+  --dropdown-bg: var(--color-background-overlay);
   --dropdown-border: var(--oc-gray-4);
   --dropdown-shadow: rgba(var(--oc-black-rgb), 0.1);
   --dropdown-item-padding-block: 6px;
diff --git a/app/assets/stylesheets/gantt.css b/app/assets/stylesheets/gantt.css
index 62cf7f1a1..318959668 100644
--- a/app/assets/stylesheets/gantt.css
+++ b/app/assets/stylesheets/gantt.css
@@ -355,8 +355,8 @@
 }
 
 .gantt-row[data-gantt-row-type="version"] .gantt-task-todo {
-  background: var(--oc-white) url(/milestone_todo.png);
-  border: 1px solid var(--oc-white);
+  background: var(--color-background) url(/milestone_todo.png);
+  border: 1px solid var(--color-background);
   block-size: 4px;
   margin-block-start: 3px;
 }
@@ -384,8 +384,8 @@
 }
 
 .gantt-row[data-gantt-row-type="project"] .gantt-task-todo {
-  background: var(--oc-white) url(/milestone_todo.png);
-  border: 1px solid var(--oc-white);
+  background: var(--color-background) url(/milestone_todo.png);
+  border: 1px solid var(--color-background);
   block-size: 4px;
   margin-block-start: 3px;
 }
diff --git a/app/assets/stylesheets/jstoolbar.css b/app/assets/stylesheets/jstoolbar.css
index c73a201e9..dfb6dd1f9 100644
--- a/app/assets/stylesheets/jstoolbar.css
+++ b/app/assets/stylesheets/jstoolbar.css
@@ -47,7 +47,7 @@
 }
 .wiki-preview {
     color: var(--oc-gray-9);
-    background-color: var(--oc-white);
+    background-color: var(--color-background);
     border: 1px solid var(--oc-gray-4);
 }
 .wiki-preview p.empty-preview {color: var(--color-text-muted); font-style: italic; margin-block-start: 1em; text-align: center;}
@@ -89,7 +89,7 @@
 
 .table-generator td {
     border: 2px solid var(--oc-gray-5);
-    background-color: white;
+    background-color: var(--color-background);
     padding: 10px;
     cursor: pointer;
 }
diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css
index 38bb19061..371c23f82 100644
--- a/app/assets/stylesheets/responsive.css
+++ b/app/assets/stylesheets/responsive.css
@@ -108,7 +108,7 @@
 
   /* reset #header a color for mobile toggle button */
   #header a.mobile-toggle-button {
-    color: var(--oc-gray-0);
+    color: var(--color-header-link);
   }
 
 
@@ -483,7 +483,7 @@
     border: none;
     -webkit-border-radius: 3px;
     border-radius: 3px;
-    background-color: var(--oc-white);
+    background-color: var(--color-background);
   }
 
   .flyout-menu__avatar {
-- 
2.43.0