UI Inconsistency After macOS System Theme Change

[max-mrgrsk]

When the macOS system theme changes (Light to Dark), certain elements of the modelling app UI fail to update:

[Add a title above and insert a description of the issue here]

Core Dump

[coredump-dcff6a01-8ad3-4cc7-b5d8-c767a4da3cc7.json](https://public.blob.zoo.dev/31604360-31fe-4196-bc9e-9d129b0111bc/modeling-app/coredump-dcff6a01-8ad3-4cc7-b5d8-c767a4da3cc7.json) Reference ID: dcff6a01-8ad3-4cc7-b5d8-c767a4da3cc7

KCL Code

```kcl const holeDiameter = 16 const wall = 2 const holeRadius = holeDiameter / 2 const thickHook = holeDiameter + wall * 2 const thinHook = 3 const voidWidth = 5 const voidHeight = 28 const penHeight = 60 const sketch = startSketchOn('XZ') |> startProfileAt([0, 0], %) |> line([thickHook, 0], %) |> line([0, penHeight], %, $seg02) |> line([-(thickHook + voidWidth + thinHook), 0], %, $seg01) |> line([0, -thinHook - voidHeight], %) |> line([thinHook * 2, 0], %) |> line([0, thinHook], %) |> line([-thinHook, thinHook], %, $seg05) |> line([0, voidHeight - thinHook*2], %, $seg03) |> line([voidWidth, 0], %, $seg04) |> close(%) const body = extrude(thickHook, sketch) |> fillet({ radius: wall * 0.4, tags: [ getNextAdjacentEdge(seg01), getNextAdjacentEdge(seg02) ] }, %) |> fillet({ radius: voidWidth * 0.4, tags: [ getNextAdjacentEdge(seg03), getNextAdjacentEdge(seg04) ] }, %) const void = startSketchOn(body, seg01) |> circle({ center: [-(holeRadius+wall), holeRadius+wall ], radius: holeRadius, }, %, $segHole) |> extrude(-penHeight+wall, %) |> chamfer({ length: holeRadius*0.99, tags: [ getOppositeEdge(segHole) ] }, %) // logo fn kittFace = (body, tag, x, y, size, depth) => { const px = size/13 const a = px * 0.1 const kittLeftEye = startSketchOn(body, tag) |> startProfileAt([x+0*px, y+5*px], %) |> line([0, px], %) |> line([px-a, 0], %) |> line([0, px], %) |> line([a*2+px*3, 0], %) |> line([0, -px], %) |> line([px-a, 0], %) |> line([0, -px], %) |> line([-px-a, 0], %) |> line([0, px], %) |> line([-px*3+a*2, 0], %) |> line([0, -px], %) |> close(%) |> extrude(depth, %) const kittRightEye = startSketchOn(body, tag) |> startProfileAt([x+11*px, y+4*px], %) |> line([0, px*4], %) |> line([px*2, 0], %) |> line([0, -px*4], %) |> close(%) |> extrude(depth, %) const kittMouth = startSketchOn(body, tag) |> startProfileAt([x+3*px, y+2*px], %) |> line([0, px], %) |> line([px+a, 0], %) |> line([0, -px], %) |> line([px, 0], %) |> line([0, -px], %) |> line([px*2-a, 0], %) |> line([0, px*2], %) |> line([-px, 0], %) |> line([0, px], %) |> line([px*3, 0], %) |> line([0, -px], %) |> line([-px, 0], %) |> line([0, -px*2], %) |> line([px*2-a, 0], %) |> line([0, px], %) |> line([px, 0], %) |> line([0, px], %) |> line([px+a, 0], %) |> line([0, -px], %) |> line([-px+a, 0], %) |> line([0, -px], %) |> line([-px, 0], %) |> line([0, -px], %) |> line([-px*5-a*2, 0], %) |> line([0, px], %) |> line([-px, 0], %) |> line([0, px], %) |> close(%) |> extrude(depth, %) return kittLeftEye } const logo = kittFace(body, seg02,19,2,holeDiameter*1.6,-1) ```

[franknoirot]

Thank you @max-mrgrsk. What is your OS theme system setting?

[jessfraz]

same issue as this https://github.com/KittyCAD/modeling-app/issues/3863 and i am on auto mode as well

[franknoirot]

OH you mean when it auto switches at dusk or dawn???? You have the theme setting in the app set to system (the default), and on your OS it's set to automatic (the default), and when the automatic switches LMAO that's so I'm so sick of theme ahh!

I don't think we check if the resolved system theme updated at any sort of interval, so the UI is updating to dark automatically at dusk and the stream—which uses our getThemeColorForEngine function on stream start—doesn't hear about it, because the CSS just quietly does its job and switches to the dark theme based on the latest prefers-color-scheme media query

[franknoirot]

Hell yeah we just need to use a change listener on a matchMedia preference

[jessfraz]

since so many electron apps do this theres gotta be a way

[jessfraz]

nice