Code.Movie

Themes

Types for theme variables are given in CSS value definition syntax.

Default

A basic high-contrast light theme without any bells and whistles. Exported as defaultTheme by the core library. No theme variables.

To use the default theme, you can either not specify any theme or pass it explicitly:

import { animateHTML, defaultTheme} from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: defaultTheme,
});
➡️➡️1234567891011
import { animateHTML, defaultTheme} from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: defaultTheme,
});

Monokai dark

The popular Monokai color scheme, dark edition. Comes with a decorative editor background UI (which can be disabled), including an optional status bar. Exported as monokaiDark by the core library. Theme variables:

Variable Type Default
--cm-theme-ui-enabled 0 | 1 1
--cm-theme-ui-window-animate-height 0 | 1 1
--cm-theme-ui-border-color <color> #2d2a2e
--cm-theme-ui-window-background <bg-layer>#? , <final-bg-layer> #181618
--cm-theme-ui-window-shadow <spread-shadow># 0 0 2em rgb(0, 0, 0, 0.5)
--cm-theme-ui-status-bar-background <bg-layer>#? , <final-bg-layer> #141314
--cm-theme-ui-status-bar-enabled 0 | 1 1
--cm-theme-ui-status-bar-text-left <string>? attr(data-cm-language-title)
--cm-theme-ui-status-bar-text-right <string>? 'Step ' var(--current-frame-string) ' / ' var(--total-frames-string)

Usage example:

import { animateHTML, monokaiDark } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: monokaiDark,
});
➡️➡️1234567891011
import { animateHTML, monokaiDark } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: monokaiDark,
});

Monokai light

The popular Monokai color scheme, light edition. Comes with a decorative editor background UI (which can be disabled), including an optional status bar. Exported as monokaiLight by the core library. Theme variables:

Variable Type Default
--cm-theme-ui-enabled 0 | 1 1
--cm-theme-ui-window-animate-height 0 | 1 1
--cm-theme-ui-border-color <color> #ece8e6
--cm-theme-ui-window-background <bg-layer>#? , <final-bg-layer> #fffbfa
--cm-theme-ui-window-shadow <spread-shadow># 0 0 2em rgb(0, 0, 0, 0.3)
--cm-theme-ui-status-bar-background <bg-layer>#? , <final-bg-layer> #f7f3f2
--cm-theme-ui-status-bar-enabled 0 | 1 1
--cm-theme-ui-status-bar-text-left <string>? attr(data-cm-language-title)
--cm-theme-ui-status-bar-text-right <string>? 'Step ' var(--current-frame-string) ' / ' var(--total-frames-string)

Usage example:

import { animateHTML, monokaiLight } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: monokaiLight,
});
➡️➡️1234567891011
import { animateHTML, monokaiLight } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

const language = json();
let keyframes = [/* keyframes go here */];

let html = animateHTML(keyframes, {
  tabSize: 2,
  language,
  theme: monokaiLight,
});

Conditional theming

Read the explainer on dark/light mode to learn how conditional theming works.