Appearance

Modern UI

An optional CSS-based visual layer for existing Redmine pages. It changes presentation, not permissions, workflows, or business behavior.

What administrators can control

  • Master switch, disabled by default
  • Comfortable or compact density
  • Modern, blue, neutral, or dark-header presets
  • Separate modules for layout, navigation, issues, forms, filters, projects, wiki, repositories, login, and administration

Enable Modern UI safely

  1. Open Administration → Plugins → Redmine UX Toolkit → Configure → Appearance.
  2. Enable the Modern UI master switch, select a density and color preset, and initially enable only the visual modules you intend to test.
  3. Choose Apply. The unsaved-change indicator must disappear before you leave the page.
  4. Check an issue list, issue details, a form, a project page, and the login page at desktop and mobile widths.
  5. Enable further modules in small groups. Each module changes presentation only; Redmine data, queries, workflows, and permissions remain unchanged.

What users should expect

The selected preset and density apply site-wide. Responsive styling becomes active at Redmine's phone and tablet breakpoint through 899 pixels; users keep Redmine's native mobile flyout and normal form behavior.

Responsive behavior

Phone and tablet styling covers Redmine's responsive range through 899 pixels. It keeps the native flyout navigation while improving contrast, spacing, cards, forms, and preview overlays.

Theme conflicts: disable the affected Modern UI module first, then test the page again.

If a page looks wrong

  1. Identify the affected area, such as forms, issue details, or project navigation.
  2. Disable only the matching visual module and apply the settings.
  3. Reload the page and test again. If the problem disappears, review the active Redmine theme and any global Custom CSS before re-enabling the module.
Desktop Redmine login page with Modern UI enabled
DesktopModern UI login treatment on desktop.
Responsive Redmine login page with Modern UI enabled
MobileModern UI login treatment on a mobile viewport.

Visual modules

Modern UI settings with visual module switches
DesktopAdministrators can enable visual areas independently.