{"id":26633457,"url":"https://github.com/atomashevic/quarto-dracula","last_synced_at":"2026-01-04T23:41:35.677Z","repository":{"id":257567939,"uuid":"858646295","full_name":"atomashevic/quarto-dracula","owner":"atomashevic","description":"Dracula theme for Quarto HTML documents","archived":false,"fork":false,"pushed_at":"2024-09-17T10:30:59.000Z","size":397,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-17T13:08:26.462Z","etag":null,"topics":["dracula","dracula-color-scheme","dracula-theme","quarto","quarto-template"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomashevic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-09-17T09:29:43.000Z","updated_at":"2024-09-17T10:31:17.000Z","dependencies_parsed_at":"2024-09-17T13:20:43.280Z","dependency_job_id":null,"html_url":"https://github.com/atomashevic/quarto-dracula","commit_stats":null,"previous_names":["atomashevic/quarto-dracula"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomashevic%2Fquarto-dracula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomashevic%2Fquarto-dracula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomashevic%2Fquarto-dracula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomashevic%2Fquarto-dracula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomashevic","download_url":"https://codeload.github.com/atomashevic/quarto-dracula/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294720,"owners_count":20591909,"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":["dracula","dracula-color-scheme","dracula-theme","quarto","quarto-template"],"created_at":"2025-03-24T15:14:54.493Z","updated_at":"2026-01-04T23:41:35.639Z","avatar_url":"https://github.com/atomashevic.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dracula Theme for Quarto HTML Documents\n\n\n\u003cdiv style=\"display: flex; justify-content: center; align-items: center;\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/a37de420-82cf-4e39-b642-5bc7bb191a31\" alt=\"description\" width=\"50%\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/4e4a3869-0e21-40c7-8cc6-0e7640756aa3\" alt=\"description\" width=\"50%\"/\u003e\n\u003c/div\u003e\n\n\nThis is a simple scss file that can be used to apply the [Dracula](https://draculatheme.com/) theme to Quarto HTML documents.\n\nI used the basic colors from the Dracula theme and applied them to the Quarto HTML theme. Also, math font is increased for better readability.\n\nObviously, it looks best when paired with Dracula syntax highlighting for code blocks which is already implemented in Quarto.\n\nYou can see the **live example [here](https://atomasevic.com/dracula-example)**.\n\n## Usage\n\nTo use this theme, simply copy the [dracula.scss](dracula.scss) file to your project and include it in your Quarto configuration file.\n\n```yaml\nproject:\n  type: website\n\nwebsite:\n  title: \"Website Title\"\n\nformat:\n  html:\n    theme: dracula.scss\n    highlight-style: dracula\n```\n\n## Issues\n\n### Callouts are not working\n\nThis piece of code is not working. This is solvable, probably answers can be found here: https://github.com/quarto-dev/quarto-cli/discussions/4755\n\n\n```scss\n// Callout Styles\n.callout {\n  padding: 1em;\n  margin: 1em 0;\n  border-left: 5px solid $secondary !important;\n  background-color: lighten($body-bg, 5%) !important;\n}\n\n.callout-note.callout {\n  border-left-color: $callout-note-border !important;\n  background-color: $callout-note-bg !important;\n}\n\n.callout-warning.callout {\n  border-left-color: $callout-warning-border !important;\n  background-color: $callout-warning-bg !important;\n}\n\n.callout-important.callout {\n  border-left-color: $callout-important-border !important;\n  background-color: $callout-important-bg !important;\n}\n\n.callout-tip.callout {\n  border-left-color: $callout-tip-border !important;\n  background-color: $callout-tip-bg !important;\n}\n\n.callout-caution.callout {\n  border-left-color: $callout-caution-border !important;\n  background-color: $callout-caution-bg !important;\n}\n```\n\nIf you can fix this, PRs are welcome!\n\n### Math font size\n\nIf you find the math font size too big, you can adjust it by changing these lines in the `dracula.scss` file:\n\n```scss\n\n// Math Expressions\n.math {\n  font-size: 120%; // Change this value to adjust the math font size in math blocks\n}\n\n// Increase font size for inline math in paragraphs and lists\np .math, li .math, blockquote .math {\n  font-size: 110%; // Change this value to adjust the inline math font size\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomashevic%2Fquarto-dracula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomashevic%2Fquarto-dracula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomashevic%2Fquarto-dracula/lists"}