Mauve Dream Theme

A dreamy take on the Nord theme with purple and mauve.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with a link inside it. The Mauve Dream theme uses soft, muted purple tones for a pleasant viewing experience. The text is clear and easy to read against the dark background.

Here's an example of inline code within a paragraph.

Blockquote

This is a blockquote element. It's styled with a left border and padding to make quoted content stand out from the rest of the text.

It can contain multiple paragraphs or other elements.

Lists

Unordered List

Ordered List

  1. Define color variables
  2. Apply to UI elements
  3. Test for accessibility
  4. Refine as needed

Definition List

Purple Waves
A series of dark purple background colors
Mauve Sky
Light purple foreground colors for text
Dream Accents
Vibrant accent colors for interactive elements

Code

  function mauveDreamTheme() {
    console.log("This is a code block.");
    return "Yeah!";
  }
        

Above is a horizontal rule (HR element), used to create a thematic break between content sections.

Form & UI Elements

Buttons

Link Button

Form Elements

Basic Form Inputs
Checkboxes and Radio Buttons

Form Actions

UI Components

Badges

Default Success Info Warning Danger

Badges are small components used to highlight status, count, or categorize items.

Callouts

Default Callout

This is a standard callout that provides general information or context to the user.

Information Callout

This callout provides helpful information, tips, or guidance to the user.

Success Callout

This callout confirms that an action was completed successfully.

Warning Callout

This callout warns the user about potential issues or consequences.

Danger Callout

This callout indicates a critical issue or error that requires immediate attention.

Alerts

Default Alert

A standard alert that draws attention to specific content within the page.

Information Alert

Provides additional information, tips, or explanations about content.

Success Alert

Highlights successful operations or positive information.

Warning Alert

Draws attention to important warnings or cautionary information.

Danger Alert

Highlights critical issues, errors, or dangerous actions.

Disabled Alert

Indicates content that is currently disabled or unavailable.

Status Indicators

Error Message

This indicates an error or critical issue.

Warning Message

This indicates a warning or caution.

Success Message

This indicates a successful action.

Information Message

This provides general information.

Modified Status

This indicates a modified state.

Cards & Panels

Card Example

This is a standard card component with some content. Cards can contain various elements and are useful for grouping related information.

Panel Example

This is a panel component, which is similar to a card but typically used for different purposes in many UIs.

Tables

Name Role Status
Purple Waves Background Color Active
Mauve Sky Text Color Standard
Dream Accents Accent Color Updated
Lucid Highlights Status Color Review