themes API

The themes api allows you to access the current user's theme and utilize the color tokens accordingly.

Usage

import { themes } from '@replit/extensions';

Methods

themes.getCurrentTheme

Returns all metadata on the current theme including syntax highlighting, description, HSL, token values, and more.

getCurrentTheme(): Promise<ThemeVersion>

themes.getCurrentThemeValues

Returns the current theme's global token values.

getCurrentThemeValues(): Promise<ThemeValuesGlobal>

themes.onThemeChange

Fires the callback parameter function with the updated theme when the user's theme changes.

onThemeChange(callback: OnThemeChangeListener): Promise<DisposerFunction>

themes.onThemeChangeValues

Fires the callback parameter function with the updated theme values when the user's theme changes.

onThemeChangeValues(callback: OnThemeChangeValuesListener): Promise<DisposerFunction>

Types

ColorScheme

Enumerated Color Scheme

Property	Type

CustomTheme

Custom Theme GraphQL type

Property	Type
author	User
colorScheme	ColorScheme
hasUnpublishedChanges	boolean
id	number
isCurrentUserThemeAuthor	boolean
isInstalledByCurrentUser	boolean
latestThemeVersion	ThemeVersion
numInstalls?	number
slug?	string
status?	"private" │ "public"
title?	string

ThemeEditorSyntaxHighlighting

Theme Editor Syntax Highlighting

Property	Type
__typename	string
tags	ThemeSyntaxHighlightingTag[]
values	ThemeSyntaxHighlightingModifier

ThemeSyntaxHighlightingModifier

Theme Syntax Highlighting Modifier

Property	Type
color?	string
fontSize?	string
fontStyle?	string
fontWeight?	string
textDecoration?	string

ThemeSyntaxHighlightingTag

Theme Syntax Highlighting Tag

Property	Type
__typename	string
modifiers	null │ string[]
name	string

ThemeValues

Both global and editor theme values

Property	Type
__typename?	string
editor	ThemeValuesEditor
global	ThemeValuesGlobal

ThemeValuesEditor

Editor Theme Values, an array of ThemeEditorSyntaxHighlighting

Property	Type
syntaxHighlighting	ThemeEditorSyntaxHighlighting[]

ThemeValuesGlobal

Global theme values interface

Property	Type
__typename?	string
accentNegativeDefault	string
accentNegativeDimmer	string
accentNegativeDimmest	string
accentNegativeStronger	string
accentNegativeStrongest	string
accentPositiveDefault	string
accentPositiveDimmer	string
accentPositiveDimmest	string
accentPositiveStronger	string
accentPositiveStrongest	string
accentPrimaryDefault	string
accentPrimaryDimmer	string
accentPrimaryDimmest	string
accentPrimaryStronger	string
accentPrimaryStrongest	string
backgroundDefault	string
backgroundHigher	string
backgroundHighest	string
backgroundOverlay	string
backgroundRoot	string
black	string
blueDefault	string
blueDimmer	string
blueDimmest	string
blueStronger	string
blueStrongest	string
blurpleDefault	string
blurpleDimmer	string
blurpleDimmest	string
blurpleStronger	string
blurpleStrongest	string
brownDefault	string
brownDimmer	string
brownDimmest	string
brownStronger	string
brownStrongest	string
foregroundDefault	string
foregroundDimmer	string
foregroundDimmest	string
greenDefault	string
greenDimmer	string
greenDimmest	string
greenStronger	string
greenStrongest	string
greyDefault	string
greyDimmer	string
greyDimmest	string
greyStronger	string
greyStrongest	string
limeDefault	string
limeDimmer	string
limeDimmest	string
limeStronger	string
limeStrongest	string
magentaDefault	string
magentaDimmer	string
magentaDimmest	string
magentaStronger	string
magentaStrongest	string
orangeDefault	string
orangeDimmer	string
orangeDimmest	string
orangeStronger	string
orangeStrongest	string
outlineDefault	string
outlineDimmer	string
outlineDimmest	string
outlineStronger	string
outlineStrongest	string
pinkDefault	string
pinkDimmer	string
pinkDimmest	string
pinkStronger	string
pinkStrongest	string
purpleDefault	string
purpleDimmer	string
purpleDimmest	string
purpleStronger	string
purpleStrongest	string
redDefault	string
redDimmer	string
redDimmest	string
redStronger	string
redStrongest	string
tealDefault	string
tealDimmer	string
tealDimmest	string
tealStronger	string
tealStrongest	string
white	string
yellowDefault	string
yellowDimmer	string
yellowDimmest	string
yellowStronger	string
yellowStrongest	string

ThemeVersion

Theme Version GraphQL type

Property	Type
__typename?	string
customTheme?	CustomTheme
description?	string
hue	number
id	number
lightness	number
saturation	number
timeUpdated?	string
values?	ThemeValues

ColorScheme

Enumerated Color Scheme

Dark = 'dark'
Light = 'light'

DisposerFunction

A cleanup/disposer function (void)

() => void

OnThemeChangeListener

Fires with the new theme data when the current theme changes

(theme: ThemeVersion) => void