Themes

webRoid ships with nine built-in color themes and lets you create your own from scratch or import them from VS Code and RStudio. You can assign separate themes to light and dark mode, so the app always looks the way you want regardless of your system setting.

Appearance settings with the Theme mode buttons and the Light Theme and Dark Theme rows

Appearance settings with the Theme mode buttons and the Light Theme and Dark Theme rows, in dark mode

System Theme Mode

A segmented button at the top of the Appearance section in Settings controls whether webRoid follows your device:

Option Behavior
System Follows your Android device theme. If your phone is set to dark mode, webRoid uses dark mode too.
Light Always uses light colors regardless of your system setting.
Dark Always uses dark colors regardless of your system setting.

The change takes effect immediately. No restart needed.

Built-in Themes

webRoid includes nine themes organized by mode. Each theme defines colors for the editor, console, syntax highlighting, and the rest of the UI.

Light Themes

A clean, neutral palette with soft grays and blue accents. The standard starting point.

Console under the Default Light theme

Ethan Schoonover’s warm, low-contrast palette designed for long reading sessions.

Console under the Solarized Light theme

Modeled on the GitHub code view. Familiar if you spend time reading code on the web.

Console under the GitHub Light theme

Dark Themes

A balanced dark palette with comfortable contrast and blue accents.

Console under the Default Dark theme

A popular dark theme with vivid purples, pinks, greens, and cyans on a deep background.

Console under the Dracula theme

The dark counterpart to Solarized Light, with the same carefully tuned color relationships.

Console under the Solarized Dark theme

Warm, saturated colors on a near-black background. A classic for code editors.

Console under the Monokai theme

Inspired by Atom’s default dark theme, with muted blues, purples, and greens.

Console under the One Dark theme

An arctic color palette with cool blues and soft contrasts, designed to be easy on the eyes.

Console under the Nord theme

Choosing a Theme

You can assign a different theme for light mode and dark mode independently. This means you can use GitHub Light during the day and Dracula at night, and webRoid will switch automatically when your system mode changes.

To choose a theme:

  1. Open Settings and scroll to the Appearance section
  2. Tap Light Theme to expand the light theme picker
  3. Each row shows the theme name and five color swatches representing its key colors (background, accent, keyword, string, comment)
  4. Tap a row to select it. The change applies immediately.
  5. Repeat with Dark Theme to choose your dark mode theme

Light theme picker expanded with available themes

Dark theme picker expanded with available themes, in dark mode

The five color swatches next to each theme name give you a quick preview without switching. Look for colors that match your preferences before tapping.

Contrast

Default Light and Default Dark meet the WCAG AA contrast ratio of 4.5:1 for text everywhere in the app, sheets and dialogs included. Their syntax colors meet it in the editor, on the highlighted current line and in Help’s code examples.

The other built-in themes reproduce palettes from other editors and are drawn as their authors designed them, so some of their colors fall below AA. Dracula’s comments, for example, are about 3:1, and Solarized Light’s about 2.5:1.

Android 14 and later have a system-wide contrast level, Standard, Medium or High, in the accessibility or display settings (the name and place vary by device). webRoid follows it, and changes as soon as you do:

Contrast level What webRoid does
Standard Every theme is drawn as designed, except that an accent color too faint to see is raised to 3:1 so buttons and switches show.
Medium Any text color below 4.5:1 (WCAG AA) on the surface it sits on is darkened or lightened until it reaches it.
High The same, to 7:1 (WCAG AAA), as far as the background allows. Each color keeps its own hue.

Here is the same Console at Standard contrast and then at High. The pictures use Solarized Light, or Dracula if you are reading this page in dark mode. At High, the # Fibonacci sequence comment is darker in Solarized Light and lighter in Dracula, and the background stays the same:

Console under Solarized Light at Android’s Standard contrast level, after a short Fibonacci example, with the # Fibonacci sequence comment in the theme’s own pale grey on its cream background

The same Solarized Light Console at High contrast, where the comment is darkened to a dark grey that stands out, the other text colors are darker too, and the cream background is unchanged

Console under Dracula at Android’s Standard contrast level, after a short Fibonacci example, with the # Fibonacci sequence comment in the theme’s own muted blue, in dark mode

