Ambiance.js is an ultra-small (< 11Kb), high-performance script that adds essential accessibility and comfort features to your web projects with a single line of code. It provides a non-destructive Dark Mode, a multi-level Blue Light Filter, and a Layout Scaler without bloating your project.

Key Features

Zero-config by default Just drop the script tag into your header. Data-attributes let you customize behavior.

Anti-Flash Protection Leverages cookies to remember user preferences and prevent white flashes.

Isolated UI Controls are rendered inside an isolated iframe to prevent CSS leaks.

Smart Inversion Dark mode intelligently preserves the original colors of images and videos.

Installation

Add the following snippet to the <head> section of your HTML:

<script
	src="https://ambiancejs.com/ambiance.js"
></script>

Default look: 24px darkslategray icons. The Theme button appears in the top‑left corner with 5px margins and a z‑index of 2147483647. Filter intensity is set to Low.

Configuration (Data Attributes)

Size of the control icons.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-size="24px"
></script>

Hex or CSS color of the icons.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-color="darkslateblue"
></script>

Hex or CSS background color of the icons.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-bgcol="rgba(0, 0, 0, 0.08)"
></script>

Enable/Disable the Dark Mode toggle.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-theme="true"
></script>

Enable/Disable the Blue Light Filter toggle.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-light="true"
></script>

Default filter intensity (lo, mid, hi).

<script
	src="https://ambiancejs.com/ambiance.js"
	data-filter="warm-lo"
></script>

Enable/Disable the Accessibility Scaling buttons.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-scale="true"
></script>

The corner anchor for the control panel.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-corner="bottom right"
></script>

The margin from the screen edges (X and Y).

<script
	src="https://ambiancejs.com/ambiance.js"
	data-margin="30px 25px"
></script>

The stacking order of the control layer.

<script
	src="https://ambiancejs.com/ambiance.js"
	data-z-index="10"
></script>

Limitations

The Scale function cannot be used in HTML that contains a sticky‑positioned element(s).

How It Works

Ambiance.js injects a dynamic CSS filter layer. Unlike traditional dark mode scripts, it uses a sophisticated invert and hue-rotate logic. It targets the html element while automatically excluding media elements to keep your visual assets intact.