{"id":14651249,"url":"https://github.com/gadenbuie/quarto-auto-dark","last_synced_at":"2025-09-09T05:39:32.346Z","repository":{"id":255014298,"uuid":"848269658","full_name":"gadenbuie/quarto-auto-dark","owner":"gadenbuie","description":"Auto dark mode for Quarto websites and slides","archived":false,"fork":false,"pushed_at":"2025-07-21T14:06:38.000Z","size":6,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-21T16:30:29.157Z","etag":null,"topics":["dark-mode","quarto","quarto-extension","quarto-filter"],"latest_commit_sha":null,"homepage":"http://pkg.garrickadenbuie.com/quarto-auto-dark/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gadenbuie.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-08-27T13:04:22.000Z","updated_at":"2025-07-21T14:06:41.000Z","dependencies_parsed_at":"2024-08-27T14:42:52.609Z","dependency_job_id":null,"html_url":"https://github.com/gadenbuie/quarto-auto-dark","commit_stats":null,"previous_names":["gadenbuie/quarto-auto-dark"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gadenbuie/quarto-auto-dark","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fquarto-auto-dark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fquarto-auto-dark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fquarto-auto-dark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fquarto-auto-dark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gadenbuie","download_url":"https://codeload.github.com/gadenbuie/quarto-auto-dark/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fquarto-auto-dark/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274250095,"owners_count":25249393,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"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":["dark-mode","quarto","quarto-extension","quarto-filter"],"created_at":"2024-09-11T05:00:54.041Z","updated_at":"2025-09-09T05:39:32.322Z","avatar_url":"https://github.com/gadenbuie.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Auto Dark Mode for Quarto\n\n\nBring automatic dark mode to Quarto web documents (webpages, slides,\narticles, etc.).\n\n## Installing\n\n``` bash\nquarto add gadenbuie/quarto-auto-dark\n```\n\nThis will install the extension under the `_extensions` subdirectory. If\nyou’re using version control, you will want to check in this directory.\n\n## Using\n\nTo use the extension, include `auto-dark` in the list of filters in your\ndocument metadata or in your `_quarto.yml` configuration file.\n\n``` yaml\nfilters:\n  - auto-dark\n```\n\nWhen a user visits your webpage or slides at night — or whenever their\noperating system is set to use dark mode — an automatic dark mode is\napplied.\n\nFor best results in Quarto webpages, choose a single light-based theme\nfor your page or site, and do not use [Quarto’s dark mode\nfeature](https://quarto.org/docs/websites/website-tools.html#dark-mode).\n\n``` yaml\n# Do this\ntheme:\n  light: flatly\n\n# Don't do this\ntheme:\n  light: flatly\n  dark: darkly\n```\n\n## Example\n\nThis page is an example! Try changing your system settings to dark mode,\nor just come back to this page tomorrow or later tonight, to see auto\ndark mode in action.\n\n## About\n\nQuarto auto dark mode builds on a CSS-only approach to dark mode\noutlined by [Aral Balkan](https://ar.al/) in his post [Implementing dark\nmode in a handful of lines of CSS with CSS\nfilters](https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/).\n\nAuto dark mode does not provide a light/dark switch and we recommend you\ndo not include one. Instead follow the user’s operating system. All\nphones, tablets and modern operating systems provide conveniences to\nchoose between light and dark user interfaces.\n\nOur view is that a light/dark switch is only necessary if your users\nneed to choose a color scheme that differs from the state of their\noperating system, which is increasingly unlikely for most websites.\n\nAt its core, auto dark mode is built on two key ideas:\n\n1.  First, it uses a `prefers-color-scheme: dark` CSS media query to set\n    styles when the operating system is in dark mode. You can use this\n    approach in your own CSS styles:\n\n    ``` css\n    /* Make bold things red by default */\n    strong {\n      color: \"red\"\n    }\n\n    @media (prefers-color-scheme: dark) {\n     /* In dark mode, use blue for bold text */\n     strong {\n       color: \"blue\"\n     }\n    }\n\n    @media (prefers-color-scheme: light) {\n      /* You can also be specific about light mode */\n      strong {\n       color: \"green\"\n      }\n    }\n    ```\n\n2.  In dark mode, auto dark mode inverts all of the colors on the page,\n    while trying to keep hue consistent.\n\n    ``` css\n    @media (prefers-color-scheme: dark) {\n      /* Invert all elements on the body while attempting to not alter the hue substantially. */\n      body {\n        filter: invert(100%) hue-rotate(180deg);\n      }\n    }\n    ```\n\n    This is definitely a big hammer approach to dark mode, but in most\n    cases it works well and you can read more about it in [Aral’s blog\n    post](https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/).\n\n    If you want a particular element to retain its original colors,\n    apply the same filter rule to repeat the inversion. Auto dark mode\n    does this for images, SVGs and icons by default.\n\n    ``` css\n    @media (prefers-color-scheme: dark) {\n      /* Do not invert media (revert the invert). */\n      img, video, iframe, svg:not(.bi, .fa) {\n        filter: invert(100%) hue-rotate(180deg);\n      }\n    }\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fquarto-auto-dark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgadenbuie%2Fquarto-auto-dark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fquarto-auto-dark/lists"}