LAPLACE Chat

Like Auto Dark Mode (OBS), this approach extends to custom scenes

Usage

• Following Auto Dark Mode (OBS), change the browser source's Page Permissions setting to Read access to user info (current scene collection, transitions)
• Pick the scene you want to customize, right-click it, rename it, and add a [scene:name] marker to the scene name. name is the scene name you are adding — keep it to plain Latin letters with no spaces or other special characters, e.g. Fullscreen Game [dark] [scene:gaming]
• Once set up, switch scenes again and the chat overlay in that scene automatically applies the global CSS style .scene-gaming, which you can use to redefine every property for the current scene
• If you author styles, enter an OBS Scene in the Styles tab to simulate a custom scene in OBS

If you would rather watch than read, follow the video tutorial below

Developers

As a developer, you can define .scene-[name] to pack styles for several scenes into a single template:

@layer template {

  /* 此样式只有在主播在当前场景名中添加 [scene:gaming] 时才会生效 */
  .scene-gaming {
    --mix-base: #000;
    --mix-factor: 98%;

    .event--message {
      padding: calc(var(--1px) * 6) calc(var(--1px) * 10);
    }

    /* other styles */
    ...
  }

  /* 此样式只有在主播在当前场景名中添加 [scene:chit-chat] 时才会生效 */
  .scene-chit-chat {
    --mix-base: #000;
    --mix-factor: 98%;
  }
}

Related Links

• Auto Dark Mode (OBS) - Base setup for switching the chat overlay to dark mode automatically
• Templates - Learn how template priority and cascade layers work