The same Dracula Console at High contrast, where the comment is lightened almost to white, the other text colors are brighter too, and the background is unchanged, in dark mode

The adjustment covers every theme, custom and imported ones included, and every text color in it: syntax, console output, and the rest of the interface. Colors that already meet the level are left alone, and backgrounds never change, so a theme keeps its character. Your saved theme isn’t changed, so an export keeps the colors you chose. See also Colour and contrast in the Accessibility guide.

Creating Custom Themes

If none of the built-in themes are quite right, you can create your own.

Opening the Theme Editor

  1. Open Settings and scroll to Custom Themes, the section directly below Appearance
  2. Tap Create New Theme to open the editor
  3. Optionally, tap the Base Theme field, which reads “Clone from base theme…”, and choose a theme to copy its colors as a starting point. The list holds the nine built-in themes, each marked Light or Dark, and your custom themes. Until you choose one, a new theme starts with Dracula’s colors. If you have already changed some colors, webRoid asks before replacing them.

Theme Editor with the Base Theme list open below the Clone from base theme field, listing the nine built-in themes from Default Light (Light) to Nord (Dark)

Theme Editor with the Base Theme list open below the Clone from base theme field, listing the nine built-in themes from Default Light (Light) to Nord (Dark), in dark mode

Key Colors

The Theme Editor presents eight key colors that define the core look of your theme:

Color What it controls
Background Main editor and console background
Text Default text color
Accent UI highlights, buttons, active indicators
Keyword R keywords like if, for, function, library
String Quoted strings
Comment Code comments
Number Numeric literals
Function Function names and calls

Theme Editor for a new theme named My Custom Theme, with the Base Theme field, the Dark Theme switch turned on, and the eight key colors from Background to Function, each with its swatch and hex value

Theme Editor for a new theme named My Custom Theme, with the Base Theme field, the Dark Theme switch turned on, and the eight key colors from Background to Function, each with its swatch and hex value, in dark mode

Tap any color to open the Pick a Color dialog. Drag in the large square to change the color’s saturation and brightness, drag along the rainbow slider below it to change the hue, or type a hex value such as #1E1E2E into the Hex field (the # is optional). The swatch beside the field shows the result, and OK stays off until the value is a color. Tap OK to use it, or Cancel to keep the color you had.

Pick a Color dialog over the Theme Editor, with a saturation and brightness square in shades of purple, a rainbow hue slider, the Hex field reading #BD93F9 beside a matching purple swatch, and Cancel and OK

Pick a Color dialog over the Theme Editor, with a saturation and brightness square in shades of purple, a rainbow hue slider, the Hex field reading #BD93F9 beside a matching purple swatch, and Cancel and OK, in dark mode

Advanced Colors

Expand the Advanced Colors section to fine-tune 19 more colors, listed in this order:

  • Interface colors: the primary background and text, the secondary and tertiary backgrounds, secondary text, separator, and selection
  • Console colors: stdout, stderr, input, and prompt
  • Editor colors: line highlight, gutter background, and gutter text
  • Semantic colors: error, warning, success, and info
  • The syntax color for operators

Most of these are worked out from your key colors and follow them when they change. A color you set yourself, or one an imported or cloned theme came with, stays as it is. Reset Advanced Colors, at the end of the list, works them all out again from the key colors, after asking.

Theme Editor with Advanced Colors expanded, each color with its swatch and hex value: the UI secondary and tertiary backgrounds, secondary text, separator and selection; the Console stdout, stderr, input and prompt; the Editor line highlight, gutter background and gutter text; the Semantic error, warning, success and info; and the Syntax operator color

Theme Editor with Advanced Colors expanded, each color with its swatch and hex value: the UI secondary and tertiary backgrounds, secondary text, separator and selection; the Console stdout, stderr, input and prompt; the Editor line highlight, gutter background and gutter text; the Semantic error, warning, success and info; and the Syntax operator color, in dark mode

Live Preview

A live preview at the bottom of the editor updates as you change colors. It shows syntax-highlighted R code (a Fibonacci function) and console output with a prompt, stdout, a warning and an error, so you can see how your theme looks before saving.

Live preview showing Autumn Harvest colors applied to sample R code

Live preview showing Autumn Harvest colors applied to sample R code, in dark mode

