dark mode

src/components/analysis-table.tsx

@@ -8,6 +8,7 @@ import {
   SortOrder,
   borderRightOnly,
   contextRowHeight,
+  borderRightOnlyDark,
 } from '@/components/table'
 import { formatPercent } from '@/utils/format-percent'
 import { useState } from 'preact/hooks'
@@ -89,6 +90,11 @@ const topLeftCellStyle = css`
   min-width: ${firstColumnWidth};
   padding: 0;
   height: ${contextRowHeight};
+
+  .dark & {
+    background: black;
+    ${borderRightOnlyDark};
+  }
 `
 
 const iconStyle = css`
@@ -112,6 +118,10 @@ const iconButtonStyle = css`
 
   &:hover .${iconStyle}, &:focus .${iconStyle} {
     background: ${lightGrey};
+
+    .dark & {
+      background: #444;
+    }
   }
 `
 
@@ -121,6 +131,10 @@ const contextSectionStyle = css`
   text-align: left;
   padding: 0;
 
+  .dark & {
+    background: black;
+  }
+
   & span {
     position: sticky;
     left: ${firstColumnWidth};
@@ -132,16 +146,31 @@ const contextSectionStyle = css`
 const rankStyle = css`
   box-shadow: inset 0 -0.15rem #398013;
   color: #398013;
+
+  .dark & {
+    color: #60b060;
+    box-shadow-color: #60b060;
+  }
 `
 
 const autoStyle = css`
   box-shadow: inset 0 -0.15rem ${blue};
   color: ${blue};
+
+  .dark & {
+    color: #56f;
+    box-shadow-color: #56f;
+  }
 `
 
 const teleopStyle = css`
   box-shadow: inset 0 -0.15rem ${red};
   color: ${red};
+
+  .dark & {
+    color: #d33;
+    box-shadow-color: #d33;
+  }
 `
 
 const settingsStyle = css`
@@ -152,6 +181,10 @@ const settingsStyle = css`
 
 const dropdownStyle = css`
   padding: 0.2rem;
+
+  .dark & {
+    background: #333;
+  }
 `
 
 const teamNumCellStyle = css`
@@ -218,6 +251,10 @@ const AnalysisTable = ({
       padding-left: 0.25rem;
       font-size: 0.7rem;
       color: ${textGrey};
+
+      .dark & {
+        color: #ccc;
+      }
     }
   `
 

src/components/button/index.tsx

@@ -26,9 +26,18 @@ const buttonStyle = css`
   font-size: 0.9rem;
   transition: all 0.2s ease;
 
+  .dark & {
+    background: #c000c0;
+    color: black;
+  }
+
   &:hover,
   &:focus {
     background: color-mod(var(--pigmice-purple) lightness(+5%));
+
+    .dark & {
+      background: #d020d0;
+    }
   }
 
   &:hover {
@@ -45,18 +54,31 @@ const buttonStyle = css`
     color: #00000036;
     box-shadow: none;
     cursor: not-allowed;
+
+    .dark & {
+      background: #e8e8e836;
+      color: #e8e8e870;
+    }
   }
 `
 
 const flatButtonStyle = css`
-  background: none;
+  background: none !important;
   box-shadow: none;
   color: ${pigmicePurple};
 
+  .dark & {
+    color: #c000c0;
+  }
+
   &:hover,
   &:focus {
     background: ${tint(0.8, pigmicePurple)};
     box-shadow: none;
+
+    .dark & {
+      background: #400040;
+    }
   }
 `
 

src/components/card.tsx

@@ -23,6 +23,14 @@ const cardStyle = css`
     outline: none;
     background: #dfdfdf;
   }
+
+  .dark & {
+    background: black;
+
+    &:focus {
+      background: #444;
+    }
+  }
 `
 
 const outlinedCardStyle = css`

src/components/chip.tsx

@@ -16,11 +16,21 @@ const chipStyle = css`
   margin: 0 0.2em;
   display: inline-block;
   white-space: nowrap;
+
+  .dark & {
+    color: black;
+    background: #4a964a;
+  }
 `
 
 const dateChipStyle = css`
   background: #00000024;
   color: black;
+
+  .dark & {
+    color: var(--light-grey);
+    background: #e8e8e824;
+  }
 `
 
 const Chip = ({ children }: { children: string }) => (

src/components/dialog.tsx

@@ -28,6 +28,10 @@ const dialogStyle = css`
   transition-timing-function: cubic-bezier(0.15, 0.24, 0.13, 1.42);
   will-change: transform, opacity;
 
+  .dark & {
+    background: #333;
+  }
+
   .${scrimHiddenClass} & {
     transform: scale(0.7);
     opacity: 0;

src/components/dropdown.tsx

@@ -7,12 +7,16 @@ const dropdownStyle = css`
   background: transparent;
   border: none;
   font-size: 0.8rem;
-  color: var(--off-black);
   font-weight: bold;
+  color: inherit;
 
   & option {
     text-transform: none;
   }
+
+  .dark & {
+    background: black;
+  }
 `
 
 const buttonStyles = css`
@@ -33,6 +37,7 @@ interface BaseProps<T> {
   getKey?: (v: T) => string | number
   getText?: (v: T) => string | number
   emptyLabel?: string
+  onCard?: boolean
 }
 
 type Props<T> = BaseProps<T> &
@@ -67,6 +72,7 @@ export const Dropdown = <T extends any>({
     },
     {},
   )
+
   return (
     // eslint-disable-next-line caleb/jsx-a11y/no-onchange
     <select

src/components/heading.tsx

@@ -12,6 +12,10 @@ const headingStyle = css`
   margin: 0;
   border-bottom: 0.13rem solid ${pigmicePurple};
   padding: 0 1rem 0.25rem;
+
+  .dark & {
+    border-bottom-color: #c000c0;
+  }
 `
 
 export const Heading = ({ level, ...props }: Props) => {

src/components/info-group-card.tsx

@@ -21,10 +21,18 @@ const rowStyle = css`
   max-height: 3rem;
   overflow: hidden;
 
+  .dark & {
+    border-bottom-color: #444;
+  }
+
   &[href]:hover,
   &:focus {
     background: #f1f1f1;
     outline: none;
+
+    .dark & {
+      background: #444;
+    }
   }
 
   &:last-child {

src/components/match-card.tsx

@@ -34,6 +34,10 @@ const matchCardStyle = css`
     color: var(--grey-text);
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    .dark & {
+      color: #e8e8e8bb;
+    }
   }
 `
 
@@ -67,19 +71,35 @@ const allianceStyle = css`
   color: white;
   font-weight: bold;
 
+  .dark & {
+    color: black;
+  }
+
   & > * {
     color: white;
     text-decoration: none;
     padding: 0.2rem;
+
+    .dark & {
+      color: black;
+    }
   }
 `
 
 const redStyle = css`
   background-color: var(--alliance-red);
+
+  .dark & {
+    background: #d33;
+  }
 `
 
 const blueStyle = css`
   background-color: var(--alliance-blue);
+
+  .dark & {
+    background: #56f;
+  }
 `
 
 export const MatchDetailsCard = memo(

src/components/match-reports.tsx

@@ -15,6 +15,10 @@ import { ProfileLink } from './profile-link'
 // has a higher priority than this
 const matchReportsStyle = css`
   background: #d5d5d5 !important;
+
+  .dark & {
+    background: black !important;
+  }
 `
 
 interface Props {