yazanammar_obsidian-theme-e.../docs/guide.md

2.7 KiB

Theme Engine Usage Guide

This guide explains the most common workflows inside Theme Engine.

Profiles: Create, Import, Export

A profile is a complete theme package that can store:

  • Colors
  • Snippets
  • Backgrounds
  • Notice rules
  • Settings

Create a Profile

  1. Open Profile Manager
  2. Click New
  3. Enter a profile name
  4. Select:
  • Light
  • Dark
  • Auto
  1. Save

Export a Profile

  1. Select the profile
  2. Click:
Export File

Theme Engine creates a single .json file containing the profile data.

Exported data may include:

  • Colors
  • Snippets
  • Rules
  • Background configuration
  • Custom variables

Import a Profile

  1. Click:
Import / Paste (.json)
  1. Upload a file or paste JSON content
  2. Choose a new profile name
  3. Confirm import

Using Backgrounds (Images & Videos)

Theme Engine supports profile-specific backgrounds.

Add a Background

  1. Navigate to:
Advanced Settings → Set Custom Background
  1. Click:
+
  1. Choose one of:
  • Upload file
  • Drag and drop
  • Paste URL

Theme Engine automatically stores and activates the media.

Manage Existing Backgrounds

Open:

Browse

Available actions:

  • Preview
  • Rename
  • Delete
  • Activate

Background Settings

Open:

Settings

Available controls:

For videos:

  • Opacity
  • Mute

For images:

  • JPG conversion
  • Compression quality

Using CSS Snippets

Theme Engine supports two snippet types.

Profile Snippets

Profile snippets:

  • Activate only for one profile
  • Export with profiles
  • Useful for profile-specific behavior

Example:

h1 {
  color: orange;
}

Global Snippets

Global snippets:

  • Stay active across all profiles
  • Remain independent from profile switching

Example:

body {
  font-family: Inter;
}

Snippet Order

Snippets support drag-and-drop ordering.

Lower snippets may override higher snippets.

Notice Coloring Rules

Theme Engine can style notices dynamically based on content.

Create a Rule

  1. Locate:
Notices
  1. Click the settings icon beside:
--cm-notice-bg-default

or:

--cm-notice-text-default
  1. Click:
Add New Rule

Keyword Rules

Examples:

Success
Saved
Warning

Press:

Space

or:

Enter

to add items.

Regular Expression Rules

Example:

\bError\b

Enable:

Regex

Highlight Only Mode

Enable:

Highlight Only

This colors only matching text instead of the entire notice.