# Custom Splash HTML Builder

**URL:** https://meta.discourse.org/t/custom-splash-html-builder/409871
**Category:** Plugin
**Tags:** splash
**Created:** [August 12, 2026, 1:04am UTC](https://meta.discourse.org/t/custom-splash-html-builder/409871 "2026-08-12T01:04:03Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 13, 2026, 1:46pm UTC](https://meta.discourse.org/t/custom-splash-html-builder/409871/2 "2026-08-13T13:46:25Z")

</div>

Hello 👋

I’ve added `data-color-scheme` to the `#d-splash` section, so you can easily set up light and dark scheme splash logos. [DEV: Implement dynamic color scheme for splash section · VaperinaDEV/custom-splash-html-builder@ba6641b · GitHub](https://github.com/VaperinaDEV/custom-splash-html-builder/commit/ba6641b54c550b6d84ffac0251e7045cee95fe9c)

```erb
<%- splash_forced_scheme = (dark_color_scheme? || forced_dark_mode?) ? "dark" : (forced_light_mode? ? "light" : nil) %>

<section id="d-splash"<%= " data-color-scheme=\"#{splash_forced_scheme}\"".html_safe if splash_forced_scheme %>>

```

So `#d-splash` gets a `data-color-scheme="dark"` / `"light"` attribute when a light or dark scheme is explicitly forced, and is left without the attribute only when both schemes are enabled and the OS is meant to decide.

The fix is to let that attribute take priority over the media query in the custom CSS, and only fall back to `prefers-color-scheme` when the attribute is absent.

Example:

**Custom HTML**

```html
<!-- LIGHT MODE -->
<div class="custom-splash-light">
  <div class="ring-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
    
  <div class="logo-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
</div>

<!-- DARK MODE -->
<div class="custom-splash-dark">
  <div class="ring-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
    
  <div class="logo-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
</div>

```

**Custom CSS**

```css
#d-splash .custom-splash-dark {
  display: none;
}

/* OS decides — only when there's no forced scheme */
@media (prefers-color-scheme: dark) {
  #d-splash:not([data-color-scheme]) .custom-splash-light {
    display: none;
  }
  #d-splash:not([data-color-scheme]) .custom-splash-dark {
    display: block;
  }
}

/* forced scheme always wins, regardless of OS */
#d-splash[data-color-scheme="light"] .custom-splash-dark {
  display: none;
}
#d-splash[data-color-scheme="dark"] .custom-splash-light {
  display: none;
}
#d-splash[data-color-scheme="dark"] .custom-splash-dark {
  display: block;
}

```

Since `:not([data-color-scheme])` simply doesn’t match once the attribute is present, there’s no specificity fight between the two rule sets, the forced scheme always wins.

---

_[View the full topic](https://meta.discourse.org/t/custom-splash-html-builder/409871)._