obsidian-plugin/yazanammar_obsidian-theme-engine
1
0
Fork 0
mirror of https://github.com/yazanammar/obsidian-theme-engine.git synced 2026-07-22 06:44:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(readme): improve README structure and move detailed docs into docs/

Browse source
This commit is contained in:
YazanAmmar 2026-05-14 20:25:12 +03:00
parent c07bf3ce25
commit bb84512f6e
10 changed files with 961 additions and 379 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

529
README.md
View file

@ -7,53 +7,45 @@
[![GitHub Stars](https://img.shields.io/github/stars/YazanAmmar/obsidian-theme-engine.svg?style=flat&color=yellow)](https://github.com/YazanAmmar/obsidian-theme-engine/stargazers)
[![GitHub Issues](https://img.shields.io/github/issues/YazanAmmar/obsidian-theme-engine.svg?style=flat&color=red)](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.
<p align="center">
<img width="500" alt="Theme Engine Logo" src="assets/theme-engine.png" />
<img width="400" alt="Theme Engine Logo" src="assets/theme-engine.png" />
</p>
**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)** |
| -------------------------------------------------------------- | -------------------------------------------------------------- |
| <img alt="OLED Matrix Preview" src="assets/oled-matrix.png" /> | <img alt="Citrus Zest Preview" src="assets/citruz-zest.png" /> |
```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)** |
| -------------------------------------------------------------- | -------------------------------------------------------------- |
| <img alt="OLED Matrix Preview" src="assets/oled-matrix.png" /> | <img alt="Citrus Zest Preview" src="assets/citruz-zest.png" /> |
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)**
<details> <summary><strong>Click to expand the full list of supported CSS variables</strong></summary>
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
</details>
## 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: `<YourVault>/.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
<YourVault>/.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**: <https://github.com/YazanAmmar/obsidian-theme-engine>
- **Issues & Feature Requests**: <https://github.com/YazanAmmar/obsidian-theme-engine/issues>
- **Telegram Channel**: <https://t.me/ThemeEngine>
- **Support My Open Source Work**: <https://limitra.xyz/#support>

173
docs/faq.md Normal file
View file

@ -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)

244
docs/guide.md Normal file
View file

@ -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)

85
docs/hotkeys.md Normal file
View file

@ -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)

126
docs/tips.md Normal file
View file

@ -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)

167
docs/variables.md Normal file
View file

@ -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
<details>
<summary><strong>Click to expand the full variable list</strong></summary>
| 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. |
</details>
## 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)

4
src/i18n/locales/ar.ts
View file

@ -422,8 +422,8 @@ export default {
openSettings: 'فتح نافذة الإعدادات',
},
likeCard: {
tagline: 'خصّص ثيم Obsidian الخاص بك — عدّل، احفظ وشارك ملفات الألوان',
description: 'Theme Engine لـ Obsidian — تحكّم بالثيمات وأنظمة الألوان',
tagline: 'خصّص ثيم Obsidian الخاص بك - عدّل، احفظ وشارك ملفات الألوان',
description: 'Theme Engine لـ Obsidian - تحكّم بالثيمات وأنظمة الألوان',
profilesAndSnippets: 'الملفات ومقتطفات CSS',
customizableColors: 'ألوان قابلة للتخصيص',
daysOfUse: 'أيام الاستخدام',

4
src/i18n/locales/en.ts
View file

@ -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',

4
src/i18n/locales/fa.ts
View file

@ -429,8 +429,8 @@
openSettings: 'باز کردن تنظیمات',
},
likeCard: {
tagline: 'اوبسیدین خود را شخصی‌سازی کنید — ویرایش، ذخیره و اشتراک‌گذاری پروفایل‌های رنگی',
description: 'موتور تم برای Obsidian — کنترل کامل تم‌ها و طرح‌های رنگی',
tagline: 'اوبسیدین خود را شخصی‌سازی کنید - ویرایش، ذخیره و اشتراک‌گذاری پروفایل‌های رنگی',
description: 'موتور تم برای Obsidian - کنترل کامل تم‌ها و طرح‌های رنگی',
profilesAndSnippets: 'پروفایل‌ها و اسنیپت‌ها',
customizableColors: 'رنگ‌های قابل تنظیم',
daysOfUse: 'روزهای استفاده',

4
src/i18n/locales/fr.ts
View file

@ -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",