Skip to main content

Themes

Nongine's theme system controls the visual appearance of your visual novel's player interface. A theme defines how the textbox, character name label, dialog text, choice buttons, and other UI elements look and behave. You can customize themes visually through Design Mode, or directly by editing the ThemeConfig object in the project settings.

ThemeConfig Properties​

The ThemeConfig is a structured object that holds all theme settings for your project. It is organized into sections: textbox, nameLabel, typography, choices, viewport, and effects. Each section contains properties that map directly to the visual elements you see in Design Mode. You can view and edit the raw ThemeConfig from the project settings under the "Theme" tab by clicking "Edit as JSON."

The textbox section includes properties for backgroundColor, opacity, borderRadius, padding, margin, shadow, position (bottom, center, or float), width, height, and backgroundImage. The nameLabel section includes fontFamily, fontSize, color, backgroundColor, padding, and position. These properties accept standard CSS values.

Textbox Customization​

The textbox is the most prominent UI element in a visual novel and the one most commonly customized. Through the ThemeConfig or Design Mode, you can control every aspect of its appearance. A typical customization workflow starts with choosing a position: "bottom" for a traditional visual novel layout, "center" for an ADV-style centered box, or "float" for a bubble that appears near the speaking character.

Background options range from a simple semi-transparent color (such as rgba(0, 0, 0, 0.75)) to a fully custom frame image. If you use a background image, the borderRadius and shadow properties are typically set to zero, since the image provides its own visual framing. The padding property controls the space between the textbox edge and the dialog text, and should be generous enough for comfortable reading.

Typography​

The typography section of the ThemeConfig controls how text appears inside the textbox. It has sub-sections for dialog and narration, each with fontFamily, fontSize, lineHeight, letterSpacing, color, and textShadow properties. By default, dialog and narration share the same typography settings, but you can differentiate them to give narration a distinct feel, such as using an italic serif font for narration while keeping dialog in a standard sans-serif.

Font selection is important for readability. Nongine includes a library of web-safe fonts and Google Fonts that you can select from a dropdown. For custom fonts, you can upload a font file (TTF or WOFF2) through the Asset Manager and reference it by name in the ThemeConfig. The recommended base font size for dialog is 18-22 pixels on desktop, with a line height of 1.5 to 1.7 for comfortable reading.

Presets​

Nongine ships with several built-in theme presets that provide complete, polished configurations. Applying a preset overwrites all ThemeConfig properties with the preset's values. Available presets include "Classic VN" with a dark semi-transparent bottom bar and a clean sans-serif font, "Modern Light" with a white card-style textbox and soft shadows, "Retro Pixel" with a pixelated border frame and monospace font, and "Cinematic" with a minimal transparent gradient overlay designed for widescreen presentations.

Presets are a good starting point. After applying a preset, you can fine-tune individual properties to match your project's art style. You can also save your current theme configuration as a custom preset by clicking "Save as Preset" in Design Mode. Custom presets are stored in your account and can be applied to other projects.

Custom CSS​

For advanced styling needs that go beyond the ThemeConfig properties, Nongine supports a custom CSS field. You can add arbitrary CSS rules that are injected into the player at runtime. This allows you to target specific elements with selectors, add custom animations, import external stylesheets, or override any default style.

The custom CSS field is accessible from the project settings under the "Theme" tab. Common uses include adding hover animations to choice buttons, styling the save/load menu, customizing the scrollbar appearance in the backlog panel, and applying CSS filters to the background image. Use custom CSS judiciously, as it can interfere with the built-in responsive behavior if applied carelessly. All custom CSS is included in both web-published and HTML-exported versions of your project.