Introduction

The Theme Maker is a dedicated interface enabling users to customize themes. Within this interface, users will find several buttons that control the overall utilities of the editor, as well as functionalities related to profiles. The Theme Maker includes a color lookup panel for previewing the colors of the theme being edited. The editor is divided into five sections: Profiles, Accent Color, Widget & Backdrop, Favicon, and Miscellaneous. Each section controls a specific aspect of the Theme Maker’s functionality.

Profiles, Color Lookup, and Utility Buttons

Profiles are among the top-level features of the Theme Maker, as they represent the themes in their entirety. Alongside the color lookup panel and utility buttons, they are the first few elements that beginners might interact with.

Profiles

In the Theme Maker, each configuration of a theme is stored in a ‘profile.’ These profiles are listed in the Profiles section, represented by rounded square icons with the backdrop of their corresponding themes. To access a profile, simply click the icon. The clicked profile will then be the one under editing, and if the Theme Maker’s theme is currently in use, it will switch to the appearance of that profile. The selection of a profile is indicated by its opaque border and a subtle backlight, distinguishing it from other unselected profiles.

On the leftmost side of the array of profile icons is a similarly-shaped button with a plus sign in a circle icon in the middle. This button is used to add a new profile at the end of the array. Any newly-added profile has a default appearance resembling the default theme of the About page, albeit with slight modifications. Users can then make any desired modifications to this default format. The system allows for a maximum of 16 profiles at a time, though it’s unlikely that this cap will be reached in normal use.

To delete a profile, hover the cursor (or tap) on the top-left area of the profile icon and observe a cross button appears. Click the button to remove this profile.

Five template profiles are already built into the Theme Maker. These templates serve as both demonstrations of the customizability of the Theme Maker and as examples of how themes might be created. Like other profiles, they can be modified or deleted.

The array of profile icons can also be accessed in the settings panel. However, in this panel, the plus sign in a circle button for appending new profiles and the cross button for deleting profiles will not be visible. Instead, they serve the sole purpose of selecting theme profiles for browsing use.

Color Lookup

A color lookup panel is available on the right-hand side of the Theme Maker window. For narrower screens, such as those on a smartphone, the panel will be visible at the top of the page. The panel is divided into eight blocks. The first four represent the main accent colors used throughout Zimo Web for various content. These colors typically follow a gradient or shade with a specific direction, but can be customized as needed. The last two blocks represent widget and backdrop colors. These colors are constructed with more complex gradients and are used in most widgets and as the backdrop of Zimo Web, respectively.

Since the Theme Maker allows users to work on themes without setting them as the current displaying theme, the color lookup panel becomes essential for visualizing how the created theme will appear in real scenarios, as they can reflected how the colors are being edited in real-time.

Utility Buttons

A series of buttons is located on the rightmost side of the Theme Maker window (or directly below the color lookup panel for narrower screens). These buttons primarily handle functionalities related to profiles or the Theme Maker window as a whole. Their accessibility throughout the Theme Maker window ensures convenient access to these essential functions.

The sidebar button is located at the topmost position of the button array. Its purpose is to expand or retract the color lookup panel, as the panel may sometimes be intrusive or occupy too much space. However, this button does not appear on narrower screens, as the color lookup panel does not always remain on the right-hand side of the Theme Editor window and therefore cannot be expanded or retracted.

The preview button is located directly below the sidebar button (or on the leftmost side on narrower screens). This button previews the theme currently being edited, with updates reflected across the entire page in real-time. While applying the profile theme being edited directly may provide a more immediate impression of its appearance on various elements of Zimo Web, continuously updating the theme in real-time can strain device performance. For less powerful devices, constantly applying every minor change across the website may become overwhelming. Therefore, unless you are using a high-performance device, it is not recommended to use this preview feature.

The expand button controls whether the Theme Maker window is expanded or not. By default, the Theme Maker window does not occupy the full screen for aesthetic and comfort reasons. However, if the user desires more screen real estate, toggling to full screen mode can significantly increase the window’s size and width. Similar to the sidebar button, the expand button does not appear on narrower screens, as the Theme Maker already occupies the full available space in such cases.

The duplicate button duplicates the currently selected profile. All configurations of the current profile will be precisely copied to the new profile, and the duplicated profile will appear immediately next to the original. Duplicated profiles also contribute to the maximum limit of 16 profiles.

