Make active highlight color configurable

example.config.toml

@@ -11,6 +11,9 @@
 # Set the background color (useful for chroma-keying)
 #background-color = "#0f0"
 
+# Set the active (highlight) color
+#active-color = "#fff"
+
 [grid]
 #count = 3
 

src/browser/overlay.js

@@ -5,6 +5,7 @@ import { State } from 'xstate'
 import styled from 'styled-components'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { TailSpin } from 'svg-loaders-react'
+import Color from 'color'
 
 import '../index.css'
 
@@ -16,7 +17,7 @@ import YouTubeIcon from '../static/youtube.svg'
 import SoundIcon from '../static/volume-up-solid.svg'
 
 function Overlay({ config, views, streams }) {
-  const { width, height } = config
+  const { width, height, activeColor } = config
   const activeViews = views
     .map(({ state, context }) => State.from(state, context))
     .filter((s) => s.matches('displaying') && !s.matches('displaying.error'))
@@ -39,11 +40,12 @@ function Overlay({ config, views, streams }) {
             pos={pos}
             windowWidth={width}
             windowHeight={height}
+            activeColor={activeColor}
             isListening={isListening}
           >
             <BlurCover isBlurred={isBlurred} />
             {data && (
-              <StreamTitle isListening={isListening}>
+              <StreamTitle activeColor={activeColor} isListening={isListening}>
                 <StreamIcon url={content.url} />
                 <span>
                   {data.hasOwnProperty('label') ? (
@@ -149,8 +151,8 @@ const SpaceBorder = styled.div.attrs((props) => ({
     pos.y === 0 ? 0 : borderWidth}px;
   border-bottom-width: ${({ pos, borderWidth, windowHeight }) =>
     pos.y + pos.height === windowHeight ? 0 : borderWidth}px;
-  box-shadow: ${({ isListening }) =>
+  box-shadow: ${({ isListening, activeColor }) =>
-    isListening ? '0 0 10px red inset' : 'none'};
+    isListening ? `0 0 10px ${activeColor} inset` : 'none'};
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
@@ -167,8 +169,8 @@ const StreamTitle = styled.div`
   color: white;
   text-shadow: 0 0 4px black;
   letter-spacing: -0.025em;
-  background: ${({ isListening }) =>
+  background: ${({ isListening, activeColor }) =>
-    isListening ? 'rgba(255, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.5)'};
+    Color(isListening ? activeColor : 'black').alpha(0.5)};
   border-radius: 4px;
   backdrop-filter: blur(10px);
   overflow: hidden;

src/node/index.js

@@ -39,6 +39,7 @@ function parseArgs() {
         'window.y',
         'window.frameless',
         'window.background-color',
+        'window.active-color',
       ],
       'Window settings',
     )
@@ -64,6 +65,10 @@ function parseArgs() {
       describe: 'Background color of wall (useful for chroma-keying)',
       default: '#000',
     })
+    .option('window.active-color', {
+      describe: 'Active (highlight) color of wall',
+      default: '#fff',
+    })
     .group(['data.interval', 'data.json-url', 'data.toml-file'], 'Datasources')
     .option('data.interval', {
       describe: 'Interval (in seconds) for refreshing polled data sources',
@@ -233,6 +238,7 @@ async function main() {
       width: argv.window.width,
       height: argv.window.height,
       gridCount: argv.grid.count,
+      activeColor: argv.window['active-color'],
     },
     auth: auth.getState(),
     streams: [],