themes API
Access and utilize theme data and color tokens in your Replit extensions. Get current theme values and listen for theme changes.
The themes api allows you to access the current user’s theme and utilize the color tokens accordingly.
Usage
Methods
themes.getCurrentTheme
Returns all metadata on the current theme including syntax highlighting, description, HSL, token values, and more.
themes.getCurrentThemeValues
Returns the current theme’s global token values.
themes.onThemeChange
Fires the callback parameter function with the updated theme when the user’s theme changes.
themes.onThemeChangeValues
Fires the callback parameter function with the updated theme values when the user’s theme changes.
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
DisposerFunction
A cleanup/disposer function (void)
OnThemeChangeListener
Fires with the new theme data when the current theme changes
Was this page helpful?