The falling stars button creates a new profile with a random yet consistent color scheme applied throughout the elements. The generated theme will appear immediately next to the selected one, and it is subject to the 16-profile limit.

The command key button allows the user to import theme configurations from built-in presets. When clicked, it opens a window where the user can select a preset theme to import as a configuration, provided that the 16-profile limit has not been reached.

The photo button, when clicked, will open a selector window where users can choose a valid image in jpeg, png, or webp format. Once selected, the image will be temporarily uploaded and analyzed to identify the dominant color present. This dominant color will then be used to generate an entire theme profile for the Theme Editor. It’s important to note that the image being analyzed must be less than 4 megabytes in size, and the limit of 16 profiles also applies.

The export button allows users to export the current profile as a .json file. This file contains all the data that represents a theme profile and can be edited manually if desired. However, it’s important to note that manual editing is risky and not recommended, as any mistake could render the profile data file invalid. The primary purpose of exporting profiles is to preserve the profile data without relying on Zimo Web’s built-in account sync, or to share the file with others.

Normally, the exported theme profile preserves all the information of the profile that can be edited by the Theme Maker. This includes those data that are not used to render the actual theme. Examples of these ‘hidden’ data include the configuration for a radial gradient when the layer on which the configuration applies uses linear gradient. Clicking the export button whilst the shift key is pressed will result in an export than trims these hidden data, making the profile configuration file more optimized at the cost of losing these potentially useful information for editing in the Theme Maker. Alternatively, turning on the optimize profile export setting will also make every export optimized.

The import button complements the export button by allowing users to import a selected theme onto their device. Zimo Web automatically applies a check to ensure that the data of the theme profile is valid before applying it. Once successfully imported, the new profile will appear immediately next to the currently selected profile and will be subject to the limit of 16 profiles.

Accent Color

The accent color panel governs the fundamental colors that shape Zimo Web’s appearance. These colors determine text colors, border lines, icon colors, and more. There are four types of such colors: primary, secondary, neutral, and contrast. Additionally, the panel allows for editing of the browser’s theme color, which may be reflected in some browsers that support it.

The panel consists of three parts: the accent color category selector, the color editor, and a toolbar.

Category Selector

The selector contains five buttons representing the five categories supported by the accent color panel. Each button displays a circle with the color it represents, serving as a quick reference for how the color will look without the need for further lookup. Clicking on one of the five buttons sets the category being edited to the one clicked. This is indicated by the circle rolling from the leftmost to the rightmost of the button, and the button itself being filled with a different color.

The five categories correspond to different purposes within the theme customization. The primary category is typically used for most text colors and button symbols. The secondary category is utilized for secondary text and borders in certain contexts. The neutral category is featured in specific widgets for more variations. The contrast category is occasionally used as a background color in contrast to texts using the primary or secondary category color. Lastly, the browser category is used to set the theme color of a browser that supports it.

Color Editor

The color editor panel is where colors are inputted. By default, it’s a palette picker, where the central area controls the saturation and value, and the bottom bar adjusts the hue. Two additional editors are available: the shade picker and the color code input panel. The shade picker automatically generates a series of colors in decreasing brightness based on the current color’s hue, allowing users to select each shade individually. The code input panel enables the direct input of color codes, available in Hex, RGB, CMYK, and HSV formats.

Toolbar

The toolbar on the right of the color editor features a few buttons that assist in picking and editing colors.

The button at the top is the magic wand button. Clicking this button will take the color of the currently chosen category and intelligently compute a gradient that applies to the other four categories as well. The brightness and saturation are adapted for a natural look according to each category. This button can serve as a quick solution that often produces a favorable color combination, although users may want to adjust the color afterward for customization needs.

The random button, as its appearance suggests, sets the current category’s color to a random color with any hue, saturation, and value. This button can work well with the magic wand button for brainstorming new ideas: users can randomize a color and apply it to all other categories to quickly see the end result.

Separated by a horizontal line, below are three buttons that correspond to the three modes of the color editor: palette, shade, and code. The palette button switches the color editor to palette mode, the shade button to shade mode, and the code button to code mode. When the corresponding color editor mode is active, the button will have a subtle backlight to indicate its status.

Widget & Backdrop

To accommodate more complex aesthetic requirements, the appearance of Zimo Web is not solely defined by the five categories of plain color. For the backdrop of a page and most widgets (areas that contain text other than those floating directly above the page), more complex gradients are utilized. These gradients consist of multiple layers, multiple types, and multiple color stops to achieve the desired visual effect.

