Replit Docs

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

Getting Started

Replit Apps

Replit AI

Replit Workspace

Publishing your App

Storage and Databases

Platforms

Extensions

Additional Resources

themes API

Usage

Methods

`themes.getCurrentTheme`

`themes.getCurrentThemeValues`

`themes.onThemeChange`

`themes.onThemeChangeValues`

Types

ColorScheme

CustomTheme

ThemeEditorSyntaxHighlighting

ThemeSyntaxHighlightingModifier

ThemeSyntaxHighlightingTag

ThemeValues

ThemeValuesEditor

ThemeValuesGlobal

ThemeVersion

ColorScheme

DisposerFunction

OnThemeChangeListener

Getting Started

Replit Apps

Replit AI

Replit Workspace

Publishing your App

Storage and Databases

Platforms

Extensions

Additional Resources

​Usage

​Methods

​themes.getCurrentTheme

​themes.getCurrentThemeValues

​themes.onThemeChange

​themes.onThemeChangeValues

​Types

​ColorScheme

​CustomTheme

​ThemeEditorSyntaxHighlighting

​ThemeSyntaxHighlightingModifier

​ThemeSyntaxHighlightingTag

​ThemeValues

​ThemeValuesEditor

​ThemeValuesGlobal

​ThemeVersion

​ColorScheme

​DisposerFunction

​OnThemeChangeListener

Usage

Methods

`themes.getCurrentTheme`

`themes.getCurrentThemeValues`

`themes.onThemeChange`

`themes.onThemeChangeValues`

Types

ColorScheme

CustomTheme

ThemeEditorSyntaxHighlighting

ThemeSyntaxHighlightingModifier

ThemeSyntaxHighlightingTag

ThemeValues

ThemeValuesEditor

ThemeValuesGlobal

ThemeVersion

ColorScheme

DisposerFunction

OnThemeChangeListener