Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ryzhpolsos/redeye/llms.txt

Use this file to discover all available pages before exploring further.

This guide takes you from a fresh RedEye installation to a working custom layout. You will learn how config.xml is structured, how variables and theme values are used throughout the layout, how a shell window like the taskbar is defined, and how to apply your changes. All code examples are drawn directly from the default configuration that ships with RedEye.

​
Understanding the config.xml structure

RedEye reads a single entry-point file, config.xml, when it starts. This file lives in your RedEye installation directory. It is composed of three top-level sections: imports, a <layout> block, and an optional <hotkeys> block (referenced via import). 
<?xml version="1.0" encoding="UTF-8"?>
<config>
    <!-- Import core settings -->
    <import from="config/core.xml"/>
    <import from="config/ui/theme.xml"/>

    <layout>
        <!-- Variables, eval calls, style imports, and windows go here -->
    </layout>

    <import from="config/keyBindings.xml"/>
</config>
The <import> element lets you split configuration across multiple files, which keeps large setups manageable. Imports are resolved relative to the installation directory.

​
Walking through the default configuration

1

Review core settings

config/core.xml controls low-level shell behavior. The default configuration enables Explorer integration (for application compatibility) and sets the transparency key used by the UI renderer:
<core>
    <explorerIntegration>
        <enable>true</enable>
        <timeout>2000</timeout>
    </explorerIntegration>
    <windowManager>
        <enable>false</enable>
    </windowManager>
    <ui>
        <transparencyKey>#ff00ff</transparencyKey>
    </ui>
</core>
Leave explorerIntegration enabled unless you are certain all your applications work without it.
2

Define theme variables

config/ui/theme.xml declares named variables for colors, fonts, and spacing. These variables are referenced throughout every layout file using the ${variable.name} syntax.
<variables id="themevars">
    <set name="theme.color.background"       value="#13293d"/>
    <set name="theme.color.backgroundChild"  value="#2a628f"/>
    <set name="theme.color.backgroundActive" value="#3e92cc"/>
    <set name="theme.font.main"              value="Segoe UI,10"/>
    <set name="theme.font.color"             value="#ffffff"/>
    <set name="theme.paddingLarge"           value="16"/>
    <set name="theme.paddingMiddle"          value="8"/>
    <set name="theme.paddingSmall"           value="4"/>
</variables>
To change your entire color scheme, edit these six lines. Every widget and window that references ${theme.color.*} updates automatically.
3

Declare layout variables

The <variables> block inside <layout> in config.xml defines sizing and positioning values. Variables can reference other variables and use calc() for arithmetic expressions:
<variables>
    <!-- Taskbar item size in pixels -->
    <set name="taskbar.item.size" value="50"/>

    <!-- Margin around the taskbar -->
    <set name="taskbar.margin" value="20"/>

    <!-- Width calculated from screen width minus margins on both sides -->
    <set name="taskbar.width"
         value="calc('${screen.width} - ${taskbar.margin} * 2')"/>

    <!-- Height derived from item size plus vertical padding -->
    <set name="taskbar.height"
         value="calc('${taskbar.item.size} + ${theme.paddingMiddle} * 2')"/>

    <!-- Work area starts below the taskbar -->
    <set name="workArea.y"
         value="calc('${taskbar.height} + ${taskbar.margin} * 2')"/>
</variables>
Built-in read-only variables like ${screen.width} and ${screen.height} give you the current display dimensions.
4

Examine a shell window definition

A <window> element with type="shell" creates a shell-managed window — one that sits on the desktop layer and does not appear in the task switcher. Here is the taskbar from config/ui/taskbar.xml:
<window
    id="taskbar"
    x="${taskbar.margin}"
    y="${taskbar.margin}"
    width="${taskbar.width}"
    height="${taskbar.height}"
    type="shell"
    border="none"
    allowClose="false"
    backgroundColor="${theme.color.background}">

    <!-- Start button imported from a separate file -->
    <import from="config/ui/startButton.xml"/>

    <!-- Window list widget showing open application windows -->
    <windowList
        x="${taskbar.item.size}"
        y="0"
        width="calc('${taskbar.width} - ${taskbar.tray.width} - ${taskbar.item.size}')"
        height="${taskbar.height}">

        <!-- Template for each item in the window list -->
        <panel
            width="${taskbar.item.size}"
            height="${taskbar.item.size}"
            margin="${theme.paddingMiddle},${theme.paddingMiddle},0,${theme.paddingMiddle}"
            backgroundColor="if(${window.isActive}, ${theme.color.backgroundActive}, ${theme.color.backgroundChild})">

            <image
                id="icon"
                src="${window.icon}"
                dock="fill"
                onClick="wapi.toggleWindow(${window.handle})"
                toolTip="${window.title}"/>

            <contextMenu for="icon">
                <item action="wapi.closeWindow(${window.handle})">Close window</item>
            </contextMenu>
        </panel>
    </windowList>
</window>
Inside a <windowList>, the variables ${window.icon}, ${window.title}, ${window.handle}, and ${window.isActive} are automatically populated for each open window.
5

Configure hotkeys

Hotkeys are declared in config/keyBindings.xml. Each <hotkey> maps a key combination to a shell function call or expression:
<hotkeys>
    <!-- Toggle the start menu window -->
    <hotkey keys="Win"   action="window.toggle(startMenu)"/>

    <!-- Open the PowerSearch launcher -->
    <hotkey keys="Win+R" action="powerSearch.open()"/>

    <!-- Launch applications -->
    <hotkey keys="Win+T" action="shellExecute('cmd.exe')"/>
    <hotkey keys="Win+B" action="shellExecute('http:')"/>
</hotkeys>
The window.toggle() function references a window by its id attribute. To toggle your own window, give it a unique id and use the same pattern.
6

Apply your changes

After editing any configuration file, restart the RedEye shell to pick up the changes. From any script block or hotkey action, call:
<hotkey keys="Win+Shift+R" action="shell.restart()"/>
Or call the function from within an inline script:
shell.restart();
shell.restart() terminates and relaunches redeye.exe. Your configuration files are re-read on startup, so changes take effect immediately after the restart completes.

​
What to explore next

Layout markup reference

Full reference for XML elements, attributes, widget nesting rules, and the expression syntax used in attribute values.

Built-in widgets

Documentation for every widget that ships with RedEye: panel, flowPanel, windowList, appList, label, image, button, and more.

Configuration variables

Learn how variables and calc() expressions work, including the built-in read-only variables like ${screen.width}.

Creating a plugin

Package custom widgets and exported functions into a plugin DLL that loads automatically with your shell.

Build docs developers (and LLMs) love

Get started for freeTalk to us