Category Selector

Similar to the accent color panel, a category selector is present on the top left (or topmost if space is narrower) to determine which category the gradient editor will affect. There are three categories: widget, backdrop, and backdrop minimal. Each category is represented by a tile, and to select a category, simply click on that tile. Upon selection, the tile will become filled.

The widget category is used for the background of most widgets. The backdrop category specifically affects the backdrop of the entire page and very rarely certain widgets that are directly related to or represent the page background itself. The backdrop minimal category replaces the backdrop category for the page backdrop if the background richness setting is set to minimal. This is recommended as it provides a simpler image compared to the more elaborate backdrop that might otherwise be employed. However, users can opt out and set this category to empty, in which case the backdrop category will apply instead.

Layers Editor

Editing a gradient is a complex process, divided into multiple levels. The first level comprises layers, which are managed by the layer editor. The layer editor features a toolbar at the top containing several utility buttons. Below the toolbar, the layers are listed, with each layer represented by a rectangular box, known as layer card, displaying a preview of that layer, the type of layer, and a few buttons that operate on each individual layer.

Toolbar

The layers editor has its own toolbar with buttons related to manipulating the layers as a whole.

From right to left, the plus sign in a circle button adds a new layer next to the currently selected layer. The new layer has a randomly generated type of gradient and a randomized color, but users can always edit this randomized layer further.

The duplicate button creates a duplicate of the currently selected layer and place the duplicated layer right next to the selected layer. All configurations under the selected layer are copied to the duplicated layer.

The copy and paste buttons function together as a clipboard. When the copy button is clicked, it stores the current selected layer and all its information into the clipboard. The clipboard can only store one layer at a time, so copying another layer will replace the previous information on the clipboard.

Initially, the paste button is grayed out and unclickable, indicating that nothing is on the clipboard. To paste the layer from the clipboard, click the paste button, and the layer stored on the clipboard will appear right next to the currently selected layer. Pasting a layer will not clear the clipboard, meaning that a copied layer stored on the clipboard can be pasted multiple times.

It’s important to note that the clipboard preserves information across the widget and backdrop categories, as well as between profiles. This allows for quick copying of a layer from one profile and pasting it into another profile. However, the clipboard is not preserved across sessions, meaning that refreshing or leaving the Theme Editor page will clear the clipboard.

When the backdrop minimal category is selected, an additional recycle button will appear. This button empties all the layer configurations for this category, and a text saying ‘Reusing the layers of backdrop’ will show up, indicating that the backdrop category will work in place of this category. All the tools in the widget & backdrop editor become unavailable. To add back layers, use the plus sign in a circle button or the paste button (if the clipboard has stored a layer), and the backdrop minimal category will use its own configuration again.

Layer Card

Layer cards are rectangular boxes that represent a layer. Each layer stores information about one type of gradient, including its configurations and multiple color stops. Click on a layer card to select the layer. This action will update the layer editors with its information, and the selected layer will be the one edited.

On the leftmost side of the card is a square that contains a preview of the current layer. Transparent layers are indicated by a checker pattern. Next to it, in wider spaces, is the name of the layer’s type of gradient.

On the right side of the card are a series of buttons. The cross button deletes the layer it is on. However, at least one layer must be present for each category. When there’s only one layer remaining, attempting to use the cross button will result in the layer becoming a transparent placeholder layer to indicate that nothing will render. However, this placeholder layer is still considered a layer and is editable.

Next, the visible button indicates that the current layer is visible, meaning that it will appear in the actual rendering. Clicking on the button will toggle it to invisible, indicating that the layer is hidden from being rendered. However, it remains present in the editor, can be edited, and its preview in the layer card functions as normal. Clicking the invisible button again reverts it back to visible.

When multiple layers are present, the arrow button appears, allowing the order of the layers to be adjusted. The closer a layer is to the top, the higher it is placed in the rendering, similar to layer ordering in Photoshop.

Gradient Type and Properties Editor

The gradient type and properties editor features two subsections: one for selecting the gradient type and the other for specifying the properties of that type. Web technology enables multiple forms of gradients to be rendered. Three major types – linear, radial, and conic – offer unique appearances that combine to create complex and beautiful gradients.

Type Selector

At the top of the editor is the type selector, indicated by the ellipsis in a circle icon at the end. Clicking on the selector will open a dropdown menu containing six different gradient types: linear, radial, conic, and their respective repeating variants. Each layer may have only one type of gradient present.

