bilibili-ambilight

Project Overview

Bilibili Ambient Light is a browser extension that adds an ambilight effect to Bilibili videos, projecting the colors at the edges of the frame around the player for a more immersive viewing experience. It is ported from a YouTube ambilight plugin, reusing the original rendering engine while rewriting the site integration for Bilibili. It covers regular videos, anime and shows, playlists, and festival pages, and switches to a dark theme automatically when ambient light is on.

Let the light from the video spill across the whole screen.

Key Features

• Ambient light rendering: projects video colors around the player in real time using WebGL and Canvas2D
• Black bar handling: automatically crops top/bottom or left/right black bars and scales the video to fill the space
• Dark theme sync: switches Bilibili to dark theme when ambient light is on, with follow-site or light options
• Immersive blending: the header, search box, right sidebar, danmaku input row, and comments blend into the background
• Keyboard shortcuts: G toggles ambient light by default, while B, V, and H handle black bars and scaling
• Multiple pages: covers regular videos and multi-part videos, anime and shows, playlists, festivals, and classroom pages
• Settings menu: a dedicated ambient light entry in the Bilibili player control bar

Target Audience

• Users who want an immersive web viewing experience
• Users watching on large screens or in backlit environments
• Users who like dark themes and borderless visuals

Quick Start

1. Get the extension: on Chrome or Edge open chrome://extensions, enable developer mode, and load the unpacked dist folder; on Firefox use the dedicated build and load it from the debugging page
2. Open any Bilibili video page and ambient light takes effect automatically
3. Click the "glowing screen" icon to the left of the gear button at the bottom right of the player to open the ambient light settings
4. Use G to toggle ambient light, B and V to adjust black bars, and H to scale and fill
5. Choose dark, follow-site, or light under "Basic Settings → Appearance (Theme)"

Core Advantages

• Strong immersion: colors extend beyond the player for a fuller viewing atmosphere
• Adapts automatically: all player modes and the mini player shown on scroll are handled correctly
• Privacy-friendly: the original project's error reporting is removed, leaving errors only in the browser console
• Visually unified: the dark theme and blended elements connect the page with the video

System Requirements

Item	Requirement
OS	Any, depending on the browser
Browser	Chrome, Edge, or the dedicated Firefox build
Target site	Bilibili video, anime, and playlist pages

Notes

• This extension is an unofficial third-party project, unrelated to Bilibili or YouTube
• DRM-protected videos cannot display ambient light
• Videos played through <bwp-video> are not yet supported, such as some HEVC WebAssembly players
• Building from source requires Node.js 22 or later