palettes that actually work

src/components/settings_modal/tabs/appearance_tab.scss

@@ -0,0 +1,76 @@
+.appearance-tab {
+  .palette,
+  .theme-notice {
+    padding: 0.5em;
+    margin: 1em;
+  }
+
+  .palettes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0.5em;
+  }
+
+  .palette-entry {
+    display: flex;
+    align-items: center;
+
+    > label {
+      flex: 1 0 auto;
+    }
+
+    .palette-square {
+      flex: 0 0 auto;
+      display: inline-block;
+      min-width: 1em;
+      min-height: 1em;
+    }
+  }
+
+  .column-settings {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+
+  .column-settings .size-label {
+    display: block;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  .theme-list {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em 0;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
+
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
+
+      .theme-preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
+    }
+  }
+}