{"id":51774182,"url":"https://github.com/calebephrem/github-syntax-themes","last_synced_at":"2026-07-20T04:31:32.417Z","repository":{"id":364521396,"uuid":"1267786922","full_name":"calebephrem/github-syntax-themes","owner":"calebephrem","description":"A collection of syntax themes for GitHub's code blocks, PR diffs, and markdown code snippets. Install the extension, then pick your favorite theme from the popup to apply it across GitHub's interface.","archived":false,"fork":false,"pushed_at":"2026-06-13T09:54:07.000Z","size":5429,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-13T11:25:45.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/calebephrem.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":null,"dco":null,"cla":null}},"created_at":"2026-06-12T21:29:23.000Z","updated_at":"2026-06-13T09:54:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/calebephrem/github-syntax-themes","commit_stats":null,"previous_names":["calebephrem/github-syntax-themes"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/calebephrem/github-syntax-themes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebephrem%2Fgithub-syntax-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebephrem%2Fgithub-syntax-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebephrem%2Fgithub-syntax-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebephrem%2Fgithub-syntax-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebephrem","download_url":"https://codeload.github.com/calebephrem/github-syntax-themes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebephrem%2Fgithub-syntax-themes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35674029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"ssl_error","status_checked_at":"2026-07-20T02:08:09.736Z","response_time":111,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-07-20T04:31:31.548Z","updated_at":"2026-07-20T04:31:32.409Z","avatar_url":"https://github.com/calebephrem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"./public/icon-stroke.png\" alt=\"GitHub Syntax Themes\" width=\"200\" height=\"200\" /\u003e\n\n  \u003cp align=\"center\" style=\"margin-top: 12px;\"\u003e\n    \u003cstrong\u003e\u003csmall\u003eGitHub Syntax Themes\u003c/small\u003e\u003c/strong\u003e\n  \u003c/p\u003e\n\n\u003c/div\u003e\n\n# GitHub Syntax Themes\n\nA browser extension that lets you apply custom syntax highlighting themes to GitHub code blocks, gists, and Markdown snippets.\n\nIt works by injecting CSS overrides into GitHub’s existing syntax system and mapping theme values to GitHub’s internal token classes (`.pl-*`) and modern PrettyLights CSS variables.\n\n## What It Does\n\nGitHub has its own built-in syntax highlighting system.\n\nThis extension overrides it by:\n\n- Mapping theme colors to GitHub token classes (`.pl-c`, `.pl-k`, `.pl-s`, etc.)\n- Injecting CSS variables for GitHub’s PrettyLights syntax system\n- Applying themes across:\n  - Code blocks\n  - Pull request diffs\n  - File views\n  - Markdown snippets\n\nIn short:\n\nYou choose a theme → GitHub gets recolored\n\n## Installation\n\nGitHub Syntax Themes can be installed on any Chromium-based browser (Chrome, Edge, Opera, Brave, Vivaldi, Arc, etc.) and Firefox.\n\n### 1. Download the Extension\n\nClone the repository and build it:\n\n```bash\ngit clone https://github.com/calebephrem/github-syntax-themes.git\ncd github-syntax-themes\n\nnpm install\n\n# For chromium based browsers:\nnpm run build\n\n# For firefox:\nnpm run build:firefox\n```\n\nAfter building, a production-ready extension will be generated inside the `dist/` directory.\n\n### 2. Open Your Browser's Extension Manager\n\nOpen the extension management page for your browser:\n\n| Browser | URL                   |\n| ------- | --------------------- |\n| Chrome  | `chrome://extensions` |\n| Edge    | `edge://extensions`   |\n| Opera   | `opera://extensions`  |\n| Brave   | `brave://extensions`  |\n| Vivaldi | `chrome://extensions` |\n| Arc     | `chrome://extensions` |\n| Firefox | `about:addons`        |\n\n### 3. Enable Developer Mode\n\nFor Chromium-based browsers:\n\n1. Open the Extensions page.\n2. Enable **Developer Mode**.\n3. New options such as **Load unpacked** will appear.\n\nFirefox users can skip this step.\n\n### 4. Install the Extension\n\n#### Chromium Browsers\n\n1. Click **Load unpacked**.\n2. Go to the extension's `dist/` folder and select `chrome-mv3`.\n3. The extension should appear immediately in your installed extensions list.\n\n#### Firefox\n\n1. Open `about:addons`.\n2. Click the gear icon.\n3. Select **Install Add-on From File...**\n4. Go to the extension's `dist/` folder and select `firefox-mv2`.\n\n### 5. Start Using Themes\n\n1. Open any GitHub repository.\n2. Click the GitHub Syntax Themes icon in your browser toolbar.\n3. Choose a theme.\n4. Voila.\n\nYour selected theme will automatically be applied to:\n\n- Repository files\n- Pull request diffs\n- Markdown code blocks\n- GitHub code views\n\n### Updating\n\nWhen a new version is released:\n\n1. Pull down the latest release.\n2. Reload the extension from your browser's extension page.\n\nYour saved theme preferences will remain intact.\n\n### Uninstalling\n\nYou can remove the extension at any time from your browser's extension manager.\n\nRemoving the extension restores GitHub's default syntax highlighting immediately.\n\nYou can install **GitHub Syntax Themes** depending on your browser.\n\n## Themes\n\nThemes are **not bundled inside the extension**.\n\nInstead, they are pulled from a separate theme repository:\n\n👉 https://github.com/calebephrem/github-syntax-theme-store\n\nEach theme is defined like:\n\n```ts\nsyntaxHighlighting: {\n  keyword: \"#ff79c6\",\n  string: \"#f1fa8c\",\n  comment: \"#6272a4\",\n  functionName: \"#50fa7b\"\n}\n```\n\nThe extension automatically converts these values into GitHub-compatible styles.\n\n## How It Works\n\nTwo styling layers are applied:\n\n### 1. Legacy GitHub token classes\n\n```css\n.pl-k {\n  color: #ff79c6 !important;\n}\n```\n\n### 2. Modern PrettyLights CSS variables\n\n```css\n:root {\n  --color-prettylights-syntax-keyword: #ff79c6 !important;\n}\n```\n\nThis ensures compatibility across both old and new GitHub UI systems.\n\n## Features\n\n- Fully custom GitHub syntax highlighting\n- Lightweight CSS injection (no DOM rewriting)\n- Instant theme switching\n- Works across code, diffs, and markdown\n- Multi-browser support via WXT\n\n## Screenshots\n\n## ![Quantum Theme](./src/assets/ss1.png)\n\n## ![Dracula Theme](./src/assets/ss2.png)\n\n## ![Winter Is Coming](./src/assets/ss3.png)\n\n## ![Gist Example](./src/assets/ss4.png)\n\n## Tech Stack\n\n- WXT (browser extension framework)\n- React (popup UI)\n- TypeScript\n- TailwindCSS\n- Lucide icons\n\n## Development\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nRun development build:\n\n```bash\nnpm run dev\n```\n\nBuild extension:\n\n```bash\nnpm run build\n```\n\n## Contributing\n\nWe welcome contributions to both the browser extension and the theme collection.\nIf you’d like to add a new theme or improve an existing one, please submit it to the dedicated theme repository:\n\n👉 https://github.com/calebephrem/github-syntax-theme-store\n\n## License\n\nMIT © Caleb Ephrem\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebephrem%2Fgithub-syntax-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebephrem%2Fgithub-syntax-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebephrem%2Fgithub-syntax-themes/lists"}