Properties Editor

Each type of gradient comes with its unique properties. The properties determine how the gradient is placed on the frame in addition to its colors.

Linear gradient editing can be done in two ways. The user can either edit the angle of the gradient, which controls its rotation, or adjust the orientation, which aligns the gradient to point toward the four corners of the window where it is displayed. You can switch between these two modes by clicking a button in the top-right corner of the editor. When editing the angle, a circular slider appears with a number input box in the center. The user can drag the slider to change the angle or manually enter a value in the input box for greater precision. When editing the orientation, an arrow indicates the current direction. The user can modify the orientation by either clicking the panel with the arrow or using the dropdown menu just below the panel.

Radial gradients are divided into two modes: ellipse mode and circle mode. In ellipse mode, the shape of the radial gradient depends on the aspect ratio of the widget or window it is applied to, often resulting in an elliptical shape. In circle mode, the gradient shape is always a circle, regardless of the container’s shape.

In the editor, a diagram previewing the radial gradient is provided. At the top right of this diagram, there is an oval-shaped button that allows switching between the two modes. Below this button is a smaller diagram that shows the same content as the larger diagram but with a different aspect ratio. Below the diagrams, there are input boxes for specifying the position and size of the radial gradient. The position inputs take two arguments, representing the center of the gradient on the panel. The size input depends on the mode:

• In ellipse mode, the size takes two arguments, representing the distance between the 100% stop position and the 0 stop position along the major and minor axes of the ellipse.
• In circle mode, the size is defined by one of four keywords: farthest corner, farthest side, closest corner, and closest side. These keywords, as their meaning suggest, determine how the radius of the circle is calculated.

Due to the limitations of the radial gradient specification, the size of the circle cannot be freely adjusted. For further manipulation of the circle’s size, consider using the extended gradient stops.

Conic gradients operate the gradient similar to the hands of clocks, where colors sweep over a circular area while changing according to the gradient. It takes two position arguments, similar to the ones found in radial gradients, that determine the center of the ‘clockface.’ Additionally, one more argument, the starting angle, determines the angle where the hand ‘begins to sweep.’ A circular slider is available for adjusting this angle.

Each of the three types of gradients has a repeating variant. These variants have the same arguments and interface in the editor, but they function slightly differently. In summary, they repeat the gradient pattern based on the distance between the last stop and the first stop, and the size argument in radial gradients. For a more detailed explanation, a dedicated page on the MDN Web Docs explains gradients on the web well.

Gradient Stops Editor

A stop in a gradient is the collection of a position and a color data that determines the look of the gradient. For each layer, multiple stops may exist. The gradient stops editor allows the creation and editing of these stops. The editor features a stops bar that manages the position of each stop and a color editor that controls the color of a specific stop.

Stops Bar

The stops bar is in charge of the overall management of stops and the positional argument of every stop. Besides the bar itself, there are a few utility buttons that assist in the editing.

The bar itself displays colors determined by the positions of the pins. Each pin represents a stop, with its horizontal position relative to the bar determining the stop’s position on the gradient. To change the position, drag the pin to the desired location. Additionally, a numerical input box labeled ‘At’ is available on the top left of the area, allowing for more precise input. This input box corresponds to the specific pin that is selected.

A pin is selected upon clicking or starting to drag it, indicated by a unique dot in the center that is not seen on any other pins. The color of the pin is the color of the stop it represents.

A series of buttons assist in the overall editing of pins. First on the buttons is the reverse button, which, upon click, reverses the placement of all pins and their respective stop’s position. Numerically, this is equivalent to having every pin’s position subtracted by 100.

The duplicate button replicates the selected pin, creating a duplicate next to it. Newly created pins inherit the color and are automatically selected.

With more than two pins, a cross button appears. Clicking the button will delete the currently selected pin.

To add a pin, duplicate or click on the stops bar. Newly created pins inherit color from the previously selected pin and are automatically selected.

To add a new pin, you can either use the duplicate button to duplicate an existing pin, or simply click anywhere on the stops bar to create a pin at that location. The newly created pin will inherit the color (but not the position) of the pin selected before the click. Additionally, the newly created pin is automatically selected.

There are three ways to delete a pin, but note that all of them require at least three pins to be present at the time, as a minimum of two pins are required to be visible. The three ways are as follows:

