remove mixBlendMode

too slow when many keyframes

public/electron.js

@@ -73,6 +73,7 @@ function getSizeOptions() {
 function createWindow() {
   const darkMode = configStore.get('darkMode');
   // todo follow darkMode setting when user switches
+  // https://www.electronjs.org/docs/latest/tutorial/dark-mode
   if (darkMode) nativeTheme.themeSource = 'dark';
 
   mainWindow = new BrowserWindow({

src/Timeline.jsx

@@ -322,7 +322,7 @@ const Timeline = memo(({
           ))}
 
           {shouldShowKeyframes && !areKeyframesTooClose && neighbouringKeyFrames.map((f) => (
-            <div key={f.time} style={{ position: 'absolute', top: 0, bottom: 0, left: `${(f.time / durationSafe) * 100}%`, marginLeft: -1, width: 1, background: 'var(--gray9)', mixBlendMode: 'difference', pointerEvents: 'none' }} />
+            <div key={f.time} style={{ position: 'absolute', top: 0, bottom: 0, left: `${(f.time / durationSafe) * 100}%`, marginLeft: -1, width: 1, background: 'var(--gray11)', pointerEvents: 'none' }} />
           ))}
         </div>
       </div>

src/main.css

@@ -1,3 +1,7 @@
+/*
+https://www.radix-ui.com/docs/colors/palette-composition/the-scales
+https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale
+*/
 @import '@radix-ui/colors/red.css';
 @import '@radix-ui/colors/redDark.css';
 @import '@radix-ui/colors/green.css';