VS Code Themes - Dev Xscriptor

Bogota theme selected. Interactive preview available below.

Interactive editor preview for the Bogota theme. The code area is scrollable with a mouse, trackpad or keyboard and lets page scrolling continue naturally once the inner content reaches its limits.

ThemeBogota

ExtensionX Glass

1import { useMemo, useState } from 'react';

2import { ThemeProvider } from '@xscriptor/vscode';

4// Previewing the active palette

5const ACTIVE_THEME = 'BOGOTA';

7export default function ThemeGallery() {

8 const [selected, setSelected] = useState(ACTIVE_THEME);

9 const themeName = useMemo(() => selected.toLowerCase(), [selected]);

11 return (

12 <ThemeProvider theme={themeName}>

13 <section className='gallery-shell'>

14 <header data-theme={selected} />

15 </section>

16 </ThemeProvider>

17 );

18}

19import { useMemo, useState } from 'react';

20import { ThemeProvider } from '@xscriptor/vscode';

22// Previewing the active palette

23const ACTIVE_THEME = 'BOGOTA';

25export default function ThemeGallery() {

Terminalzsh

xscriptor@devpnpm add @xscriptor/themes

xscriptor@devpnpm xscriptor-themes install

xscriptor@devcode --install-extension xscriptor.xscriptor-themes

main*0 problemstheme.json

Ln 18, Col 24Spaces: 2UTF-8Prettier

Preview reel

Select a theme to switch from video preview to the interactive editor.

All Xscriptor VSCode themes are tuned to meet WCAG AA contrast targets across the primary editing surface and core syntax states.

View Source Code Product Icons Back To Resources

XGlass for vscode & forks

Make your VS Code look like glass.

Xglass brings a translucent layer to the editor so your workspace feels lighter, cleaner and more immersive without leaving the Xscriptor ecosystem.

View Source Code