Saving Your Theme

  1. Enter a name for your theme in the text field at the top. If another theme has that name, a line under the field says so and Save stays off.
  2. Set whether the theme is for light or dark mode using the Dark Theme switch. On a new theme, the switch follows the background until you set it yourself.
  3. Tap Save

Your theme then appears in the Light Theme or Dark Theme picker. A theme saved with no name is called Custom Theme.

If you change Dark Theme on the theme you are using, saving moves it to the other mode, and the mode it left goes back to its default. A note under the switch tells you first.

If you leave with unsaved changes, webRoid asks whether to Save, Discard, or Cancel and keep editing.

Editing and Deleting Custom Themes

Custom themes appear in the Custom Themes section of Settings. Each row shows the theme’s name, whether it is light or dark, and two icons: share and delete.

To edit a custom theme, tap its row. The Theme Editor opens with the theme’s colors filled in. There is no separate edit icon, and Base Theme only appears for a new theme.

Theme Editor opened for editing the “Autumn Harvest” custom theme

Theme Editor opened for editing the “Autumn Harvest” custom theme, in dark mode

To delete a custom theme, tap the trash icon on its row, then Delete to confirm. If it was the theme you were using, that mode goes back to its default theme.

Built-in themes cannot be edited, deleted or exported. To change one, choose it as the Base Theme of a new custom theme, then adjust the colors.

Importing and Exporting Themes

webRoid can import themes from other editors and share themes with other users.

Importing Themes

webRoid supports three theme file formats:

Format Source File extension
webRoid native Themes exported from webRoid or webRios (iOS) .json
VS Code VS Code color themes .json
RStudio RStudio editor themes .rstheme

To import a theme:

  1. Open Settings and scroll down to the Custom Themes section

Custom Themes section with the Import Theme button

Custom Themes section with the Import Theme button, in dark mode
  1. Tap Import Theme. Android’s file picker opens so you can pick a .json or .rstheme file from your device or cloud storage, such as Google Drive. The button says Importing… while it reads the file.

The file picker is part of Android, so its appearance varies by device and Android version. Opening a theme file from the Files app or an email doesn’t import it, even with webRoid, which adds it to your project as a text file. Use Import Theme instead, after saving an email attachment to your device.

  1. Select the theme file. webRoid detects the format and maps its colors, working out any missing ones from the colors that are present.

  2. The theme appears in the Custom Themes list with its name and a light/dark label. A message says which list to choose it from, such as “Imported Autumn Harvest. Choose it under Dark Theme.” If the name is taken, the new theme gets a number, such as Autumn Harvest 2.

After import, “Autumn Harvest” appears in the Custom Themes list

After import, “Autumn Harvest” appears in the Custom Themes list, in dark mode
  1. webRoid doesn’t switch to the new theme by itself. Tap Dark Theme (or Light Theme, whichever the message named) to expand the picker, then tap the theme at the bottom of the list.

Dark Theme picker showing “Autumn Harvest” selected at the bottom

Dark Theme picker showing “Autumn Harvest” selected at the bottom, in dark mode
  1. The theme takes effect immediately. Here is the Console with Autumn Harvest applied:

Console with the Autumn Harvest theme applied

If the file isn’t a theme webRoid can read, the message says why and nothing is added. For a VS Code extension, import the theme’s .json file from its themes folder (unzip a .vsix first).

Most VS Code and RStudio themes come across well, though highly customized ones may need small adjustments in the Theme Editor. A VS Code theme that builds on another, such as Dark+, gets some of webRoid’s default colors, and the message says so.

Example Theme Files

To try importing, download one of these example files. Both define the same “Autumn Harvest” palette (warm oranges, reds, and golds on a dark brown background) in different formats.

webRoid native format (download):

