{"id":29045560,"url":"https://github.com/gapmiss/custom-theme-studio","last_synced_at":"2026-02-11T00:07:45.723Z","repository":{"id":301270260,"uuid":"1008720267","full_name":"gapmiss/custom-theme-studio","owner":"gapmiss","description":"An Obidian.md plugin to create and customize themes with a built-in CSS editor. Modify colors, styles, and export your custom theme.","archived":false,"fork":false,"pushed_at":"2025-06-26T02:03:13.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T02:38:55.101Z","etag":null,"topics":["obsidian","obsidian-md","obsidian-plugin","obsidian-theme"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gapmiss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-26T01:59:28.000Z","updated_at":"2025-06-26T02:03:15.000Z","dependencies_parsed_at":"2025-06-26T02:39:00.904Z","dependency_job_id":"e6e12ff3-e19b-4a2c-85bc-3cc422710302","html_url":"https://github.com/gapmiss/custom-theme-studio","commit_stats":null,"previous_names":["gapmiss/custom-theme-studio"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gapmiss/custom-theme-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fcustom-theme-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fcustom-theme-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fcustom-theme-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fcustom-theme-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gapmiss","download_url":"https://codeload.github.com/gapmiss/custom-theme-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fcustom-theme-studio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262103343,"owners_count":23259439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["obsidian","obsidian-md","obsidian-plugin","obsidian-theme"],"created_at":"2025-06-26T16:37:52.262Z","updated_at":"2026-02-11T00:07:45.706Z","avatar_url":"https://github.com/gapmiss.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Custom Theme Studio\n\nA complete theme design studio for Obsidian. Create, customize, and export professional themes with visual tools, live CSS editing, and instant feedback—all without leaving your workspace.\n\n## Features at a Glance\n\n| Feature              | Description                                                                                  |\n| -------------------- | -------------------------------------------------------------------------------------------- |\n| **CSS Variables**    | Edit colors, fonts, and other UI styles. Variables are searchable, filterable by category, with live counter updates. |\n| **Font Import**      | Import custom fonts and create base64 `@font-face` rules for your theme.                     |\n| **Live Editor**      | Ace editor with syntax highlighting, auto-complete, Prettier formatting, and built-in color picker.               |\n| **Visual Tools**     | Pick elements to style with configurable selector generation, preview changes in real-time, freeze UI for inspection.              |\n| **Theme Management** | Enable, disable, switch themes, or export as CSS with a manifest and Prettier formatting.                            |\n| **Settings**         | Backup, import/export, reset customizations, toggle themes with reactive updates.                                  |\n\n---\n\n## Detailed Features\n\n### CSS Variables\n\n- Edit built-in CSS variables for colors, fonts, and UI components\n- Organized into categories: components, editor, foundations, plugins, window, dark/light themes\n- Search and filter to quickly find variables with real-time result counter\n- Add custom variables with live counter updates\n- Color picker for HEX values with reactive updates\n- Category badges show item counts that update automatically\n- Tag-based filtering for quick navigation\n\n### CSS Rules\n\n- **Smart Element Selector** with configurable selector generation:\n  - Three selector styles: Minimal (short), Balanced (moderate), Specific (detailed)\n  - Toggle preference for classes vs. data attributes\n  - Configure tag name inclusion\n  - Exclude unwanted attributes with wildcard patterns\n  - Handles special characters and aria-labels properly\n- Advanced CSS editor with syntax highlighting and auto-formatting\n- **In-editor Prettier formatting** with preserved undo/redo history\n- Smart cursor positioning when editing (auto-places cursor before closing brace)\n- Visual focus indicators for active editor\n- Live preview while editing with configurable debounce delay\n- Search and filter rules with result counter\n- Save and manage multiple custom rules with auto-scroll to newly created items\n- Apply imported fonts to any element\n\n### CSS Editor\n\n- Built-in Ace editor with syntax highlighting and auto-complete\n- **One-click Prettier formatting** with undo support\n- Customize editor settings: theme, font size, tab width (2 or 4 spaces)\n- Optional line numbers and word wrap\n- Embedded color picker for Ace editor\n- Visual focus state with accent-colored border\n- Smart cursor positioning respects tab width settings\n- Keyboard shortcuts for faster editing\n- Auto-completion includes all Obsidian variables\n- Configurable debounce delay for auto-apply changes\n\n### Theme Export\n\n- Export your theme as a CSS file\n- Generate a manifest file for distribution\n- Copy CSS or manifest to clipboard\n- Configure metadata: name, author, URL\n\n### Settings Management\n\n- Import/export settings for backup or sharing\n- Reset theme customizations\n- Toggle theme on/off globally\n\n## Installation\n\n[Available on Obsidian.md/plugins](https://obsidian.md/plugins?search=custom-theme-studio)\n\n### From Obsidian\n\n1. Open Obsidian Settings\n2. Go to Community Plugins and disable Safe Mode\n3. Click Browse and search for \"Custom Theme Studio\"\n4. Install the plugin and enable it\n\n### Manual Installation\n\n1. Download `main.js`, `manifest.json` \u0026 `styles.css` from the latest [release](https://github.com/gapmiss/custom-theme-studio/releases/)\n2. Create a new folder `/path/to/vault/.obsidian/plugins/custom-theme-studio`\n3. Move all 3 files to `/path/to/vault/.obsidian/plugins/custom-theme-studio`\n4. Settings \u003e Community plugins \u003e Reload plugins\n5. Enable the \"Custom Theme Studio\" plugin in the community plugin list\n\n### Via BRAT (Beta Reviewer's Auto-update Tool):\n\n1. Ensure the [BRAT](https://github.com/TfTHacker/obsidian42-brat) plugin is installed\n2. Trigger the command Obsidian42 - BRAT: Add a beta plugin for testing\n3. Enter this repository, gapmiss/custom-theme-studio\n4. Enable the \"Custom Theme Studio\" plugin in the community plugin list\n\n## Usage\n\n### Opening the Theme Studio\n\nAfter installation, you can access Custom Theme Studio in several ways:\n\n- **Ribbon Icon**: Click the paintbrush icon in the left ribbon\n- **Command Palette**: Use `Ctrl/Cmd + P` and search for \"Custom Theme Studio: Open view\"\n- **Hotkey**: Assign a custom hotkey in Settings \u003e Hotkeys for \"Custom Theme Studio: Open view\"\n\n### Getting Started\n\n1. **Open the plugin view** using one of the methods above\n2. **Enable your custom theme** by toggling the switch at the top of the view\n3. **Start customizing** using the three main sections:\n\n### CSS Variables\n\nEdit Obsidian's built-in CSS variables to customize colors, fonts, and UI elements:\n\n- **Browse categories**: Variables are organized by components, editor, foundations, plugins, etc.\n- **Search variables**: Use the search box to quickly find specific variables\n- **Color picker**: Click the color square next to HEX values for visual color selection\n- **Real-time preview**: Changes apply immediately when \"Auto-apply changes\" is enabled\n\n### CSS Rules\n\nCreate custom CSS rules to style specific elements:\n\n- **Element selector**: Use `Ctrl/Cmd + P` → \"Custom Theme Studio: Select an element for new CSS rule\" to visually pick elements\n  - Configure selector generation in settings: choose between Minimal, Balanced, or Specific styles\n  - Prefer classes over attributes or vice versa\n  - Exclude specific attributes using wildcard patterns (e.g., `data-tooltip-*`)\n- **CSS editor**: Write custom CSS with syntax highlighting and auto-completion\n  - Click the sparkles icon (✨) to format CSS with Prettier (undoable with Ctrl/Cmd+Z)\n  - Cursor automatically positions for optimal editing\n  - Visual focus indicator shows when editor is active\n- **Live preview**: See changes in real-time as you type (configurable debounce delay)\n- **Font import**: Import custom fonts and generate @font-face rules\n\n### Theme Export\n\nExport your customizations as a complete Obsidian theme:\n\n- **Theme metadata**: Set name, author, and URL information\n- **Export options**: Choose to include/exclude disabled rules and enable Prettier formatting\n- **Download files**: Get both CSS and manifest.json files for theme distribution\n\n### Keyboard Shortcuts \u0026 Commands\n\n- **Toggle custom theme**: Quickly enable/disable your theme\n- **Select element**: Pick UI elements for styling\n- **Freeze Obsidian**: Freeze the interface for 5 seconds to inspect hover states\n- **Import CSS snippet**: Import existing CSS snippets from your vault\n\n### Pro Tips\n\n- **Backup your work**: Use Settings \u003e Export settings before major changes\n- **Element inspection**: Use the \"Freeze Obsidian\" command to inspect elements that disappear on hover\n- **Search efficiently**: Use the search boxes in CSS Variables and CSS Rules sections - counters show results in real-time\n- **Test responsively**: Toggle your theme on/off to compare changes\n- **Format while editing**: Use the sparkles icon (✨) in the CSS editor to format your code with Prettier - it's undoable!\n- **Customize selectors**: Configure element selector behavior in settings for your preferred selector style\n- **Exclude noisy attributes**: Add patterns like `data-tooltip-*` to excluded attributes for cleaner selectors\n- **Smart cursor**: When editing CSS rules, the cursor automatically positions for adding new properties\n- **Adjust debounce**: Fine-tune the auto-apply delay slider in settings for optimal performance\n- **Share themes**: Export your theme and share the CSS/manifest files with others\n\n## Credits\n\nSome code inspired by and derived from:\n\n- [RavenHogWarts/obsidian-ace-code-editor](https://github.com/RavenHogWarts/obsidian-ace-code-editor)\n- [chrisgrieser/obsidian-theme-design-utilities](https://github.com/chrisgrieser/obsidian-theme-design-utilities)\n- [Yuichi-Aragi/Version-Control](https://github.com/Yuichi-Aragi/Version-Control)\n- [easylogic/ace-colorpicker](https://github.com/easylogic/ace-colorpicker)\n- [Zachatoo/obsidian-css-editor](https://github.com/Zachatoo/obsidian-css-editor)\n\nThank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fcustom-theme-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapmiss%2Fcustom-theme-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fcustom-theme-studio/lists"}