diff --git a/apps/client/src/common/utils/styleUtils.ts b/apps/client/src/common/utils/styleUtils.ts index 488a0137d..5453221f7 100644 --- a/apps/client/src/common/utils/styleUtils.ts +++ b/apps/client/src/common/utils/styleUtils.ts @@ -15,8 +15,8 @@ export const getAccessibleColour = (bgColour?: string): ColourCombination => { try { const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa'; return { backgroundColor: bgColour, color: textColor }; - } catch (error) { - console.log(`Unable to parse colour: ${bgColour}`); + } catch (_error) { + /* we do not handle errors here */ } } return { backgroundColor: '#000', color: '#fffffa' }; diff --git a/apps/client/src/features/cuesheet/Cuesheet.tsx b/apps/client/src/features/cuesheet/Cuesheet.tsx index 928766528..a674ec79d 100644 --- a/apps/client/src/features/cuesheet/Cuesheet.tsx +++ b/apps/client/src/features/cuesheet/Cuesheet.tsx @@ -1,5 +1,6 @@ import { useRef } from 'react'; import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; +import Color from 'color'; import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types'; import useFollowComponent from '../../common/hooks/useFollowComponent'; @@ -117,6 +118,14 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu let rowBgColour: string | undefined; if (isSelected) { rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700 + } else if (row.original.colour) { + try { + // the colour is user defined and might be invalid + const colour = new Color(row.original.colour).alpha(0.25); + rowBgColour = colour.hsl().string(); + } catch (_error) { + /* we do not handle errors here */ + } } return (