Skip to content
On this page

๐ŸŽจ @bridge/theme

This allows your extension to interact with bridge.'s theme system. View Source Code.

import { ... } from '@bridge/theme'

โšก Functions


This function is used to attach a callback to be executed when the user switches between themes. You can access whether the new theme is a dark or light mode theme.

  • Signature: onChange((func: (mode: 'dark' | 'light') => void))
  • Returns: IDisposable
const themeWatcher = onChange((mode) => {
	if (mode === 'dark') console.log('The selected theme is now a dark theme!')
	else console.log('The selected theme is now a light theme!')
// When done with watching the theme


The getCurrentMode function is used to get the current color mode, so either dark or light mode.

  • Signature: getCurrentMode()
  • Returns: 'light' | 'dark'
const themeMode = getCurrentMode()

if (themeMode === 'dark') console.log('You are using dark mode.')


This allows you to get a specific color from the currently selected theme. The returned color can be in hex color format, or the name of a color, e.g. red or green. This will match whatever is set in the theme's definition file.

  • Signature: getColor(name: TColorName)
  • Returns: string
const toolbarColor = getColor('toolbar')


This function allows you to get the current theme's syntax highlighter data.

  • Signature: getHighlighterInfo(name: string)
  • Returns: { color?: string; background?: string; textDecoration?: string; isItalic?: boolean}
const { color, isItalic } = getHighlighterInfo('number')
if (color && isItalic) {
	console.log(`Numbers are the color ${color} and numbers are in italic.`)

Released under the GPL-3.0 License.