Theme Manager

AGR's look is controlled by themes, and you can switch between them, edit them, or build your own. A theme is a single CSS file that colors and fonts the whole app. This page covers switching themes, the Style Editor, and how to make your own.

Built-in and User Themes

AGR ships with two built-in themes, dark and light. They live inside the app and are read-only, so they always work as a clean starting point.

Your own themes are plain .css files in ~/.agr/themes/. Any file you put there shows up in AGR by its file name (without the .css), alongside the built-ins.

Switching Themes

The quickest way to change the look is the Theme dropdown in the top bar. Pick a theme and the whole app - including the documentation browser - recolors at once. Your choice is remembered for next time.

The Style Editor

For managing themes, open Help > Style Editor. It lists every theme, the read-only built-ins first, then your own. From here you can:

Apply a theme to the running app.
Duplicate a theme. This copies it into ~/.agr/themes/ as an editable copy - the way to start a new theme from an existing one.
Import a .css file as a theme.
Export a theme to a file, to share it or back it up.
Delete one of your own themes.
Open in Editor opens the selected user theme in your system text editor.
Reveal in Folder opens ~/.agr/themes/ in your file manager.

Making Your Own Theme

The easiest path is to start from a built-in and edit the copy:

In the Style Editor, select dark or light and click Duplicate. Give the copy a name. It is written to ~/.agr/themes/.
Select your new theme and click Apply, then Open in Editor.
Edit the file and save. AGR watches your theme files and re-applies your changes the moment you save - keep AGR and your editor side by side and tweak colors live.

Built-in themes do not live-reload because they are read-only; that is why you duplicate one first.

Keep the dark and light versions of an idea in sync: if you add a rule for a new surface, add it to both so the app looks right either way.

Theme Variables

The fastest way to recolor everything is the .root block at the top of a theme. Most controls derive their colors from these variables, so a small change here recolors the whole app.

Variable	What it drives
`-fx-base`	The base color controls are shaded from.
`-fx-background`	The window and background base color.
`-fx-control-inner-background`	The inner fill of text controls and lists.
`-fx-accent`	The selection and accent color.
`-fx-focus-color`	The focus ring color.
`-fx-text-fill`	The default text color.
`-fx-font-family`	The default (chrome) font family.
`-fx-font-size`	The default font size.

The doc browser reads these same colors, which is how it follows your theme.

Styling One Surface at a Time

Each part of the window has its own style class, so you can change one surface without touching the others. The main ones:

Class	Surface
`.agr-window`, `.agr-titlebar`	The window frame and its title bar.
`.agr-menu-bar`	The top menu bar.
`.agr-top-bar`, `.agr-title`	The slim bar with the workspace label, theme dropdown, and Run.
`.agr-workspace`	The folder name in the top bar. Dim it - it is orientation, not a control.
`.agr-tabs`	The tab strips over the code and output panes.
`.split-pane`	The dividers between the panes.
`.button`, `.button.agr-run`	Push buttons; `agr-run` is the accented primary button.
`.combo-box`	The theme dropdown.
`.agr-fxgl-host`	The graphics pane background on the left.
`.agr-code-editor`	The code editor.
`.agr-transcript`	The output transcript (Log tab).
`.agr-history`	The history list (History tab).
`.agr-completion`	The autocomplete popup.

The code and output panes also have finer classes for specific parts - the caret, the selection, the line-number gutter, and the syntax colors the language server highlights. See the full style guide for the complete catalog.

Content Colors

Two sets of classes color content rather than chrome.

The transcript colors each kind of line under .output-area .text:

Class	Meaning
`.out-echo`	The echoed source of a submission.
`.out-value`	A result value.
`.out-error`	An evaluation exception.
`.out-log`, `.out-info`, `.out-warn`, `.out-err`	Engine log, info, warning, and error output.
`.out-print`	Your own `print` output.

The code editor colors syntax under .code-area .text:

Class	Token
`.tok-keyword`	Keywords.
`.tok-string`	Strings.
`.tok-comment`	Comments.
`.tok-number`	Numbers.
`.tok-type`	Type names.