Add dark mode

Author: iddan

src/Spreadsheet.css

@@ -1,11 +1,11 @@
 .Spreadsheet {
   --background-color: white;
   --text-color: black;
-  --readonly-text-color: #999;
+  --readonly-text-color: rgba(0, 0, 0, 0.4);
   --outline-color: #4285f4;
   --outline-background-color: rgba(160, 195, 255, 0.2);
-  --border-color: rgb(231, 231, 231);
-  --header-background-color: #f5f5f5;
+  --border-color: hsl(2deg, 0%, 91%);
+  --header-background-color: rgba(0, 0, 0, 0.04);
   --elevation: 0 2px 5px rgba(0, 0, 0, 0.4);
 
   position: relative;
@@ -15,6 +15,14 @@
   display: inline-block;
 }
 
+.Spreadsheet--dark-mode {
+  --background-color: black;
+  --text-color: white;
+  --readonly-text-color: rgba(255, 255, 255, 0.4);
+  --header-background-color: rgba(255, 255, 255, 0.04);
+  --border-color: hsl(2deg, 0%, 19%);
+}
+
 .Spreadsheet__active-cell {
   position: absolute;
   border: 2px solid var(--outline-color);
@@ -36,8 +44,7 @@
   cursor: cell;
 }
 
-.Spreadsheet__cell,
-.Spreadsheet__cell input {
+.Spreadsheet__cell {
   outline: none;
 }
 
@@ -82,6 +89,7 @@
 
 .Spreadsheet__data-editor input {
   font: inherit;
+  color: inherit;
   background: none;
   border: none;
   outline: none;

src/Spreadsheet.tsx

@@ -42,6 +42,8 @@ export type Props<CellType extends Types.CellBase> = {
   data: Matrix.Matrix<CellType>;
   /** Class to be added to the spreadsheet element */
   className?: string;
+  /** Use dark colors that complenent dark mode */
+  darkMode?: boolean;
   /**
    * Instance of `FormulaParser` to be used by the Spreadsheet.
    * Defaults to: internal instance created by the component.
@@ -117,6 +119,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 ): React.ReactElement => {
   const {
     className,
+    darkMode,
     columnLabels,
     rowLabels,
     hideColumnIndicators,
@@ -476,7 +479,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     () => (
       <div
         ref={rootRef}
-        className={classNames("Spreadsheet", className)}
+        className={classNames("Spreadsheet", className, {
+          "Spreadsheet--dark-mode": darkMode,
+        })}
         onKeyPress={onKeyPress}
         onKeyDown={handleKeyDown}
         onMouseMove={handleMouseMove}
@@ -490,6 +495,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     ),
     [
       className,
+      darkMode,
       onKeyPress,
       handleKeyDown,
       handleMouseMove,

src/stories/Spreadsheet.stories.tsx

@@ -24,7 +24,11 @@ export default {
 } as Meta<Props<StringCell>>;
 
 export const Basic: Story<Props<StringCell>> = (props) => (
-  <Spreadsheet {...props} data={props.data} />
+  <Spreadsheet {...props} />
+);
+
+export const DarkMode: Story<Props<StringCell>> = (props) => (
+  <Spreadsheet {...props} darkMode />
 );
 
 export const Controlled: Story<Props<StringCell>> = (props) => {