Overview
Delver X extensions allow you to personalize your experience, and one of the simplest yet most impactful ways is by creating custom themes. You can change the entire color scheme of the application to suit your preferences.
Theme extensions are small Javascript files that use the delver.setTheme() API function to apply new colors. Like all extensions, they run in a sandboxed environment and activate as soon as the app loads.
The setTheme API
The core of any theme extension is the delver.setTheme() function. This function takes a single object that specifies the colors you want to override. You don’t need to define every color; any color key you omit will keep its default value.
Here are the color keys you can customize:
Primary Theme Colors
These define the main branding colors of the application. Delver for Magic the Gathering is blue/dark blue while Pokemon is blue/green, for instance.
primary: The main primary color.primary-dark: A darker shade of the primary color.primary-light: A lighter shade of the primary color.secondary: The secondary color.
Text Colors
Color of text in both light and dark modes. Numbers go from darker (100) to lighter (300), for both light and dark values.
text-color-100: Main text color for light mode.text-color-200: Secondary text color for light mode.text-color-300: Tertiary/disabled text color for light mode.dark-text-color-100: Main text color for dark mode.dark-text-color-200: Secondary text color for dark mode.dark-text-color-300: Tertiary/disabled text color for dark mode.
Background Colors
Background surfaces for both light and dark modes. Numbers go from darker (100) to lighter (300), for both light and dark values.
background-color-100: Base background for light mode.background-color-200: Primary surface color for light mode.background-color-300: Secondary surface color for light mode.dark-background-color-100: Base background for dark mode.dark-background-color-200: Primary surface color for dark mode.dark-background-color-300: Secondary surface color for dark mode.
Demo: A “True Dark” Theme
Let’s create a simple extension that makes the default dark theme even darker. Feel free to experiment with different color values to create your perfect theme.
How to Use
- Create a new file on your computer and name it
true-dark.js. - Copy the code below and paste it into your new file.
- In Delver X, navigate to the Extensions page, tap Create then Install. Select the
true-dark.jsfile you just created. - The new, darker theme will be applied immediately.
Full Extension Code
/*
* @id true-dark
* @name True Dark
* @version 100
* @short_description Make the dark-theme even darker
* @description_start
* This extension uses the setTheme API to apply a theme that is darker than the default dark theme.
* @description_end
* @icon_start
* <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 24 24">
* <path fill="white" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
* </svg>
* @icon_end
* @developer Delver Lab
* @developer_url [https://delverlab.com](https://delverlab.com)
*/
delver.setTheme({
colors: {
primary: '#020617',
'primary-dark': '#000000',
'primary-light': '#0f172a',
secondary: '#000000',
// Override dark mode background colors
'dark-background-color-100': '#000000',
'dark-background-color-200': '#020617',
'dark-background-color-300': '#0f172a'
}
});