根本原因是定位计算未响应主题切换，Floating UI 不监听 CSS 变量变更，必须手动调用 update()；CSS 变量需定义在 :root 下，浮动容器过渡动画应禁用几何属性以避免读取非终态尺寸。
浮动组件在暗黑模式下错位，根本原因不是颜色而是定位基准偏移
暗黑模式切换后 Floating UI 的 Tooltip、Dropdown 或 Popover 出现偏移、箭头错位、贴边异常，通常不是因为 CSS 变量没更新，而是定位计算时读取的样式值（如 border-width、padding、box-shadow）在主题切换后发生了变化，但 computePosition 没有重新触发。Floating UI 不监听 CSS 变量变更，它只响应 DOM 结构、滚动、尺寸等显式可观测事件。
必须手动触发 update()，不能依赖 class 切换自动重算
给 html 或 body 添加 dark 类后，Floating UI 的定位逻辑不会自动感知。你得显式调用实例的 update() 方法——尤其当主题切换导致元素尺寸或边框发生变化时。
- 使用
useFloating（React）：在theme值变化时，调用context.update()，例如：useEffect(() => { update(); }, [theme, update]); - 使用原生
computePosition：保存返回的cleanup函数，在主题切换后先cleanup()，再重新computePosition() - 避免在
onScroll或onResize里盲目调用update()，会造成性能抖动；只在主题实际变更后调用一次
浮动元素的 CSS 变量必须作用于 :root，且被中间件读取
Floating UI 的 arrow、offset 等中间件不直接读 CSS 变量，但如果你在箭头 SVG 或伪元素中用了 var(--arrow-size)，那这个变量必须定义在 :root 下，并在 html[data-theme="dark"] 中覆盖——否则即使定位坐标正确，视觉上仍会错位。
- 错误写法：
.dark .tooltip-arrow { --arrow-size: 8px; }→ 作用域太窄，无法被伪元素继承 - 正确写法：
:root { --arrow-size: 6px; } html[data-theme="dark"] { --arrow-size: 8px; } - 所有浮动容器的
padding、border-radius、box-shadow都应基于变量定义，确保主题切换时布局参数同步变化
暗黑模式下浮动组件闪动或抖动，90% 是过渡动画干扰定位
给 .tooltip 或 .dropdown 加了 transition: all 0.2s，会导致 computePosition 在动画进行中读取到非终态尺寸（比如 height 正在从 0→100px 过渡），从而计算出错误坐标。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：对浮动容器禁用影响几何属性的过渡，仅保留
opacity和transform：transition: opacity 0.15s, transform 0.15s; - 更稳妥做法：在
open状态刚激活时，临时加一个no-transitionclass，等update()完成后再移除 - 别在
@media (prefers-color-scheme: dark)里写过渡规则——它不响应 JS 主动切换，且优先级易冲突
