💄 improve visibility on dark mode

Author: ghalestrilo

client/components/mobile/Tab.jsx

@@ -9,7 +9,7 @@ export default styled(Link)`
 
   background: transparent;
   /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
-  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
 
   color: ${prop('primaryTextColor')};
 

client/modules/Mobile/MobileDashboardView.jsx

@@ -47,6 +47,7 @@ const ContentWrapper = styled(Content)`
   tbody td, thead th {
     justify-self: stretch;
     align-self: flex-end;
+    color: ${prop('primaryTextColor')}
   }
 
   tbody td:nth-child(2) { grid-column-start: 2 }
@@ -57,8 +58,13 @@ const ContentWrapper = styled(Content)`
     height: ${remSize(48)};
   }
 
-  .sketches-table-container { padding-bottom: ${remSize(160)} }
-  .sketches-table__row { background: white !important; height: auto }
+  .sketches-table-container {
+    padding-bottom: ${remSize(160)};
+    background: ${prop('backgroundColor')};
+    }
+  .sketches-table__row {
+    background: ${prop('backgroundColor')} !important; height: auto
+  }
 
   tr {
     align-self: start;

client/theme.js

@@ -104,6 +104,8 @@ export default {
       border: grays.middleLight
     },
     Separator: grays.middleLight,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.dark]: {
     colors,
@@ -149,6 +151,8 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.contrast]: {
     colors,
@@ -194,5 +198,7 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.yellow,
   },
 };