diff --git a/README.md b/README.md
index 4be3207..0abb21d 100644
--- a/README.md
+++ b/README.md
@@ -7,53 +7,45 @@
[](https://github.com/YazanAmmar/obsidian-theme-engine/stargazers)
[](https://github.com/YazanAmmar/obsidian-theme-engine/issues)
-**A full theme-engine for Obsidian. Colors, backgrounds, snippets, profiles — all in one place.**
-
-Theme Engine exposes a broad set of core Obsidian CSS color variables (plus your own custom ones) through a polished UI. Manage profiles, snippets, and even video backgrounds—no CSS knowledge required, but perfect for power users.
-
- 
+
+**Customize Obsidian without touching CSS. Profiles, backgrounds, snippets, and themes - all from one place.**
+
+Theme Engine lets you customize 100+ Obsidian variables (plus your own custom ones) through a polished UI. Manage profiles, snippets, and even video backgrounds - no CSS knowledge required - yet powerful enough for advanced users.
+
## Table of Contents
- [Overview](#overview)
- [Why Theme Engine?](#why-theme-engine)
- [Features](#features)
-- [Project Structure](#project-structure)
-- [Supported Languages](#supported-languages)
-- [Included Profiles](#included-profiles)
- [Screenshots / Demos](#screenshots--demos)
-- [Color Variable Reference](#color-variable-reference)
+- [Included Profiles](#included-profiles)
+- [Supported Languages](#supported-languages)
+- [Usage Guide](#usage-guide)
+- [Commands & Hotkeys](#commands--hotkeys)
+- [Tips & Performance](#tips--performance)
+- [Variable Reference](#variable-reference)
- [Installation (End User)](#installation-end-user)
- [Building from Source (Developer)](#building-from-source-developer)
-- [Usage Guide & Examples](#usage-guide--examples)
- - [1. Profiles: Create, Import, Export](#1-profiles-create-import-export)
- - [2. Setting a Custom Background (Image/Video)](#2-setting-a-custom-background-imagevideo)
- - [3. Using CSS Snippets (Profile & Global)](#3-using-css-snippets-profile--global)
- - [4. Advanced Notice Coloring](#4-advanced-notice-coloring-keywords--regex)
-- [Hotkeys (Commands)](#hotkeys-commands)
-- [Performance & Tips](#performance--tips)
-- [Changelog (Summary)](#changelog-summary)
-- [Roadmap](#roadmap)
+- [Project Structure](#project-structure)
- [Contributing](#contributing)
+- [Roadmap](#roadmap)
+- [Changelog (Summary)](#changelog-summary)
- [Troubleshooting / FAQ](#troubleshooting--faq)
- [License](#license)
- [Trademark & Branding](#trademark--branding)
- [Contact / Links](#contact--links)
----
-
## Overview
Theme Engine is an Obsidian plugin that allows you to edit and manage a large set of Obsidian’s core CSS color variables using an interactive UI. Create theme **profiles** (bundles of colors, snippets, notice rules, and settings), switch between them instantly, export/share them as JSON, or even import CSS from your installed themes to create new, editable profiles.
Designed for both:
-- **Beginners** — Simple color pickers, preset profiles, and a "Set Background" feature to get a polished look fast.
-- **Power users / Developers** — Full variable list, per-profile & global snippets, drag-and-drop reordering, regex notice rules, and exportable JSON.
-
----
+- **Beginners** - Simple color pickers, preset profiles, and a "Set Background" feature to get a polished look fast.
+- **Power users / Developers** - Full variable list, per-profile & global snippets, drag-and-drop reordering, regex notice rules, and exportable JSON.
## Why Theme Engine?
@@ -69,8 +61,6 @@ Designed for both:
- Get warned if an external theme might be interfering with your profile.
- **Performance Tuned:** Use the Live Preview FPS slider to balance visual feedback with CPU usage on your machine.
----
-
## Features
### 1. Core Profile Management
@@ -121,52 +111,21 @@ Designed for both:
- **Multi-Step Color Undo**: The "Undo" icon (`reset`) remembers the last 5 changes you made to each specific color.
- **Plugin Integrations**: Full color control for the **Iconize** plugin, with an automated cleanup system.
----
+## Screenshots / Demos
-## Project Structure
+### Default Themes
-The codebase is organized by concern: plugin core, UI, modal system, i18n, and SCSS layers.
+| **OLED Matrix (Dark)** | **Citrus Zest (Light)** |
+| -------------------------------------------------------------- | -------------------------------------------------------------- |
+| 
| 
|
-```text
-src/
-|- main.ts # Plugin entrypoint and lifecycle orchestration
-|- constants.ts # Built-in defaults, maps, and static config
-|- types.ts # Shared TypeScript domain types
-|- utils.ts # Cross-cutting utility helpers
-|
-|- commands/
-| |- index.ts # Command registration and command handlers
-|
-|- i18n/
-| |- strings.ts # Translation engine + fallback behavior
-| |- types.ts # i18n-specific typings
-| |- locales/ # Built-in locales + custom locale files
-| |- en.ts
-| |- ar.ts
-| |- fr.ts
-| |- fa.ts
-|
-|- styles/
-| |- main.scss # Root SCSS entry (compiled to styles.css)
-| |- base/ # Core tokens, animation, layout direction, editor styles
-| |- components/ # Shared component-level styles
-| |- modals/ # Styles scoped to modal experiences
-| |- settings/ # Settings tab layout, controls, search, accessibility
-|
-|- ui/
- |- settingsTab.ts # Main settings screen composition
- |- components/ # Reusable settings UI sections/widgets
- |- modals/ # Modal architecture split by feature domain
- |- index.ts # Central modal exports
- |- base.ts # Shared modal base class/infrastructure
- |- info.ts # Informational modal(s)
- |- common/ # Generic dialogs (confirmation, file conflict)
- |- editors/ # Content editors (CSS, notice rules, custom vars)
- |- profiles/ # Profile creation/import/browser modals
- |- settings/ # Settings-related modals (language, translator, etc.)
-```
+## Included Profiles
----
+The plugin comes with these hand-crafted profiles by default:
+
+1. **Default**: A dynamic profile that acts as a **transparent layer**, automatically capturing and adopting the colors of your currently active Obsidian theme.
+2. **OLED Matrix**: A true-black, high-contrast theme with vibrant green accents.
+3. **Citrus Zest**: A brilliant light theme with a clean design and stunning orange highlights.
## Supported Languages
@@ -179,161 +138,78 @@ Theme Engine has a powerful, extensible translation system. It includes full sup
- **Français (French)**
- **فارسی (Persian)** - Full RTL Support
----
+## Usage Guide
-## Included Profiles
+Need help getting started?
-The plugin comes with these hand-crafted profiles by default:
+See the complete usage guide:
-1. **Default**: A dynamic profile that acts as a **transparent layer**, automatically capturing and adopting the colors of your currently active Obsidian theme.
-2. **OLED Matrix**: A true-black, high-contrast theme with vibrant green accents.
-3. **Citrus Zest**: A brilliant light theme with a clean design and stunning orange highlights.
+**[Open Usage Guide →](./docs/guide.md)**
----
+Includes:
-## Screenshots / Demos
+- Creating profiles
+- Importing & exporting
+- Background setup
+- CSS snippets
+- Notice rules
+- Hotkeys
-### Default Themes
+## Commands & Hotkeys
-| **OLED Matrix (Dark)** | **Citrus Zest (Light)** |
-| -------------------------------------------------------------- | -------------------------------------------------------------- |
-| | |
+Theme Engine includes built-in commands for:
----
+- Profile switching
+- Theme cycling
+- Settings access
-## Color Variable Reference
+**[View Full Command List →](./docs/hotkeys.md)**
-Theme Engine exposes **105 core CSS variables** from Obsidian’s theme system.
-These variables are grouped internally by category and can be edited visually through the plugin UI.
+## Tips & Performance
-Each entry below shows:
+Want better responsiveness and smoother behavior?
-- **Variable** — the CSS variable name
-- **UI Label** — how it appears inside Theme Engine
-- **Description** — what the variable controls
+See the complete performance guide:
-> [!TIP]
-> Theme Engine also supports **custom CSS variables**.
-> You can add variables from other plugins or themes directly from the **Custom Variables** section in the settings.
+**[Open Tips & Performance Guide →](./docs/tips.md)**
- Click to expand the full list of supported CSS variables
+Includes:
-| Variable | UI Label | Description |
-| ------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `--iconize-icon-color` | Iconize icon color | Sets the color for all icons added by the Iconize plugin and overrides its internal color settings. |
-| `--background-primary` | Background primary | Main background color for the entire app, especially editor and note panes. |
-| `--background-primary-alt` | Background primary alt | Alternate background often used for active editor lines. |
-| `--background-secondary` | Background secondary | Secondary background used for sidebars and panels. |
-| `--background-secondary-alt` | Background secondary alt | Alternate sidebar background used for active files. |
-| `--background-modifier-border` | Border | Border color used across UI elements such as buttons and inputs. |
-| `--background-modifier-border-hover` | Border (hover) | Border color when hovering UI elements. |
-| `--background-modifier-border-focus` | Border (focus) | Border color when an element is focused. |
-| `--background-modifier-flair` | Flair background | Background used for special UI states like syncing indicators. |
-| `--background-modifier-hover` | Hover background | Background color when hovering list items or controls. |
-| `--background-modifier-active` | Active background | Background color when elements are selected or clicked. |
-| `--text-normal` | Normal text | Default text color used across notes and most UI elements. |
-| `--text-muted` | Muted text | Slightly faded text used for secondary information. |
-| `--text-faint` | Faint text | Very subtle text used for disabled or low-priority UI. |
-| `--text-on-accent` | Text on accent | Text color displayed on top of accent backgrounds. |
-| `--text-accent` | Accent text | Accent color used for links and highlighted UI elements. |
-| `--text-accent-hover` | Accent text (hover) | Accent text color when hovering links. |
-| `--text-selection` | Text selection | Background color of selected text. |
-| `--checklist-done-color` | Checklist done | Color used for completed checklist items. |
-| `--tag-color` | Tag text | Text color of tags. |
-| `--tag-color-hover` | Tag text (hover) | Tag color when hovering over tags. |
-| `--tag-bg` | Tag background | Background color for tags. |
-| `--nav-item-color` | Nav item text | Default text color for items in navigation lists. |
-| `--nav-item-color-hover` | Nav item text (hover) | Text color when hovering navigation items. |
-| `--nav-item-color-active` | Nav item text (active) | Text color of the active navigation item. |
-| `--nav-item-background-hover` | Nav item background (hover) | Background color when hovering navigation items. |
-| `--nav-item-background-active` | Nav item background (active) | Background color for selected navigation items. |
-| `--link-color` | Link color | Default color for internal Markdown links. |
-| `--link-color-hover` | Link color (hover) | Color for internal links when hovering. |
-| `--link-external-color` | External link color | Default color for external links. |
-| `--link-external-color-hover` | External link color (hover) | External link color when hovering. |
-| `--link-unresolved-color` | Unresolved link color | Color for links pointing to notes that do not exist yet. |
-| `--caret-color` | Caret color | Color of the text cursor in editing mode. |
-| `--code-comment` | Code comment | Syntax color used for comments in code blocks. |
-| `--code-function` | Code function | Syntax color for function names in code blocks. |
-| `--code-keyword` | Code keyword | Syntax color for language keywords. |
-| `--code-operator` | Code operator | Syntax color for operators in code blocks. |
-| `--code-property` | Code property | Syntax color for object properties in code blocks. |
-| `--code-string` | Code string | Syntax color for string values in code blocks. |
-| `--h1-color` | H1 color | Color of H1 headings. |
-| `--h2-color` | H2 color | Color of H2 headings. |
-| `--h3-color` | H3 color | Color of H3 headings. |
-| `--h4-color` | H4 color | Color of H4 headings. |
-| `--h5-color` | H5 color | Color of H5 headings. |
-| `--h6-color` | H6 color | Color of H6 headings. |
-| `--hr-color` | Horizontal rule | Color of horizontal rule lines (`---`). |
-| `--blockquote-border-color` | Blockquote border | Color of the vertical border in blockquotes. |
-| `--blockquote-color` | Blockquote text | Text color inside blockquotes. |
-| `--blockquote-bg` | Blockquote background | Background color for blockquotes. |
-| `--code-normal` | Inline code text | Text color inside inline code. |
-| `--code-background` | Inline code background | Background color for inline code blocks. |
-| `--text-highlight-bg` | Highlighted text background | Background color of highlighted text. |
-| `--table-background` | Table background | Background color of Markdown tables. |
-| `--table-border-color` | Table border | Border color of Markdown tables. |
-| `--table-header-background` | Table header background | Background color of table headers. |
-| `--table-row-alt-background` | Table alt row background | Alternate row background color in tables. |
-| `--callout-default` | Callout default | Base color for note callouts. |
-| `--callout-info` | Callout info | Base color for info callouts. |
-| `--callout-warning` | Callout warning | Base color for warning callouts. |
-| `--callout-error` | Callout error / danger | Base color for error and danger callouts. |
-| `--callout-success` | Callout success | Base color for success callouts. |
-| `--callout-tip` | Callout tip | Base color for tip and hint callouts. |
-| `--callout-question` | Callout question | Base color for question, help, and FAQ callouts. |
-| `--callout-important` | Callout important | Base color for important callouts. |
-| `--callout-bug` | Callout bug | Base color for bug callouts. |
-| `--callout-example` | Callout example | Base color for example callouts. |
-| `--callout-quote` | Callout quote | Base color for quote and cite callouts. |
-| `--callout-todo` | Callout todo | Base color for todo callouts. |
-| `--callout-summary` | Callout summary | Base color for summary callouts. |
-| `--callout-fail` | Callout fail / failure | Base color for fail, failure, and missing callouts. |
-| `--interactive-normal` | Interactive normal | Background color for buttons and interactive controls. |
-| `--interactive-hover` | Interactive hover | Background color when hovering interactive elements. |
-| `--interactive-accent` | Interactive accent | Accent color for important actions and buttons. |
-| `--interactive-accent-hover` | Interactive accent hover | Accent color when hovering important buttons. |
-| `--interactive-success` | Success color | Color indicating successful operations. |
-| `--interactive-error` | Error color | Color indicating error states. |
-| `--interactive-warning` | Warning color | Color indicating warning states. |
-| `--titlebar-background` | Titlebar background | Background color of the window title bar. |
-| `--titlebar-background-focused` | Titlebar background (focused) | Title bar color when the window is active. |
-| `--titlebar-text-color` | Titlebar text | Text color of the title bar. |
-| `--sidebar-background` | Sidebar background | Background color of sidebars. |
-| `--sidebar-border-color` | Sidebar border | Border color next to sidebars. |
-| `--header-background` | Header background | Background color for pane headers. |
-| `--header-border-color` | Header border | Border color below pane headers. |
-| `--vault-name-color` | Vault name | Color of the vault name displayed in the sidebar. |
-| `--tab-background-active` | Active tab background | Background color of the active tab. |
-| `--tab-text-color` | Tab text | Text color of inactive tabs. |
-| `--tab-text-color-active` | Active tab text | Text color of the active tab. |
-| `--workspace-background-translucent` | Workspace translucent background | Translucent background used behind overlays. |
-| `--cm-notice-text-default` | Default notice text | Default text color for notices unless overridden by rules. |
-| `--cm-notice-bg-default` | Default notice background | Default background color for notices unless overridden by rules. |
-| `--graph-line` | Graph line | Color of connections between notes in graph view. |
-| `--graph-node` | Graph node | Color of nodes representing notes. |
-| `--graph-text` | Graph text | Color of text labels in graph view. |
-| `--graph-node-unresolved` | Graph unresolved node | Color of nodes for unresolved links. |
-| `--graph-node-focused` | Graph focused node | Color of the highlighted node. |
-| `--graph-node-tag` | Graph tag node | Color of nodes representing tags. |
-| `--graph-node-attachment` | Graph attachment node | Color of nodes representing attachments. |
-| `--canvas-background` | Canvas background | Background color of the canvas workspace. |
-| `--canvas-card-label-color` | Canvas card label | Text color of labels displayed on canvas cards. |
-| `--canvas-dot-pattern` | Canvas dot pattern | Color of the dotted grid pattern used in canvas. |
-| `--scrollbar-thumb-bg` | Scrollbar thumb | Color of the draggable scrollbar thumb. |
-| `--scrollbar-active-thumb-bg` | Scrollbar active thumb | Color of the scrollbar thumb when dragged. |
-| `--scrollbar-bg` | Scrollbar background | Background color of the scrollbar track. |
-| `--divider-color` | Divider | Color used for UI separator lines and dividers. |
+- Live Preview optimization
+- Background performance recommendations
+- Community theme conflict advice
+- Suggested workflows
+- Stability troubleshooting
-
+## Variable Reference
----
+Theme Engine exposes more than **100+ core Obsidian variables** covering:
+
+- Backgrounds
+- Text & Typography
+- Navigation
+- Links
+- Code Blocks
+- Tables
+- Callouts
+- Interactive Elements
+- Graph View
+- Canvas
+- Tabs
+- Scrollbars
+- Plugin integrations
+- Custom variables
+
+> [!TIP]
+>
+> View the complete variable documentation here:
+>
+> **[Variable Reference →](./docs/variables.md)**
## Installation (End User)
> [!IMPORTANT]
-> **Requires Obsidian v1.8.7 or higher.** Please ensure your Obsidian app is updated before installing.
+> **Requires Obsidian v1.11.0 or higher.** Please ensure your Obsidian app is updated before installing.
1. Download the latest release from the [GitHub Releases page](https://github.com/YazanAmmar/obsidian-theme-engine/releases).
2. Extract the plugin folder into your vault's plugins folder: `/.obsidian/plugins/`.
@@ -341,8 +217,6 @@ Each entry below shows:
4. Enable the "Theme Engine" plugin.
5. Open the plugin settings to start customizing!
----
-
## Building from Source (Developer)
If you want to customize the plugin or contribute to its development, you can easily build it from the source code.
@@ -393,102 +267,48 @@ If you want to customize the plugin or contribute to its development, you can ea
/.obsidian/plugins/obsidian-theme-engine/
```
----
+## Project Structure
-## Usage Guide & Examples
+The codebase is organized by concern: plugin core, UI, modal system, i18n, and SCSS layers.
-### 1. Profiles: Create, Import, Export
-
-A **Profile** is a single "theme" that saves all your settings.
-
-- **Create**: Go to `Profile Manager` -> `New`. Give it a name and choose if it should force "Dark", "Light" mode or "Auto".
-- **Export**: Select the profile you want to share, then click `Export File`. This saves a single `.json` file with all colors, snippets, and rules.
-- **Import**: Click `Import / Paste (.json)`. You can paste the JSON text or upload the file. You will be prompted to give it a new name.
-
-### 2. Setting a Custom Background (Image/Video)
-
-This is one of the most popular features .
-
-1. Go to `Advanced Settings` -> `Set Custom Background`.
-2. Click the `+` (Add) button. A modal will open.
-3. **Drag & drop** an image or video, **upload** a file, or **paste a URL**.
-4. The plugin will save the media and activate it.
-5. Click the `📦` (Browse) button to see all your saved media, rename them, or select a different one.
-6. Click the `⚙️` (Settings) button to control video opacity, mute, or image quality.
-
-### 3. Using CSS Snippets (Profile & Global)
-
-You can add small CSS tweaks without creating separate files.
-
-- **Profile Snippets**: Created normally. They are tied to the active profile and are exported with it.
-- **Global Snippets**: When creating/editing a snippet, check the "Save as Global Snippet" toggle. This snippet will remain active _no matter which profile you switch to_.
-- **Order**: You can **drag and drop** snippets in the list to control their load order (snippets lower in the list can override ones above them).
-
-### 4. Advanced Notice Coloring (Keywords & Regex)
-
-Customize the color of pop-up notices based on their text content.
-
-1. Find the `Notices` category in the color pickers.
-2. Click the `⚙️` (Settings) icon next to `--cm-notice-bg-default` (for background) or `--cm-notice-text-default` (for text).
-3. In the modal, click `Add New Rule`.
-4. **Keywords**: Type keywords (e.g., "Success", "Saved") into the box and press `Space` or `Enter`.
-5. **Regex**: Or, type a regular expression (e.g., `\bError\b`) and check the "Regex" box.
-6. **New**: Check the "Highlight Only" box (`highlighter` icon) to apply color _only_ to the matching keywords, not the whole notice.
-7. Choose a color for that rule.
-8. You can drag and drop rules to change their priority. The first rule that matches (from top to bottom) will be applied.
-
----
-
-## Hotkeys (Commands)
-
-You can assign hotkeys to these commands in `Settings` -> `Hotkeys`:
-
-1. **Enable & Disable**: Toggle the entire plugin on or off.
-2. **Cycle to next profile**: Instantly switch to the next profile in your list.
-3. **Cycle to previous profile**: Switch to the previous profile.
-4. **Open settings tab**: Open the Theme Engine settings panel.
-5. **Cycle active profile theme**: Cycle the active profile's theme (Light/Dark/Auto).
-
----
-
-## Performance & Tips
-
-- If you notice lag while dragging a color picker, reduce the **Live Update FPS** slider in the `Advanced Settings` section. A value of 0 disables live preview completely, applying color only when you release the mouse.
-- The **Theme Interference Warning** ⚠️ is important. If you have a community theme (e.g., "Minimal") enabled _and_ a Theme Engine profile active, they might fight over colors. For best results, set your Obsidian theme to "Default" and let Theme Engine handle all the colors.
-- **For Optimal Performance:** We recommend enabling the **Convert images to JPG** option in the Background Settings. This automatically compresses uploaded images, resulting in smaller file sizes and better loading performance without noticeable loss of visual quality.
-- **If you encounter stability or performance issues:** First, export your current profiles and backgrounds. Then, use the **Reset Plugin Settings** option in Advanced Settings to restore the plugin to its factory state. This often solves underlying data conflicts.
-
----
-
-## Changelog (Summary)
-
-For full details, see [`CHANGELOG.md`](https://github.com/YazanAmmar/obsidian-theme-engine/blob/main/CHANGELOG.md).
-
-- **v2.0.0** - The **Theme Engine Update**. Re-wrote the core to dynamically capture your active theme's colors. UI now shows "Pristine" (dimmed) vs. "Modified" (bright) states. Added a complete **Custom Language** and translation editor system. Implemented granular data reset and SCSS/ESLint.
-- **v1.1.1** - Added **Per-Profile Video Background** support, enhanced settings display performance by **restoring scroll position**, and refactored the translation structure.
-- **v1.1.0** - Added **Per-Profile Custom Backgrounds** (Image & Video), background browser, and media management tools.
-- **v1.0.9** - Added **Import from Installed Themes/Snippets**, Quick Theme Toggle, Reset Plugin button, and Theme Interference Warning.
-- **v1.0.8** - Added **Global CSS Snippets**, a Ribbon Icon, flexible RTL options, and new hotkeys.
-
----
-
-## Roadmap
-
-Here are the future plans for Theme Engine. Feel free to contribute or suggest features!
-
-- [ ] **Community Profile Marketplace**: An easy way to browse, share, and import profiles from other users.
-- [ ] **More Plugin Integrations**: Add dedicated color variables for other popular plugins (e.g., Kanban, Calendar).
-- [ ] **AI-Powered Theming**: Integrate with Gemini or ChatGPT API to generate profiles and snippets, helping users build their dream theme.
-- [ ] **Export as Full Theme (.zip)**: Allow exporting a complete profile (colors, snippets, settings, and base64 background) as a ready-to-publish Obsidian theme file.
-- [ ] **Advanced Context Triggers**: Automatically activate profiles based on context (time of day, current folder, or note tags).
-- [ ] **Advanced CSS Editor**: Upgrade the snippet editor with syntax highlighting, autocomplete for Obsidian variables, and live error detection (Linting).
-- [ ] **Advanced Color Helpers**:
- - [ ] Live contrast ratio warnings (AA/AAA) directly in the color picker.
- - [ ] A "Suggest Accessible Color" button based on contrast algorithms.
-- [ ] **Color Blindness Simulator**: Add an accessibility tool that applies an SVG filter to the UI to simulate various types of color blindness.
-- [ ] **Expanded Core Variable Support**: Add support for more official Obsidian color variables as they are introduced.
-
----
+```text
+src/
+|- main.ts # Plugin entrypoint and lifecycle orchestration
+|- constants.ts # Built-in defaults, maps, and static config
+|- types.ts # Shared TypeScript domain types
+|- utils.ts # Cross-cutting utility helpers
+|
+|- commands/
+| |- index.ts # Command registration and command handlers
+|
+|- i18n/
+| |- strings.ts # Translation engine + fallback behavior
+| |- types.ts # i18n-specific typings
+| |- locales/ # Built-in locales + custom locale files
+| |- en.ts
+| |- ar.ts
+| |- fr.ts
+| |- fa.ts
+|
+|- styles/
+| |- main.scss # Root SCSS entry (compiled to styles.css)
+| |- base/ # Core tokens, animation, layout direction, editor styles
+| |- components/ # Shared component-level styles
+| |- modals/ # Styles scoped to modal experiences
+| |- settings/ # Settings tab layout, controls, search, accessibility
+|
+|- ui/
+ |- settingsTab.ts # Main settings screen composition
+ |- components/ # Reusable settings UI sections/widgets
+ |- modals/ # Modal architecture split by feature domain
+ |- index.ts # Central modal exports
+ |- base.ts # Shared modal base class/infrastructure
+ |- info.ts # Informational modal(s)
+ |- common/ # Generic dialogs (confirmation, file conflict)
+ |- editors/ # Content editors (CSS, notice rules, custom vars)
+ |- profiles/ # Profile creation/import/browser modals
+ |- settings/ # Settings-related modals (language, translator, etc.)
+```
## Contributing
@@ -506,88 +326,56 @@ Please follow the existing code style, and ensure your contributions are **innov
>
> Are you a developer of another plugin? If you'd like your plugin to be natively supported by Theme Engine (e.g., controlling a specific color variable of your UI), feel free to open a Pull Request. Supporting integration is a great way to gain more visibility for your work!
----
+## Roadmap
+
+Here are the future plans for Theme Engine. Feel free to contribute or suggest features!
+
+- [ ] **Community Profile Marketplace**: An easy way to browse, share, and import profiles from other users.
+- [ ] **More Plugin Integrations**: Add dedicated color variables for other popular plugins (e.g., Kanban, Calendar).
+- [ ] **AI-Powered Theming**: Integrate with Gemini or ChatGPT API to generate profiles and snippets, helping users build their dream theme.
+- [ ] **Export as Full Theme (.zip)**: Allow exporting a complete profile (colors, snippets, settings, and base64 background) as a ready-to-publish Obsidian theme file.
+- [ ] **Advanced Context Triggers**: Automatically activate profiles based on context (time of day, current folder, or note tags).
+- [ ] **Advanced CSS Editor**: Upgrade the snippet editor with syntax highlighting, autocomplete for Obsidian variables, and live error detection (Linting).
+- [ ] **Advanced Color Helpers**:
+ - [ ] Live contrast ratio warnings (AA/AAA) directly in the color picker.
+ - [ ] A "Suggest Accessible Color" button based on contrast algorithms.
+- [ ] **Color Blindness Simulator**: Add an accessibility tool that applies an SVG filter to the UI to simulate various types of color blindness.
+- [ ] **Expanded Core Variable Support**: Add support for more official Obsidian color variables as they are introduced.
+
+## Changelog (Summary)
+
+For full details, see [`CHANGELOG.md`](https://github.com/YazanAmmar/obsidian-theme-engine/blob/main/CHANGELOG.md).
+
+- **v2.1.0** - Expanded core variable coverage, introduced native Obsidian language detection, improved build architecture, strengthened CSS safety, and refined overall performance and maintainability.
+- **v2.0.0** - The **Theme Engine Update**. Re-wrote the core to dynamically capture your active theme's colors. UI now shows "Pristine" (dimmed) vs. "Modified" (bright) states. Added a complete **Custom Language** and translation editor system. Implemented granular data reset and SCSS/ESLint.
+- **v1.1.1** - Added **Per-Profile Video Background** support, enhanced settings display performance by **restoring scroll position**, and refactored the translation structure.
+- **v1.1.0** - Added **Per-Profile Custom Backgrounds** (Image & Video), background browser, and media management tools.
+- **v1.0.9** - Added **Import from Installed Themes/Snippets**, Quick Theme Toggle, Reset Plugin button, and Theme Interference Warning.
## Troubleshooting / FAQ
-### Q: Why are my colors not changing after I activate a profile?
+Having problems or questions?
-A: This is the most common issue. You likely have a **Community Theme** (like Minimal, Atom, etc.) enabled simultaneously. This external theme imposes its own color rules and interferes with the variables set by **Theme Engine**.
+See the complete FAQ documentation:
-**The Best Solution:**
+**[Open FAQ →](./docs/faq.md)**
-1. Go to Obsidian's **Settings** -> **Appearance** -> **Themes**.
-2. Select the **Default** theme for Obsidian.
-3. The warning icon in Theme Engine settings will disappear, and your profile's colors will apply correctly.
+Common topics include:
-**Advanced Solution (To customize an external theme):**
-
-1. Set Obsidian's theme to **Default**.
-2. Open **Theme Engine** settings and click **Import / Paste (.css)**.
-3. Select the **"Import from installed theme"** option and choose the theme you want to modify (e.g., Minimal).
-4. This creates a **new CSS Profile** within Theme Engine containing the external theme's code, allowing you to customize its colors safely without conflicts.
-
----
-
-### Q: I added an image or video background, but the UI (like sidebars) is still dark. Why isn't it transparent?
-
-A: **Theme Engine** uses **Smart Transparency** to handle this.
-
-- When you activate a background, the plugin automatically sets key CSS variables (like `--background-primary` and `--sidebar-background`) to `transparent`.
-- This makes the UI layers see-through, allowing your image or video to be visible.
-
----
-
-### Q: What is the difference between a normal Snippet and a Global Snippet?
-
-A: The core difference is scope:
-
-- **Profile Snippet (Normal):** Is linked to a **single profile**. It only activates when that specific profile is active, and it is included when you export the profile.
-
-> Use **Profile Snippets** for things that only make sense with that profile, like a special `h1` color.
-
-- **Global Snippet:** **Always** remains active, regardless of which profile is currently selected. This is ideal for universal styles you always need, like a custom font or hiding a specific UI element.
-
-> Use **Global Snippets** for things you _always_ want, like a custom font.
-
----
-
-### Q: What are Snapshots (Pin) and why should I use them?
-
-A: Snapshots are a safety feature.
-
-- The **Pin** button saves an **instant snapshot** of the profile's current state (colors, CSS, and notice rules).
-- If you make changes you don't like, the **Reset to Pinned** button instantly reverts the profile to the saved snapshot, allowing for risk-free experimentation.
-
----
-
-### Q: Does the plugin support Right-to-Left (RTL) languages?
-
-A: Yes, absolutely. The plugin fully supports **Arabic** (العَرَبيَّةُ) and **Persian** (فارسی). You can find the **Enable Right-to-Left (RTL) Layout** setting in the Translations & Languages section...
-
----
-
-### Q: I used the old Beta version (Color Master). How do I keep my profiles?
-
-A: Because the plugin's official ID changed for the Obsidian store release (`theme-engine`), automatic data migration was disabled to comply with strict security guidelines. To keep your old profiles, perform a quick manual copy:
-
-1. Close Obsidian.
-2. Go to your vault's plugins folder: `.obsidian/plugins/obsidian-color-master/`
-3. Copy the `data.json` file.
-4. Paste it into the new plugin folder: `.obsidian/plugins/obsidian-theme-engine/` (replace the file if asked).
-5. Restart Obsidian.
-
----
+- Community theme conflicts
+- Background transparency behavior
+- Profile vs Global snippets
+- Snapshots
+- RTL support
+- Migrating from Color Master
## License
-MIT — see [LICENSE](https://github.com/YazanAmmar/obsidian-theme-engine/blob/main/LICENSE).
+MIT - see [LICENSE](https://github.com/YazanAmmar/obsidian-theme-engine/blob/main/LICENSE).
> [!NOTE]
> This license does not grant rights to use the project's logo or visual identity see [TRADEMARK.md](./TRADEMARK.md).
----
-
## Trademark & Branding
The official logo (phoenix emblem) and visual identity of this project are protected.
@@ -597,10 +385,9 @@ The official logo (phoenix emblem) and visual identity of this project are prote
> For full trademark and branding rules, see [TRADEMARK.md](./TRADEMARK.md).
----
-
## Contact / Links
-- **GitHub Repo**: [https://github.com/YazanAmmar/obsidian-theme-engine](https://github.com/YazanAmmar/obsidian-theme-engine)
-- **Issues & Features**: [GitHub Issues Page](https://github.com/YazanAmmar/obsidian-theme-engine/issues)
-- **Telegram Channel**: [https://t.me/ThemeEngine](https://t.me/ThemeEngine)
+- **GitHub Repository**:
+- **Issues & Feature Requests**:
+- **Telegram Channel**:
+- **Support My Open Source Work**:
diff --git a/docs/faq.md b/docs/faq.md
new file mode 100644
index 0000000..59411d5
--- /dev/null
+++ b/docs/faq.md
@@ -0,0 +1,173 @@
+# Theme Engine FAQ
+
+Frequently asked questions and solutions for common issues.
+
+## Why are my colors not changing after activating a profile?
+
+This is the most common issue.
+
+Usually this happens because a Community Theme (such as Minimal or other installed themes) is overriding the variables managed by Theme Engine.
+
+### Recommended Solution
+
+1. Open:
+
+ `Settings → Appearance → Themes`
+
+2. Select:
+
+ `Default`
+
+3. Return to Theme Engine.
+
+Your profile colors should now apply correctly.
+
+### Alternative Solution (Customize Existing Themes)
+
+If you want to continue using another community theme:
+
+1. Switch Obsidian temporarily to the Default theme.
+2. Open Theme Engine.
+3. Click:
+
+ `Import / Paste (.css)`
+
+4. Select:
+
+ `Import from installed theme`
+
+5. Choose the desired theme.
+
+Theme Engine creates an editable profile based on that theme.
+
+## Why is my background visible but parts of the UI remain dark?
+
+Theme Engine uses automatic transparency handling.
+
+When a background is active, important variables are automatically adjusted, including:
+
+- `--background-primary`
+- `--sidebar-background`
+- `--background-secondary`
+
+This allows your image or video background to become visible through the interface.
+
+## What is the difference between Profile Snippets and Global Snippets?
+
+### Profile Snippets
+
+Profile snippets belong to one profile only.
+
+Characteristics:
+
+- Activate only with their profile
+- Included when exporting profiles
+- Useful for profile-specific styles
+
+Example:
+
+```css
+h1 {
+ color: red;
+}
+```
+
+### Global Snippets
+
+Global snippets remain active across all profiles.
+
+Characteristics:
+
+- Always active
+- Not tied to a specific profile
+- Useful for universal customization
+
+Example:
+
+```css
+body {
+ font-family: Inter;
+}
+```
+
+## What are Snapshots?
+
+Snapshots are a safety mechanism.
+
+When using:
+
+```txt
+Pin
+```
+
+Theme Engine saves:
+
+- Colors
+- Snippets
+- CSS
+- Rules
+- Related settings
+
+If you later dislike your changes:
+
+```txt
+Reset to Pinned
+```
+
+restores the previous saved state instantly.
+
+## I used the old Color Master beta. How can I keep my profiles?
+
+Automatic migration was removed to comply with Obsidian plugin guidelines.
+
+To migrate manually:
+
+1. Close Obsidian.
+2. Open:
+
+```txt
+.obsidian/plugins/obsidian-color-master/
+```
+
+3. Copy:
+
+```txt
+data.json
+```
+
+4. Paste into:
+
+```txt
+.obsidian/plugins/theme-engine/
+```
+
+5. Restart Obsidian.
+
+## Still having problems?
+
+If you encounter unexpected behavior:
+
+1. Export your important profiles first.
+2. Open:
+
+```txt
+Theme Engine → Advanced Settings
+```
+
+3. Use:
+
+```txt
+Reset Plugin
+```
+
+If problems continue:
+
+- Open a GitHub issue
+- Include screenshots if possible
+- Mention your Obsidian version and plugin version
+
+## Related Documentation
+
+- [Usage Guide](./guide.md)
+- [Variable Reference](./variables.md)
+- [Main README](../README.md)
diff --git a/docs/guide.md b/docs/guide.md
new file mode 100644
index 0000000..7696848
--- /dev/null
+++ b/docs/guide.md
@@ -0,0 +1,244 @@
+# 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
+
+5. Save
+
+### Export a Profile
+
+1. Select the profile
+2. Click:
+
+```text
+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:
+
+```text
+Import / Paste (.json)
+```
+
+2. Upload a file or paste JSON content
+3. Choose a new profile name
+4. Confirm import
+
+## Using Backgrounds (Images & Videos)
+
+Theme Engine supports profile-specific backgrounds.
+
+### Add a Background
+
+1. Navigate to:
+
+```text
+Advanced Settings → Set Custom Background
+```
+
+2. Click:
+
+```text
++
+```
+
+3. Choose one of:
+
+- Upload file
+- Drag and drop
+- Paste URL
+
+Theme Engine automatically stores and activates the media.
+
+### Manage Existing Backgrounds
+
+Open:
+
+```text
+Browse
+```
+
+Available actions:
+
+- Preview
+- Rename
+- Delete
+- Activate
+
+### Background Settings
+
+Open:
+
+```text
+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:
+
+```css
+h1 {
+ color: orange;
+}
+```
+
+### Global Snippets
+
+Global snippets:
+
+- Stay active across all profiles
+- Remain independent from profile switching
+
+Example:
+
+```css
+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:
+
+```text
+Notices
+```
+
+2. Click the settings icon beside:
+
+```text
+--cm-notice-bg-default
+```
+
+or:
+
+```text
+--cm-notice-text-default
+```
+
+3. Click:
+
+```text
+Add New Rule
+```
+
+### Keyword Rules
+
+Examples:
+
+```text
+Success
+Saved
+Warning
+```
+
+Press:
+
+```text
+Space
+```
+
+or:
+
+```text
+Enter
+```
+
+to add items.
+
+### Regular Expression Rules
+
+Example:
+
+```regex
+\bError\b
+```
+
+Enable:
+
+```text
+Regex
+```
+
+### Highlight Only Mode
+
+Enable:
+
+```text
+Highlight Only
+```
+
+This colors only matching text instead of the entire notice.
+
+## Related Documentation
+
+- [Variable Reference](./variables.md)
+- [FAQ](./faq.md)
+- [Main README](../README.md)
+- [Commands & Hotkeys](./hotkeys.md)
diff --git a/docs/hotkeys.md b/docs/hotkeys.md
new file mode 100644
index 0000000..f0a04bc
--- /dev/null
+++ b/docs/hotkeys.md
@@ -0,0 +1,85 @@
+# Theme Engine Commands & Hotkeys
+
+Theme Engine provides built-in commands that can be assigned to custom keyboard shortcuts through Obsidian.
+
+Open:
+
+```text
+Settings > Hotkeys > Theme Engine
+```
+
+## Available Commands
+
+### Enable & Disable Plugin
+
+Toggle the entire plugin on or off without opening the settings panel.
+
+Useful for:
+
+- Temporary testing
+- Comparing behavior
+- Quickly disabling all active customizations
+
+### Cycle to Next Profile
+
+Switch instantly to the next profile in your profile list.
+
+Useful for:
+
+- Quickly previewing themes
+- Fast workspace switching
+- Rotating between multiple setups
+
+### Cycle to Previous Profile
+
+Switch to the previous profile.
+
+Useful for:
+
+- Navigating backwards through profiles
+- Returning to a recently used setup
+
+### Open Settings Tab
+
+Open the Theme Engine settings panel directly.
+
+Useful for:
+
+- Fast access
+- Avoiding manual navigation through settings
+
+### Cycle Active Profile Theme
+
+Cycles the active profile theme mode:
+
+```text
+Light → Dark → Auto
+```
+
+Useful for:
+
+- Rapid appearance testing
+- Switching workspace mood instantly
+
+## Suggested Shortcuts
+
+These are optional examples:
+
+| Action | Suggested Shortcut |
+| ---------------- | ------------------ |
+| Next Profile | `Ctrl + Alt + ]` |
+| Previous Profile | `Ctrl + Alt + [` |
+| Open Settings | `Ctrl + Alt + T` |
+| Toggle Plugin | `Ctrl + Alt + E` |
+| Cycle Theme Mode | `Ctrl + Alt + M` |
+
+> [!NOTE]
+>
+> Shortcut combinations vary by operating system and existing Obsidian bindings.
+
+## Related Documentation
+
+- [Usage Guide](./guide.md)
+- [Tips & Performance](./tips.md)
+- [FAQ](./faq.md)
+- [Main README](../README.md)
diff --git a/docs/tips.md b/docs/tips.md
new file mode 100644
index 0000000..e184f13
--- /dev/null
+++ b/docs/tips.md
@@ -0,0 +1,126 @@
+# Theme Engine Tips & Performance Guide
+
+This guide contains recommendations for better performance, smoother customization, and avoiding common issues.
+
+## Reduce Live Preview Updates
+
+If color updates feel slow while dragging color pickers:
+
+1. Open:
+
+```text
+Advanced Settings
+```
+
+2. Locate:
+
+```text
+Live Update FPS
+```
+
+3. Reduce the value.
+
+Recommendations:
+
+| Value | Behavior |
+| ----- | ------------------------------- |
+| 60 | Maximum responsiveness |
+| 30 | Balanced performance |
+| 15 | Lower CPU usage |
+| 0 | Disable live preview completely |
+
+At `0`, updates apply only after releasing the picker.
+
+## Community Themes May Override Colors
+
+Theme Engine modifies Obsidian variables, but Community Themes may override them.
+
+Examples:
+
+- Minimal
+- Atom
+- Things
+- Prism
+
+Recommended setup:
+
+1. Open:
+
+```text
+Settings → Appearance → Themes
+```
+
+2. Select:
+
+```text
+Default
+```
+
+3. Let Theme Engine control colors.
+
+## Optimize Background Performance
+
+Large images and videos can affect responsiveness.
+
+Recommended practices:
+
+### Images
+
+Enable:
+
+```text
+Convert Images to JPG
+```
+
+Benefits:
+
+- Smaller file sizes
+- Faster loading
+- Lower memory usage
+
+### Videos
+
+Recommendations:
+
+- Prefer `.mp4`
+- Use lower resolutions where possible
+- Keep videos short
+
+Avoid:
+
+- Very large files
+- High bitrate videos
+
+## Profile Cleanup
+
+Large numbers of unused profiles and snippets can make management harder.
+
+Recommended:
+
+- Delete old profiles
+- Remove unused snippets
+- Export backups periodically
+
+## Troubleshooting
+
+If unexpected issues occur:
+
+See:
+[FAQ →](./faq.md)
+
+## Recommended Workflow
+
+For the best experience:
+
+1. Start with the Default profile
+2. Customize colors gradually
+3. Add snippets only when needed
+4. Export profiles regularly
+5. Use snapshots before major changes
+
+## Related Documentation
+
+- [Usage Guide](./guide.md)
+- [Variable Reference](./variables.md)
+- [FAQ](./faq.md)
+- [Main README](../README.md)
diff --git a/docs/variables.md b/docs/variables.md
new file mode 100644
index 0000000..c86c067
--- /dev/null
+++ b/docs/variables.md
@@ -0,0 +1,167 @@
+# Theme Engine Variable Reference
+
+Theme Engine exposes a large collection of Obsidian CSS variables through a visual editor.
+
+These variables allow you to customize the appearance of your workspace without writing CSS manually.
+
+## About Variable Types
+
+Variables are grouped internally by purpose:
+
+- Backgrounds
+- Text & Typography
+- Navigation
+- Links
+- Code Blocks
+- Tables
+- Callouts
+- Interactive Elements
+- Graph View
+- Canvas
+- Tabs
+- Scrollbars
+- Plugin Integrations
+- Custom Variables
+
+Each variable entry includes:
+
+- **Variable** → Internal CSS variable name
+- **UI Label** → Display name inside Theme Engine
+- **Description** → What the variable controls
+
+> [!TIP]
+>
+> Theme Engine also supports custom variables.
+>
+> You can add variables from:
+>
+> - Other plugins
+> - Community themes
+> - Your own CSS snippets
+
+## Supported Variables
+
+
+Click to expand the full variable list
+
+| Variable | UI Label | Description |
+| ------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `--iconize-icon-color` | Iconize icon color | Sets the color for all icons added by the Iconize plugin and overrides its internal color settings. |
+| `--background-primary` | Background primary | Main background color for the entire app, especially editor and note panes. |
+| `--background-primary-alt` | Background primary alt | Alternate background often used for active editor lines. |
+| `--background-secondary` | Background secondary | Secondary background used for sidebars and panels. |
+| `--background-secondary-alt` | Background secondary alt | Alternate sidebar background used for active files. |
+| `--background-modifier-border` | Border | Border color used across UI elements such as buttons and inputs. |
+| `--background-modifier-border-hover` | Border (hover) | Border color when hovering UI elements. |
+| `--background-modifier-border-focus` | Border (focus) | Border color when an element is focused. |
+| `--background-modifier-flair` | Flair background | Background used for special UI states like syncing indicators. |
+| `--background-modifier-hover` | Hover background | Background color when hovering list items or controls. |
+| `--background-modifier-active` | Active background | Background color when elements are selected or clicked. |
+| `--text-normal` | Normal text | Default text color used across notes and most UI elements. |
+| `--text-muted` | Muted text | Slightly faded text used for secondary information. |
+| `--text-faint` | Faint text | Very subtle text used for disabled or low-priority UI. |
+| `--text-on-accent` | Text on accent | Text color displayed on top of accent backgrounds. |
+| `--text-accent` | Accent text | Accent color used for links and highlighted UI elements. |
+| `--text-accent-hover` | Accent text (hover) | Accent text color when hovering links. |
+| `--text-selection` | Text selection | Background color of selected text. |
+| `--checklist-done-color` | Checklist done | Color used for completed checklist items. |
+| `--tag-color` | Tag text | Text color of tags. |
+| `--tag-color-hover` | Tag text (hover) | Tag color when hovering over tags. |
+| `--tag-bg` | Tag background | Background color for tags. |
+| `--nav-item-color` | Nav item text | Default text color for items in navigation lists. |
+| `--nav-item-color-hover` | Nav item text (hover) | Text color when hovering navigation items. |
+| `--nav-item-color-active` | Nav item text (active) | Text color of the active navigation item. |
+| `--nav-item-background-hover` | Nav item background (hover) | Background color when hovering navigation items. |
+| `--nav-item-background-active` | Nav item background (active) | Background color for selected navigation items. |
+| `--link-color` | Link color | Default color for internal Markdown links. |
+| `--link-color-hover` | Link color (hover) | Color for internal links when hovering. |
+| `--link-external-color` | External link color | Default color for external links. |
+| `--link-external-color-hover` | External link color (hover) | External link color when hovering. |
+| `--link-unresolved-color` | Unresolved link color | Color for links pointing to notes that do not exist yet. |
+| `--caret-color` | Caret color | Color of the text cursor in editing mode. |
+| `--code-comment` | Code comment | Syntax color used for comments in code blocks. |
+| `--code-function` | Code function | Syntax color for function names in code blocks. |
+| `--code-keyword` | Code keyword | Syntax color for language keywords. |
+| `--code-operator` | Code operator | Syntax color for operators in code blocks. |
+| `--code-property` | Code property | Syntax color for object properties in code blocks. |
+| `--code-string` | Code string | Syntax color for string values in code blocks. |
+| `--h1-color` | H1 color | Color of H1 headings. |
+| `--h2-color` | H2 color | Color of H2 headings. |
+| `--h3-color` | H3 color | Color of H3 headings. |
+| `--h4-color` | H4 color | Color of H4 headings. |
+| `--h5-color` | H5 color | Color of H5 headings. |
+| `--h6-color` | H6 color | Color of H6 headings. |
+| `--hr-color` | Horizontal rule | Color of horizontal rule lines (`---`). |
+| `--blockquote-border-color` | Blockquote border | Color of the vertical border in blockquotes. |
+| `--blockquote-color` | Blockquote text | Text color inside blockquotes. |
+| `--blockquote-bg` | Blockquote background | Background color for blockquotes. |
+| `--code-normal` | Inline code text | Text color inside inline code. |
+| `--code-background` | Inline code background | Background color for inline code blocks. |
+| `--text-highlight-bg` | Highlighted text background | Background color of highlighted text. |
+| `--table-background` | Table background | Background color of Markdown tables. |
+| `--table-border-color` | Table border | Border color of Markdown tables. |
+| `--table-header-background` | Table header background | Background color of table headers. |
+| `--table-row-alt-background` | Table alt row background | Alternate row background color in tables. |
+| `--callout-default` | Callout default | Base color for note callouts. |
+| `--callout-info` | Callout info | Base color for info callouts. |
+| `--callout-warning` | Callout warning | Base color for warning callouts. |
+| `--callout-error` | Callout error / danger | Base color for error and danger callouts. |
+| `--callout-success` | Callout success | Base color for success callouts. |
+| `--callout-tip` | Callout tip | Base color for tip and hint callouts. |
+| `--callout-question` | Callout question | Base color for question, help, and FAQ callouts. |
+| `--callout-important` | Callout important | Base color for important callouts. |
+| `--callout-bug` | Callout bug | Base color for bug callouts. |
+| `--callout-example` | Callout example | Base color for example callouts. |
+| `--callout-quote` | Callout quote | Base color for quote and cite callouts. |
+| `--callout-todo` | Callout todo | Base color for todo callouts. |
+| `--callout-summary` | Callout summary | Base color for summary callouts. |
+| `--callout-fail` | Callout fail / failure | Base color for fail, failure, and missing callouts. |
+| `--interactive-normal` | Interactive normal | Background color for buttons and interactive controls. |
+| `--interactive-hover` | Interactive hover | Background color when hovering interactive elements. |
+| `--interactive-accent` | Interactive accent | Accent color for important actions and buttons. |
+| `--interactive-accent-hover` | Interactive accent hover | Accent color when hovering important buttons. |
+| `--interactive-success` | Success color | Color indicating successful operations. |
+| `--interactive-error` | Error color | Color indicating error states. |
+| `--interactive-warning` | Warning color | Color indicating warning states. |
+| `--titlebar-background` | Titlebar background | Background color of the window title bar. |
+| `--titlebar-background-focused` | Titlebar background (focused) | Title bar color when the window is active. |
+| `--titlebar-text-color` | Titlebar text | Text color of the title bar. |
+| `--sidebar-background` | Sidebar background | Background color of sidebars. |
+| `--sidebar-border-color` | Sidebar border | Border color next to sidebars. |
+| `--header-background` | Header background | Background color for pane headers. |
+| `--header-border-color` | Header border | Border color below pane headers. |
+| `--vault-name-color` | Vault name | Color of the vault name displayed in the sidebar. |
+| `--tab-background-active` | Active tab background | Background color of the active tab. |
+| `--tab-text-color` | Tab text | Text color of inactive tabs. |
+| `--tab-text-color-active` | Active tab text | Text color of the active tab. |
+| `--workspace-background-translucent` | Workspace translucent background | Translucent background used behind overlays. |
+| `--cm-notice-text-default` | Default notice text | Default text color for notices unless overridden by rules. |
+| `--cm-notice-bg-default` | Default notice background | Default background color for notices unless overridden by rules. |
+| `--graph-line` | Graph line | Color of connections between notes in graph view. |
+| `--graph-node` | Graph node | Color of nodes representing notes. |
+| `--graph-text` | Graph text | Color of text labels in graph view. |
+| `--graph-node-unresolved` | Graph unresolved node | Color of nodes for unresolved links. |
+| `--graph-node-focused` | Graph focused node | Color of the highlighted node. |
+| `--graph-node-tag` | Graph tag node | Color of nodes representing tags. |
+| `--graph-node-attachment` | Graph attachment node | Color of nodes representing attachments. |
+| `--canvas-background` | Canvas background | Background color of the canvas workspace. |
+| `--canvas-card-label-color` | Canvas card label | Text color of labels displayed on canvas cards. |
+| `--canvas-dot-pattern` | Canvas dot pattern | Color of the dotted grid pattern used in canvas. |
+| `--scrollbar-thumb-bg` | Scrollbar thumb | Color of the draggable scrollbar thumb. |
+| `--scrollbar-active-thumb-bg` | Scrollbar active thumb | Color of the scrollbar thumb when dragged. |
+| `--scrollbar-bg` | Scrollbar background | Background color of the scrollbar track. |
+| `--divider-color` | Divider | Color used for UI separator lines and dividers. |
+
+
+
+## Notes
+
+- Some community themes override Obsidian variables and may affect the final appearance.
+- Theme Engine works best with the default Obsidian theme or imported theme profiles.
+- Custom variables are exported together with profiles.
+
+## Related Documentation
+
+- [Usage Guide](./guide.md)
+- [FAQ](./faq.md)
+- [Main README](../README.md)
diff --git a/src/i18n/locales/ar.ts b/src/i18n/locales/ar.ts
index 374b169..55125c1 100644
--- a/src/i18n/locales/ar.ts
+++ b/src/i18n/locales/ar.ts
@@ -422,8 +422,8 @@ export default {
openSettings: 'فتح نافذة الإعدادات',
},
likeCard: {
- tagline: 'خصّص ثيم Obsidian الخاص بك — عدّل، احفظ وشارك ملفات الألوان',
- description: 'Theme Engine لـ Obsidian — تحكّم بالثيمات وأنظمة الألوان',
+ tagline: 'خصّص ثيم Obsidian الخاص بك - عدّل، احفظ وشارك ملفات الألوان',
+ description: 'Theme Engine لـ Obsidian - تحكّم بالثيمات وأنظمة الألوان',
profilesAndSnippets: 'الملفات ومقتطفات CSS',
customizableColors: 'ألوان قابلة للتخصيص',
daysOfUse: 'أيام الاستخدام',
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index d97db67..f5a5e75 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -428,8 +428,8 @@ export default {
openSettings: 'Open settings tab',
},
likeCard: {
- tagline: 'Theme your Obsidian — edit, save & share color profiles',
- description: 'Theme engine for Obsidian — control themes & color schemes',
+ tagline: 'Theme your Obsidian - edit, save & share color profiles',
+ description: 'Theme engine for Obsidian - control themes & color schemes',
profilesAndSnippets: 'Profiles & snippets',
customizableColors: 'Customizable colors',
daysOfUse: 'Days of use',
diff --git a/src/i18n/locales/fa.ts b/src/i18n/locales/fa.ts
index 1fc4bde..edec7de 100644
--- a/src/i18n/locales/fa.ts
+++ b/src/i18n/locales/fa.ts
@@ -429,8 +429,8 @@
openSettings: 'باز کردن تنظیمات',
},
likeCard: {
- tagline: 'اوبسیدین خود را شخصیسازی کنید — ویرایش، ذخیره و اشتراکگذاری پروفایلهای رنگی',
- description: 'موتور تم برای Obsidian — کنترل کامل تمها و طرحهای رنگی',
+ tagline: 'اوبسیدین خود را شخصیسازی کنید - ویرایش، ذخیره و اشتراکگذاری پروفایلهای رنگی',
+ description: 'موتور تم برای Obsidian - کنترل کامل تمها و طرحهای رنگی',
profilesAndSnippets: 'پروفایلها و اسنیپتها',
customizableColors: 'رنگهای قابل تنظیم',
daysOfUse: 'روزهای استفاده',
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 2f9c97a..9531f70 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -440,9 +440,9 @@
},
likeCard: {
tagline:
- 'Personnalisez votre Obsidian — modifiez, enregistrez et partagez vos profils de couleurs',
+ 'Personnalisez votre Obsidian - modifiez, enregistrez et partagez vos profils de couleurs',
description:
- 'Moteur de thèmes pour Obsidian — contrôlez les thèmes et les palettes de couleurs',
+ 'Moteur de thèmes pour Obsidian - contrôlez les thèmes et les palettes de couleurs',
profilesAndSnippets: 'Profils et extraits',
customizableColors: 'Couleurs personnalisables',
daysOfUse: "Jours d'utilisation",