diff --git a/app/src/components/globals/Card.vue b/app/src/components/globals/Card.vue
index 9a7dcb3f..b8e24249 100644
--- a/app/src/components/globals/Card.vue
+++ b/app/src/components/globals/Card.vue
@@ -79,7 +79,6 @@ export default {
     .btn + .btn {
       margin-left: .5rem;
     }
-    background-color: $background-color-primary !important;
   }
 }
 
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 7327b85a..49520a66 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -67,18 +67,11 @@ $list-group-item-padding-x: 1rem;
 @import '~bootstrap-vue/src/variables';
 
 
-$body-color: var(--font-color);
+$body-color: $gray-800;
 
-$hr-border-color: var(--border-color);
+$hr-border-color: $gray-200;
 
-$list-group-action-color: var(--font-color);
-$list-group-action-color-secondary: var(--font-color-secondary);
-
-$background-color-primary: var(--background-color);
-
-$background-color-secondary: var(--background-color-secondary);
-
-$card-border-color: var(--border-color);
+$list-group-action-color: $gray-800;
 
 //  ╭──────────────────────────────────────╮
 //  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index f4ca87a6..efeeaadd 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -71,42 +71,6 @@
   --warning: #ffc02a;
 }
 
-//
-// FIXME : these five blocks are probably not well-written and are not just "variable declarations" ;/
-// probably to be refactored ...
-//
-[dark-theme="true"] .alert-success {
-    color: #4dd0af;
-    background-color: #005e46;
-    border: var(--border-color);
-}
-
-[dark-theme="true"] .alert-info {
-    color: #5dbecd;
-    background-color: #0c515c;
-    border: var(--border-color);
-}
-
-[dark-theme="true"] .alert-warning {
-    color: #f7ba59;
-    background-color: #7a4e09;
-    border: var(--border-color);
-}
-
-[dark-theme="true"] .alert-danger {
-    color: #ee8277;
-    background-color: #74261e;
-    border: var(--border-color);
-}
-
-[dark-theme="true"] .btn-outline-dark {
-    color: var(--font-color-secondary);
-    border-color: var(--border-color);
-}
-//
-// END FIXME
-//
-
 // Style overrides happens after dependencies imports
 
 html {
@@ -116,43 +80,18 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   margin: 0;
-  background-color: $background-color-primary;
 }
 
 #app {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: $background-color-primary;
 }
 
 .menu-list .list-group-item {
   padding: $list-group-item-padding-y 0;
   display: flex;
   align-items: center;
-  background-color: $background-color-primary;
-  color: $list-group-action-color;
-}
-
-.list-group-item {
-  border-color: var(--border-color);
-}
-
-.list-group-item:hover {
-  background-color: $background-color-secondary;
-  color: var(--font-color-secondary);
-}
-
-.text-secondary {
-  color: var(--font-color-secondary) !important;
-}
-
-.form-control {
-  background-color: $background-color-secondary;
-}
-
-.form-control:focus {
-  background-color: $background-color-secondary;
 }
 
 
@@ -218,19 +157,17 @@ body {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
-  background-color: $background-color-primary;
 }
 
 .card-header, .list-group-item {
   h1, h2, h3, h4, h5, h6 {
     font-weight: $font-weight-normal;
   }
-  background-color: $background-color-primary;
 }
 
 h3.card-title {
   margin-bottom: 1em;
-  border-bottom: solid 1px #aaa;
+  border-bottom: solid 1px $hr-border-color;
 }
 
 // collapse icon