1. Right-click on a pin: This instantly deletes the pin.
2. Use the cross button: This deletes the currently selected pin.
3. Drag the pin far below the stops bar until it starts shaking, then release: This action deletes the pin.

If the allow extended gradient setting is turned on, the range of the gradient stops can be expanded from 0-100 to -300-400. Initially, the stops bar will not show any changes. To use the extended range, the user needs to manually move a pin beyond the original 0-100 range. The stops bar will automatically expand to fit the pin, increasing in steps of 50. For example, if the rightmost pin is positioned at 110, the bar’s range extends to 150. The same logic applies in the left direction. The bar will retract to the standard 0-100 range if no pins are beyond this range.

In the extended scope, most functionalities will adapt to the new range. However, the reverse button has two behaviors. When clicked normally, the reversal is centered around the midpoint of the entire range, applying a ‘subtract 100’ formula. If the reverse button is clicked while holding the Shift key, the reversal occurs within the current stops bar range. For instance, if the stops bar range is -50-200, a pin at 197 will be moved to -47 if the reverse button is shift-clicked.

The extended range of the gradient stops is generally unnecessary, as equivalent effects can usually be achieved through color manipulation within the standard range. One exception is the circle mode of the radial gradient, where size is limited by four fixed values, requiring gradient stops for further size modifications. If this specific need is absent, it is advisable to keep the extended range functionality turned off to avoid complicating the editing process.

Color Interpolation Method Editor (Experimental)

In early 2023, the color interpolation method for CSS gradients became widely available in mainstream browsers. This feature allows colors between gradient stops to be blended in a desired manner. However, it remains inconsistent and experimental across different browsers. Typically, this can be achieved using more detailed gradient stops instead of changing the interpolation method. Therefore, it is strongly advised not to use this feature in production or beyond experimental purposes.

This section is hidden by default. To enable it, turn on the enable color tnterpolation method setting. Once enabled, this editor will appear either on the right or just below the stops bar section, depending on available space. The editor consists of two dropdown selectors. The first one, titled ‘Color space,’ determines the color space for the interpolation. ‘Default’ means that the color interpolation feature is not utilized, and the gradient will behave like any other gradient not using this feature. In addition to the default, there are several rectangular and polar color spaces. If a polar color space is chosen, the second dropdown selector, titled ‘Hue interpolation,’ becomes available. Four modes can be selected to determine how the polar color space interpolation will behave. For more information about color spaces and interpolation, check the documentation on the web technology that powers this editor section.

Color Editor

A color editor, similar to the one featured in the accent color section, is used to adjust the color of an individual gradient stop. However, there are differences:

For the palette editor, an additional bar below the hue bar allows adjustment of the opacity (alpha channel) of the color. The shade editor remains the same and cannot edit the opacity of a color. Selecting a different shade will not change the opacity either.

In the code editor, the supported formats are now Hex, RGBA, HSVA, and HSLA. Hexadecimal format uses eight digits, where the last two represent the opacity on a 256th scale.

In the toolbar, the magic wand button does not exist. The random button additionally randomizes the opacity of the color, setting it anywhere between completely transparent and completely opaque. The three buttons determining the color editor mode work as expected.

If the widget category is selected, an additional widget button will appear at the end of the toolbar. This button determines whether the gradient will adapt to an opacity control built into the widget option. As you may have noticed, while many areas on Zimo Web utilize the widget background, they appear with varying levels of opacity. However, themes like Autumnal feature widgets that are always opaque. This is achieved by opting out of the adaptive opacity provided by the widget setting itself. For the widget button, it being grayed out indicates that adaptive opacity is not in use, while it being backlit indicates that adaptive widget opacity is in use. It’s recommended to enable this option, as it would provide a better experience for users of Zimo Web. When widget opacity is turned on, the alpha channel of the color of the stop will also behave differently. In this scenario, the final opacity displayed on a widget is determined by multiplying the adaptive opacity of that widget by the alpha channel value. For example, a widget might have a $0.5$ adaptive opacity, and a stop opts into the adaptive opacity and has an alpha value of $0.5$. Then the final opacity would be $0.5 * 0.5 = 0.25$. The setting of the alpha channel enables multiple layers that all use widget adaptive opacity to stack on top of each other and utilize transparency when necessary.

Favicon

Part of Zimo Web’s identity is characterized by its iconic favicon. The favicon shape, resembling three circles, serves as an icon throughout the entire website. Consequently, the favicon has its own section dedicated to editing its interior color. Additionally, the favicon comes in several different modes that control its rendering.

