Skip to content

roundcube-skin-classic-lightdark

A fork of Roundcube's legacy classic skin with light, dark, and auto color mode support, while preserving the original Classic layout and assets.

PHP/HTML/CSS · CC BY-SA 3.0 · GitHub

Why

Roundcube's Classic skin predates dark mode entirely, and most modern alternatives replace its layout to get one. This fork keeps the Classic skin exactly as it is -- same templates, same widescreen/desktop/list layouts -- and adds a dark stylesheet plus the plumbing to switch between light, dark, and system-driven auto modes without touching the rest of the interface.

Features

  • Light, dark, and auto color modes, with system color-scheme detection driving auto.
  • A dedicated dark stylesheet (dark.css) layered on top of the unmodified Classic assets.
  • All standard Roundcube mail layouts supported: widescreen (left/right split), desktop (top/bottom split), and list (list only, no preview pane).
  • Declares dark_mode_support in meta.json, so the generic color_mode plugin can offer this skin as a target for user-selectable preferences.

Installation

Composer

composer require hackagadget/roundcube-skin-classic-lightdark

The roundcube/plugin-installer Composer plugin installs the skin automatically into skins/classic_lightdark/.

Manual

Copy the repository into your Roundcube skins/ directory as classic_lightdark:

roundcube/
  skins/
    classic_lightdark/
      meta.json
      common.css
      dark.css
      templates/
      includes/
      images/

Then select the skin in Roundcube's settings, or set it as the default:

$config['skin'] = 'classic_lightdark';

Color mode

The skin advertises dark mode support in meta.json:

{
  "config": {
    "dark_mode_support": true
  }
}

That flag alone only tells Roundcube the skin can do dark mode -- to give users a light / dark / auto preference, install and enable the companion color_mode plugin:

$config['plugins'][] = 'color_mode';

The plugin stores the preference and this skin reads it, applying a light-mode or dark-mode class to the document before the skin stylesheets load -- so there's no flash of the wrong theme on page load.

Attribution and license

Derived from Roundcube's legacy Classic skin (original author: The Roundcube Dev Team), including icons originally designed by Stephen Horlander and Kevin Gerich for Mozilla.org. The skin is distributed under the Creative Commons Attribution-ShareAlike 3.0 license inherited from upstream Classic -- copying, distributing, and adapting is allowed as long as credit to the original authors is preserved.