From bb84512f6ebc65ca7c6f3e61b34ead382c3d3e64 Mon Sep 17 00:00:00 2001 From: YazanAmmar <193124783+YazanAmmar@users.noreply.github.com> Date: Thu, 14 May 2026 20:25:12 +0300 Subject: [PATCH] docs(readme): improve README structure and move detailed docs into docs/ --- README.md | 529 ++++++++++++----------------------------- docs/faq.md | 173 ++++++++++++++ docs/guide.md | 244 +++++++++++++++++++ docs/hotkeys.md | 85 +++++++ docs/tips.md | 126 ++++++++++ docs/variables.md | 167 +++++++++++++ src/i18n/locales/ar.ts | 4 +- src/i18n/locales/en.ts | 4 +- src/i18n/locales/fa.ts | 4 +- src/i18n/locales/fr.ts | 4 +- 10 files changed, 961 insertions(+), 379 deletions(-) create mode 100644 docs/faq.md create mode 100644 docs/guide.md create mode 100644 docs/hotkeys.md create mode 100644 docs/tips.md create mode 100644 docs/variables.md diff --git a/README.md b/README.md index 4be3207..0abb21d 100644 --- a/README.md +++ b/README.md @@ -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. -

- Theme Engine Logo + Theme Engine Logo

+**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)** | +| -------------------------------------------------------------- | -------------------------------------------------------------- | +| OLED Matrix Preview | Citrus Zest Preview | -```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)** | -| -------------------------------------------------------------- | -------------------------------------------------------------- | -| OLED Matrix Preview | Citrus Zest Preview | +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",