{
  "id": "autumn-harvest-example",
  "name": "Autumn Harvest",
  "isDark": true,
  "isBuiltIn": false,
  "palette": {
    "syntax": {
      "keyword": "#E07B39",
      "function": "#D4A843",
      "string": "#C4652A",
      "number": "#B8A44C",
      "comment": "#7A6B5D",
      "operator": "#CC8B55",
      "text": "#E8DCC8"
    },
    "ui": {
      "primaryBackground": "#1E1610",
      "secondaryBackground": "#2A2017",
      "tertiaryBackground": "#362A1E",
      "primaryText": "#E8DCC8",
      "secondaryText": "#9C8B78",
      "accent": "#E07B39",
      "separator": "#3D2F22",
      "selection": "#E07B3933"
    },
    "semantic": {
      "error": "#D94F3B",
      "warning": "#E0A030",
      "success": "#7BAF52",
      "info": "#5A9EC4"
    },
    "console": {
      "stdout": "#E8DCC8",
      "stderr": "#D94F3B",
      "input": "#D4A843",
      "prompt": "#E07B39"
    },
    "editor": {
      "background": "#1E1610",
      "lineHighlight": "#2A2017",
      "gutterBackground": "#171009",
      "gutterText": "#7A6B5D"
    }
  }
}

RStudio format (download):

/* Autumn Harvest - A warm, cozy dark theme with autumn colors */
/* RStudio .rstheme format - import into webRoid or RStudio */

.ace_editor, .rstudio-themes-flat .ace_editor_theme {
  background-color: #1E1610;
  color: #E8DCC8;
}

.ace_cursor {
  color: #E07B39;
}

.ace_gutter {
  background: #171009;
  color: #7A6B5D;
}

.ace_gutter-active-line {
  background-color: #2A2017;
}

.ace_marker-layer .ace_active-line {
  background-color: #2A2017;
}

.ace_marker-layer .ace_selection {
  background: #E07B3933;
}

.ace_keyword {
  color: #E07B39;
}

.ace_function {
  color: #D4A843;
}

.ace_string {
  color: #C4652A;
}

.ace_constant.ace_numeric {
  color: #B8A44C;
}

.ace_comment {
  color: #7A6B5D;
  font-style: italic;
}

.ace_keyword.ace_operator {
  color: #CC8B55;
}

.ace_variable {
  color: #E8DCC8;
}

.ace_support.ace_function {
  color: #D4A843;
}

The native JSON format keeps every color exactly. The .rstheme format maps Ace editor CSS selectors to webRoid’s palette and works out the rest, like semantic or console colors.

Exporting Themes

To share a custom theme:

  1. Find it in the Custom Themes list.
  2. Tap its share icon.
  3. Choose Save to Downloads, or Share… to send it to another app, such as Drive or email.

The file is named after the theme, such as Autumn-Harvest.json. If that name is taken in Downloads, Android adds a number, such as Autumn-Harvest (1).json, and the message after saving gives the new name.

Exported themes use webRoid’s native JSON format, so you can import them on another device or use them in webRios on iOS.

Plot Background

The Plot Background setting (in Settings > Appearance) controls the background color behind R plots:

Option Behavior
White Plots always render on a white background, regardless of your theme. This is the default and matches how plots look in desktop R.
Transparent Plots render with a transparent background, allowing your theme’s background color to show through. R draws axes, labels and titles in black unless you choose other colors, so this suits a light theme best: on a dark theme they disappear into the background.

Here is the same plot drawn inline in the Console, first with White and then with Transparent. The pictures use Solarized Light, or Default Dark if you are reading this page in dark mode:

Console under Solarized Light with a scatter plot of MPG against weight drawn inline, Plot Background set to White, so the plot sits on a white panel against the theme’s cream background

The same scatter plot with Plot Background set to Transparent, Solarized Light’s cream background showing through behind the points, axes and labels

Console under Default Dark with a scatter plot of MPG against weight drawn inline, Plot Background set to White, so the plot is a white panel standing out against the black Console, in dark mode

The same scatter plot under Default Dark with Plot Background set to Transparent: only the blue points show, because the black axes, labels and title disappear into the black background, in dark mode

To use Transparent with a dark theme, give the axes and text a light color in the plot call, for example plot(mtcars$wt, mtcars$mpg, main = "Weight vs MPG", fg = "white", col.axis = "white", col.lab = "white", col.main = "white").

The setting is applied when R draws each plot. White plots are drawn on white, and exported PNGs keep that background. Transparent plots have a clear background: in the app your theme shows through, a PNG keeps the transparency, and a JPEG is saved on white because JPEG has no transparency. A plot keeps the background it was drawn with, so run the code again after changing the setting to redraw it.