Fit dark background on light mode (#1005)

Author: Acylation

css/views/_board.scss

@@ -12,7 +12,7 @@ $view: "board";
 .#{$prefix}--#{$view}--column {
   border: 1px solid var(--background-modifier-border);
   border-radius: var(--radius-m);
-  background-color: var(--background-secondary);
+  background-color: var(--background-primary-alt);
   display: flex;
   gap: var(--size-4-2);
   flex-direction: column;

css/views/_gallery.scss

@@ -10,7 +10,7 @@ $card-radius: var(--radius-s);
 }
 
 .#{$prefix}--#{$view}--card {
-  background-color: var(--background-secondary);
+  background-color: var(--background-primary-alt);
   border-radius: #{$card-radius};
   border: 1px solid var(--background-modifier-border);
   padding: 0;

src/ui/app/onboarding/Onboarding.svelte

@@ -80,7 +80,7 @@ published: false
 
 <style>
   pre {
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
     border-radius: var(--radius-s);
     padding: 8px;
   }

src/ui/components/Accordion/AccordionItem.svelte

@@ -25,7 +25,7 @@
 
   div {
     padding: 8px;
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
   }
 
   header {

src/ui/components/Layout/ViewToolbar.svelte

@@ -55,9 +55,9 @@
   }
 
   .primary {
-    background-color: var(--tab-background-active);
+    background-color: var(--background-primary);
   }
   .secondary {
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
   }
 </style>

src/ui/views/Board/components/Board/ColumnHeader.svelte

@@ -67,6 +67,7 @@
 </script>
 
 <div
+  class="projects--board--column--header"
   on:dblclick={() => {
     editing = true;
   }}
@@ -127,7 +128,7 @@
       {value}
     </span>
   {/if}
-  <div>
+  <div class="right">
     {#if collapse || checkField}
       <Flair variant="primary">
         {checkField ? `${checkedCount}/${count}` : count}
@@ -157,12 +158,17 @@
     margin-bottom: 0;
   }
 
-  div {
+  .projects--board--column--header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
   .collapse {
     max-height: 24px;
     overflow-y: auto;

src/ui/views/Board/components/Board/NewColumn.svelte

@@ -73,7 +73,7 @@
     margin-top: 8px;
     border: 1px solid var(--background-modifier-border);
     border-radius: var(--radius-m);
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
     display: flex;
     flex-direction: column;
     row-gap: var(--size-4-2);

src/ui/views/Calendar/components/Calendar/Day.svelte

@@ -98,6 +98,6 @@
   }
 
   .weekend {
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
   }
 </style>

src/ui/views/Calendar/components/Calendar/Weekday.svelte

@@ -20,6 +20,6 @@
   }
 
   .weekend {
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
   }
 </style>

src/ui/views/Table/TableView.svelte

@@ -354,7 +354,7 @@
     justify-content: space-between;
     text-align: center;
 
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary-alt);
     border-right: 1px solid var(--background-modifier-border);
     border-left-color: var(--background-modifier-border);
     border-bottom: 1px solid var(--background-modifier-border);