@@ -301,15 +238,14 @@ h3.card-title {
 }
 
 code {
-  background: var(--background-color-secondary);
+  background: $light;
 }
 
 .log {
   margin-bottom: 0;
   padding: 1rem;
-  background-color: var(--background-color-secondary);
+  background-color: $light;
   overflow: auto;
-  color: var(--font-color)
 }
 
 .unselectable {
@@ -319,41 +255,3 @@ code {
   -ms-user-select: none;
   user-select: none;
 }
-
-/*
-.badge-success, .alert-success {
-  background-color: var(--success);
-  border-color: var(--border-color);
-}
-
-.badge-info, .alert-info {
-  background-color: var(--info);
-  border-color: var(--border-color);
-}
-
-.badge-warning, .alert-warning  {
-  background-color: var(--warning);
-  border-color: var(--border-color);
-}
-
-.badge-danger, .alert-danger {
-  background-color: var(--error);
-  border-color: var(--border-color);
-}
-
-.list-group-item-success {
-  color: var(--success);
-}
-
-.list-group-item-info {
-  color: var(--info);
-}
-
-.list-group-item-warning {
-  color: var(--warning);
-}
-
-.list-group-item-danger {
-  color: var(--error);
-}
-*/
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 88e62d61..7edc353f 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -63,7 +63,7 @@
         </b-card-body>
 
         <template #buttons>
-          <b-button size="sm" @click="performPostInstall(true)">
+          <b-button variant="light" size="sm" @click="performPostInstall(true)">
             <icon iname="warning" /> {{ $t('postinstall.force') }}
           </b-button>
         </template>
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index 6f77522a..7ed16a4e 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -42,7 +42,7 @@
     <b-card-footer footer-bg-variant="danger">
       <!-- TODO add copy error ? -->
       <b-button
-        size="sm"
+        variant="light" size="sm"
         v-t="'ok'" @click="dismiss"
       />
     </b-card-footer>
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 804813aa..b513df90 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -4,7 +4,7 @@
     <b-card-header
       role="button" tabindex="0"
       :aria-expanded="open ? 'true' : 'false'" aria-controls="console-collapse"
-      header-tag="header" :header-bg-variant="open ? 'best' : ''"
+      header-tag="header" :header-bg-variant="open ? 'best' : 'white'"
       :class="{ 'text-white': open }"
       class="d-flex align-items-center"
       @mousedown.left.prevent="onHistoryBarClick"
@@ -43,7 +43,7 @@
           no-body class="rounded-0 rounded-top border-left-0 border-right-0"
         >
           <!-- ACTION -->
-          <b-card-header header-tag="header" class="sticky-top d-flex">
+          <b-card-header header-tag="header" header-bg-variant="white" class="sticky-top d-flex">
             <!-- ACTION DESC -->
             <query-header
               role="tab" v-b-toggle="action.messages.length ? 'messages-collapse-' + i : false"
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8bc37075..efe6ba66 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <b-overlay
-    variant="" opacity="0.75"
+    variant="white" opacity="0.75"
     no-center
     :show="waiting || reconnecting || error !== null"
   >
@@ -8,7 +8,7 @@
 
     <template v-slot:overlay>
       <b-card no-body class="card-overlay">
-        <b-card-header>
+        <b-card-header header-bg-variant="white">
           <query-header :request="error || currentRequest" status-size="lg" />
         </b-card-header>
 
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index b1ce5d72..e156a30f 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -5,7 +5,7 @@
 
     <b-card-footer footer-bg-variant="warning">
       <b-button
-        size="sm"
+        variant="light" size="sm"
         v-t="'ok'" @click="dismiss"
       />
     </b-card-footer>
diff --git a/app/src/views/diagnosis/Diagnosis.vue b/app/src/views/diagnosis/Diagnosis.vue
index 739f2ba4..4e1d26ee 100644
--- a/app/src/views/diagnosis/Diagnosis.vue
+++ b/app/src/views/diagnosis/Diagnosis.vue
@@ -134,6 +134,7 @@ export default {
         icon = 'info-circle'
       } else if (item.ignored) {
         icon = status !== 'error' ? status : 'times'
+        item.variant = 'light'
         report.ignoreds++
       } else if (status === 'warning') {
         icon = status
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 2fd94840..0708de1b 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -44,7 +44,7 @@
 
       <b-button
         v-if="moreLogsAvailable"
-        class="w-100 rounded-0"
+        variant="white" class="w-100 rounded-0"
         @click="$refs.view.fetchQueries()"
       >
         <icon iname="plus" /> {{ $t('logs_more') }}