{"id":50476344,"url":"https://github.com/theviviana/obsidian-theme-framer","last_synced_at":"2026-06-01T14:00:27.333Z","repository":{"id":359926501,"uuid":"1248008392","full_name":"TheViviana/Obsidian-Theme-Framer","owner":"TheViviana","description":"me","archived":false,"fork":false,"pushed_at":"2026-06-01T06:11:29.000Z","size":3702,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-01T06:27:27.826Z","etag":null,"topics":["accent-colors","framer","obsidian","obsidian-theme","pink","wcag"],"latest_commit_sha":null,"homepage":"https://community.obsidian.md","language":"CSS","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/TheViviana.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,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-24T04:16:07.000Z","updated_at":"2026-06-01T06:11:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/TheViviana/Obsidian-Theme-Framer","commit_stats":null,"previous_names":["theviviana/obsidian-theme-framer"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/TheViviana/Obsidian-Theme-Framer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheViviana%2FObsidian-Theme-Framer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheViviana%2FObsidian-Theme-Framer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheViviana%2FObsidian-Theme-Framer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheViviana%2FObsidian-Theme-Framer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheViviana","download_url":"https://codeload.github.com/TheViviana/Obsidian-Theme-Framer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheViviana%2FObsidian-Theme-Framer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33777971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accent-colors","framer","obsidian","obsidian-theme","pink","wcag"],"created_at":"2026-06-01T14:00:16.766Z","updated_at":"2026-06-01T14:00:27.325Z","avatar_url":"https://github.com/TheViviana.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Framer Theme\n\nA clean, polished Obsidian theme inspired by [Framer](https://www.framer.com)'s design system. The theme adapts to both dark and light appearances with carefully curated accent colors — hot pink in dark mode and rose gold in light mode. Every color has been tuned for WCAG-compliant contrast while maintaining a soft, feminine aesthetic.\n\nBuilt-in CSS classes let you switch accent colors on the fly: `accent-blue`, `accent-cyan`, and `accent-purple` are fully supported for both heading gradients and canvas node colors.\n\nThe theme also includes optional style snippets: a floating status bar, Framer-style drag indicators, a component browser search panel, and more.\n\n\u003e **Version 1.2.4** — see [AGENTS.md](./AGENTS.md) for full changelog.\n\n## Screenshots\n\n![Framer Theme Dark](screenshot.png)\n\n*Dark mode with hot pink accents*\n\u003c!-- Replace with a light mode screenshot once available --\u003e\n\n## Features\n\n- **Dark mode**: Hot pink accents (`#FF8FB8`) on black canvas\n- **Light mode**: Rose gold accents (`#C4837A`) on warm cream background (`#FDF8F5`)\n- **Accent variants**: Built-in classes for `accent-blue`, `accent-cyan`, `accent-purple` — switch via Style Settings or custom CSS\n- **Floating status bar**: Optionally slides in from the right on hover\n- **Framer-style UI**: Sidebar, panels, and component browser borrow visual patterns from Framer's design tool\n- **WCAG-friendly**: All color pairs pass AA contrast requirements in both appearances\n- **Smooth transitions**: Subtle animations on hover, selection, and panel interactions\n- **Canvas support**: Color-matched canvas node backgrounds and connection points\n- **CodeMirror 6**: Properly styled editor with theme-aware syntax highlighting\n\n## Installation\n\n### From Obsidian Community Themes\n\n1. Open Obsidian → Settings → Appearance\n2. Under **Themes**, click **Manage**\n3. Click **Browse** and search for \"Framer\"\n4. Click **Install**\n\n### Manual Installation\n\n1. Download or clone this repository\n2. Copy the `Framer/` folder into your vault's `.obsidian/themes/` directory\n3. Go to Settings → Appearance → Themes and select **Framer**\n\n## Usage\n\n### Accent Variants\n\nAdd any of these classes to your `body` element (via CSS snippets or Style Settings):\n\n```css\nbody.accent-blue   { /* replaces brand with #42A5F5 */ }\nbody.accent-cyan   { /* replaces brand with #00BCD4 */ }\nbody.accent-purple { /* replaces brand with #AB47BC */ }\n```\n\nEach variant updates heading gradients, canvas node colors, and all brand-colored UI elements.\n\n### Optional Snippets\n\nThe theme includes several built-in snippet classes (toggle via Style Settings):\n\n- `body.framer-floating-statusbar` — Status bar auto-hides and slides in from the right\n- `body.framer-drag-indicator` — Framer-style dot indicators on drag-and-drop operations\n- `body.framer-search` — Sidebar search styled like Framer's component browser\n- `body.framer-tags-panel` — Tags panel with dot indicators\n- `body.framer-backlinks` — Embedded notes with frame-style borders and title bars\n\n## Color Palette\n\n## Translucency Support\n\nWhen Obsidian's **Translucent window** setting is enabled, Framer applies native macOS vibrancy (frosted glass) across the entire interface:\n\n- **Dark mode**: `rgba(0, 0, 0, 0.4)` tint with macOS blur\n- **Light mode**: `rgba(253, 248, 245, 0.7)` tint with macOS blur\n- **Settings panel**: Background blurred with `backdrop-filter`; modal gets increased opacity for readability\n- **All UI regions**: Unified single-layer translucency — no uneven stacking between sidebar, editor, and panels\n\n| Token | Dark | Light |\n|-------|------|-------|\n| `--color-bg` | `#000000` | `#FDF8F5` |\n| `--color-surface` | `#000000` | `#FFFFFF` |\n| `--color-brand` | `#FF8FB8` | `#C4837A` |\n| `--color-hot` | `#FF5FA2` | `#D49088` |\n| `--color-text` | `#E7E0E5` | `#4A3F3D` |\n\n![Framer Theme Dark](translucent-bg.png)\n\n## Changelog\n\nSee [AGENTS.md](./AGENTS.md) for the version history and detailed change log.\n\n## Credits\n\nCreated by [TheViviana](https://github.com/TheViviana).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheviviana%2Fobsidian-theme-framer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheviviana%2Fobsidian-theme-framer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheviviana%2Fobsidian-theme-framer/lists"}