or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

globals.mdindex.mdplugins.mdui-components.md
tile.json

tessl/npm-ckeditor--ckeditor5-theme-lark

A bright theme for CKEditor 5 providing comprehensive styling for all UI components and plugins.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ckeditor/ckeditor5-theme-lark@46.0.x

To install, run

npx @tessl/cli install tessl/npm-ckeditor--ckeditor5-theme-lark@46.0.0

index.mddocs/

CKEditor 5 Theme Lark

CKEditor 5 Theme Lark is the default bright theme for CKEditor 5, providing comprehensive CSS styling for all CKEditor 5 UI components, plugins, and editor interfaces. This CSS-only package offers complete visual theming through modular CSS architecture, extensive CSS custom properties for customization, and styling support for all CKEditor 5 features.

Package Information

  • Package Name: @ckeditor/ckeditor5-theme-lark
  • Package Type: npm
  • Language: CSS
  • Installation: npm install ckeditor5 (theme is included as dependency)

Core Imports

Complete Theme Import (Recommended):

@import '@ckeditor/ckeditor5-theme-lark/theme/index.css';

Minimal Theme Entry Point:

@import '@ckeditor/ckeditor5-theme-lark/theme/theme.css';

Selective Component Imports:

@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css';

Webpack/Bundler Import:

import '@ckeditor/ckeditor5-theme-lark/theme/index.css';

Basic Usage

Standard CKEditor 5 Integration:

<!DOCTYPE html>
<html>
<head>
    <!-- Theme is automatically included when using CKEditor 5 builds -->
    <link rel="stylesheet" href="node_modules/@ckeditor/ckeditor5-theme-lark/theme/index.css">
</head>
<body>
    <div id="editor">
        <!-- CKEditor 5 applies the Lark theme styling automatically -->
        <p>Content styled with Lark theme</p>
    </div>
</body>
</html>

CSS Custom Property Customization:

/* Override theme colors before importing theme */
:root {
    --ck-color-base-background: #f8f9fa;
    --ck-color-base-border: #dee2e6;
    --ck-color-button-default-hover-background: #e9ecef;
    --ck-color-button-action-background: #007bff;
}

@import '@ckeditor/ckeditor5-theme-lark/theme/index.css';

Architecture

The Lark theme is organized into modular CSS files:

  • Global Styles: Foundation CSS including colors, typography, spacing, focus states, and resets
  • UI Components: Complete styling for 25+ CKEditor 5 UI components (buttons, forms, dropdowns, panels, toolbars)
  • Editor Styles: Layout and interface styling for different CKEditor 5 editor types
  • Plugin Styles: Dedicated styling for 30+ CKEditor 5 plugins and features
  • Import Structure: Modular CSS architecture allowing selective imports

Capabilities

CSS Global Styles and Variables

Foundation styling system providing CSS custom properties and base styles for all CKEditor 5 components.

/* Main global styles import */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css';

/* Individual global style imports */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css';

Global Styles & Variables

UI Component Styling

Complete CSS styling for all CKEditor 5 UI components including buttons, forms, dropdowns, toolbars, and panels.

/* UI component CSS imports */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dialog/dialog.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/form/form.css';

UI Components

Plugin-Specific Styling

Dedicated CSS styling for CKEditor 5 plugins including image handling, table editing, link management, and content formatting.

/* Plugin styling CSS imports */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageinsert.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageupload.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableproperties.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/link.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-find-and-replace/findandreplaceform.css';

Plugin Styles

Customization

CSS Custom Properties

The theme exposes comprehensive CSS custom properties (CSS variables) for visual customization:

:root {
    /* Base colors */
    --ck-color-base-foreground: hsl(0, 0%, 98%);
    --ck-color-base-background: hsl(0, 0%, 100%);
    --ck-color-base-border: hsl(220, 6%, 81%);
    --ck-color-base-action: hsl(104, 50.2%, 42.5%);
    --ck-color-base-focus: hsl(209, 92%, 70%);
    --ck-color-base-text: hsl(0, 0%, 20%);
    
    /* Button colors */
    --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%);
    --ck-color-button-action-background: var(--ck-color-base-action);
    --ck-color-button-on-background: hsl(212, 100%, 97.1%);
    
    /* Spacing */
    --ck-spacing-tiny: 0.4em;
    --ck-spacing-small: 0.6em;
    --ck-spacing-standard: 0.8em;
    
    /* Typography */
    --ck-font-face: "Helvetica Neue", Helvetica, Arial, Tahoma, Verdana, sans-serif;
    --ck-font-size-base: 13px;
}

Component Override Patterns

/* Override specific component styling */
.ck.ck-button.my-custom-button {
    background: #007bff;
    border: 2px solid #0056b3;
    border-radius: 4px;
}

/* Override toolbar styling */
.ck.ck-toolbar.my-custom-toolbar {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Theme Structure

Main Import Files

/* Complete theme - imports all components */
@import '@ckeditor/ckeditor5-theme-lark/theme/index.css';

/* Minimal theme entry point */
@import '@ckeditor/ckeditor5-theme-lark/theme/theme.css';

Modular Component Imports

/* Build your own theme by importing specific components */

/* Always include globals first */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css';

/* Then add specific UI components */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css';

/* Add editor styling */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css';

/* Add plugin styling as needed */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageinsert.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css';

CSS Classes Applied by CKEditor 5

The theme provides styling for CSS classes that CKEditor 5 automatically applies:

/* Core editor classes */
.ck-editor          /* Main editor container */
.ck-editor__main    /* Editor content area */
.ck-editor__top     /* Top toolbar area */

/* UI component classes */
.ck-button          /* Button components */
.ck-button-action   /* Action buttons */
.ck-button-on       /* Active/pressed buttons */
.ck-toolbar         /* Toolbar containers */
.ck-dropdown        /* Dropdown components */
.ck-input           /* Form input elements */
.ck-dialog          /* Modal dialogs */
.ck-panel           /* Panel containers */
.ck-list            /* List components */

/* Content classes */
.ck-content         /* Editor content area */
.ck-widget          /* Widget elements (images, tables, etc.) */
.ck-widget_selected /* Selected widgets */