Favicon Preview

A square-shaped container displaying the favicon is located on the top left (or the topmost if space is limited) of the section. It provides a direct preview of the currently edited favicon, allowing users to see how it will appear.

Favicon Outline Editor

Below the favicon preview container, there is a row of colored circles representing the available choices for the favicon outline. There are eight options. The first five options correspond to the five accent color categories, linking the favicon outline to one of these colors. The last option allows for full customization of the favicon color. When selected, a color selector panel appears below, enabling the user to freely choose an outline color.

Favicon Mode and Properties Editor

The favicon can be rendered in four modes, selected via a dropdown menu similar to the one used for selecting gradient types. Specific configurations may apply for certain modes, and if no configuration is required, a text will indicate the status.

The backdrop mode renders the favicon based on the backdrop configuration from the previous section. No further configurations are necessary, as it utilizes the rendering of the backdrop for the favicon. Some preset themes, like Cherry, use this mode, which is suitable for simpler backdrop patterns.

A toggle titled ‘Prefer SVG rendering if possible’ is available in the configurations section under the backdrop mode. If the visible layers of the backdrop configuration consist solely of linear gradients and/or radial gradients (not their repeating variants), Zimo Web will attempt to utilize SVG instead of CSS gradients to render the favicon for better performance and versatility. Due to the internal differences between these two methods, the outcome (especially when dealing with the alpha channel) might vary slightly. Turning off the toggle will opt out of this optimization step and use solely CSS gradients for better consistency. Note that if the visible layers consist of gradient types not listed above, the optimization behavior will not apply regardless of the toggle.

The separate gradient mode applies color gradients separately to the three circles seen on a favicon. The majority of preset themes on Zimo Web use this mode to define the favicon’s appearance. A toggle titled ‘Apply for all’ is available on the configurations page, which allows the three circles to use the same gradient configuration; however, they are still rendered separately. If the toggle is switched off, each specific portion of the favicon can be individually configured further.

The overall gradient mode works similarly to the separate gradient mode, but the gradient is applied to the circular shape of the favicon as a whole, rather than individually to each part. No further configuration is required in this case.

The outline mode removes the interior filling of the favicon, leaving only the outline. The outline color is always the primary color in the accent color section, regardless of the mode used by the favicon.

Favicon Gradient Editor

If either of the two gradient modes is chosen, a gradient editor will appear below the mode and properties editor. This gradient editor functions similarly to a linear gradient in the widget & backdrop section, featuring a circular slider, numerical input for angle, a stops bar, and a color editor for individual stops. However, the color editor does not support the alpha channel, and it does not contain the magic wand button. The color interpolation method feature is also not present in the favicon gradient editor. The allow extended gradient setting has no effect on the stops bar of the favicon gradient section; the range of the said stops bar is always locked at 0-100.

Miscellaneous

The final section of the Theme Maker includes a couple of less crucial configurations for a profile theme. Currently, there are two available configurations: article blur and animated background.

Article blur adjusts the intensity of the blur in the background on certain pages, such as a blog article. The default value is 24, and setting it to 0 disables the blur entirely.

The animated background setting determines whether a specific animated background is applied to the page. These backgrounds are used in most preset themes to provide distinctive animations. Each animated background is represented by a tile, and selecting a tile applies the corresponding effect. The tile with a no sign icon indicates that no animated background is selected, and it is the default option. These animated backgrounds also respond to the background richness setting. Many of them exhibit slight changes when the setting is reduced, and they completely disappear when set to minimal. It’s important to note that each animated background is tailored to the needs of its original theme, meaning that colors and effects do not adapt to the profile’s configuration. Therefore, it’s advisable to apply animated backgrounds only when the theme of the background closely aligns with the profile’s theme.

Technical

The Theme Editor, along with its profiles and configurations, utilizes Zimo Web’s settings framework. By default, they are synced with the user’s account if one is present. The Reset Settings to Default button in the menu does not reset theme profile configurations. To reset all the profiles and restore the template profiles, use the Reset Theme Maker Profiles button. Users also have the option to manually export and import profile data using the export and import buttons for more flexible preservation.

As mentioned earlier, direct editing of the config’s JSON data is discouraged, as any mistakes could render the file invalid. However, if the data structure is fully understood, directly editing the JSON data might offer some advantages, such as accessing customized options that the Theme Maker’s interface does not support. Proceed with caution.