PHPackages sven/commonmark-dark-mode-images - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Parsing & Serialization](/categories/parsing) 4. / 5. sven/commonmark-dark-mode-images Abandoned → [sven/commonmark-image-media-queries](/?search=sven%2Fcommonmark-image-media-queries)ArchivedLibrary[Parsing & Serialization](/categories/parsing) sven/commonmark-dark-mode-images ================================ Use different images in light- and dark mode in CommonMark-rendered Markdown v1.0.0(2y ago)08MITPHP Since Jul 11Pushed 2y ago1 watchersCompare [ Source](https://github.com/svenluijten/commonmark-dark-mode-images)[ Packagist](https://packagist.org/packages/sven/commonmark-dark-mode-images)[ RSS](/packages/sven-commonmark-dark-mode-images/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (3)Versions (2)Used By (0) CommonMark Dark Mode Images Extension ===================================== [](#commonmark-dark-mode-images-extension) [![Latest Version on Packagist](https://camo.githubusercontent.com/daab7fd49557f9f10b01d0ca934c38ab4e7d3acd5a57efe01b6c45d26a9478db/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7376656e2f636f6d6d6f6e6d61726b2d6461726b2d6d6f64652d696d616765732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sven/commonmark-dark-mode-images)[![Total Downloads](https://camo.githubusercontent.com/bdd41749d96308a1184d7f2d6db7e96af86ab9c9554e1e5bb3ae7c70195b44ba/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7376656e2f636f6d6d6f6e6d61726b2d6461726b2d6d6f64652d696d616765732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sven/commonmark-dark-mode-images)[![Software License](https://camo.githubusercontent.com/6c711032aff1ca0eb6b211aa6cb3649ce7fd64a7714e1181d4bb457f9680e7cf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Build Status](https://camo.githubusercontent.com/de738253ed9ff370b8ca4ead7f0bf163b8c1fefcbe2b918d7d7bc2bf8ab6e237/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7376656e6c75696a74656e2f636f6d6d6f6e6d61726b2d6461726b2d6d6f64652d696d616765732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e267374796c653d666c61742d737175617265)](https://github.com/svenluijten/commonmark-dark-mode-images/actions/workflows/run-tests.yml) ⚠️ This package is abandoned. Use [`sven/commonmark-image-media-queries`](https://github.com/svenluijten/commonmark-image-media-queries) instead ⚠️ =================================================================================================================================================== [](#️-this-package-is-abandoned-use-svencommonmark-image-media-queries-instead-️) This [CommonMark](https://commonmark.thephpleague.com) extension allows you to determine what images to show in dark- or light mode in Markdown converted using CommonMark. Installation ------------ [](#installation) Via [composer](http://getcomposer.org): ``` composer require sven/commonmark-dark-mode-images ``` Usage ----- [](#usage) To enable the extension, first make sure [the `Attributes` extension](https://commonmark.thephpleague.com/2.4/extensions/attributes/)that ships with CommonMark is enabled. Then, add the extension to the CommonMark environment: ``` use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension; $environment->addExtension(new DarkModeImagesExtension()); ``` You'll have to apply some classes to your Markdown images to indicate to this extension that they should be converted: ``` ![Screenshot of a settings dialog](/images/settings-light.jpg){.light-image} ![dark](/images/settings-dark.jpg){.dark-image} ``` These `{.light-image}` and `{.dark-image}` tags are part of [the `Attributes` extension](https://commonmark.thephpleague.com/2.4/extensions/attributes/). They apply classes to the converted `` elements, which this extension uses to do its magic. The resulting HTML will look something like this: ``` ``` And the result in the browser: Click to reveal[![Side by side](https://private-user-images.githubusercontent.com/11269635/253286618-b05f3a5d-ea14-463d-956a-43643166c45f.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NDg0MjYsIm5iZiI6MTc3NDY0ODEyNiwicGF0aCI6Ii8xMTI2OTYzNS8yNTMyODY2MTgtYjA1ZjNhNWQtZWExNC00NjNkLTk1NmEtNDM2NDMxNjZjNDVmLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzI3VDIxNDg0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZkOTNjNGNmZjNhN2VlZmVhY2NjZmQ1OGQ4NjZiMzkxZjgyMzdlN2M2N2UwYmY5MzlkMzViZmQyYzE0NTdmZWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.JBvPJFviQkHSozTHKSgSboTEzYwRtxh1nDCeNX2RpgY)](https://private-user-images.githubusercontent.com/11269635/253286618-b05f3a5d-ea14-463d-956a-43643166c45f.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NDg0MjYsIm5iZiI6MTc3NDY0ODEyNiwicGF0aCI6Ii8xMTI2OTYzNS8yNTMyODY2MTgtYjA1ZjNhNWQtZWExNC00NjNkLTk1NmEtNDM2NDMxNjZjNDVmLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzI3VDIxNDg0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZkOTNjNGNmZjNhN2VlZmVhY2NjZmQ1OGQ4NjZiMzkxZjgyMzdlN2M2N2UwYmY5MzlkMzViZmQyYzE0NTdmZWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.JBvPJFviQkHSozTHKSgSboTEzYwRtxh1nDCeNX2RpgY) Or check out [the first blog post I used this on](https://svenluijten.com/posts/enable-intellisense-for-php-extensions-in-phpstorm). Configuration ------------- [](#configuration) ### Fallback or original [](#fallback-or-original) This option allows you to select either `'light'` or `'dark'` as the "original" form of the picture you're embedding. This determines which picture will be used if the browser doesn't support the `` element. ``` use League\CommonMark\Environment\Environment; use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension; $environment = new Environment([ 'dark_mode_images' => [ 'fallback' => 'dark', // Default: 'light'. ], ]); $environment->addExtension(new DarkModeImagesExtension()); ``` ### Class on `` element [](#class-on-picture-element) To change the class that is eventually applied to the rendered `` element, use the `picture_class`configuration option: ``` use League\CommonMark\Environment\Environment; use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension; $environment = new Environment([ 'dark_mode_images' => [ 'picture_class' => '', // Default: 'dark-mode-images-picture'. ], ]); $environment->addExtension(new DarkModeImagesExtension()); ``` ### Light and dark classes [](#light-and-dark-classes) Use the `dark_image_class` and `light_image_class` configuration options to determine what classes to apply to your Markdown images to indicate which is for dark mode, and which is for light mode. ``` use League\CommonMark\Environment\Environment; use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension; $environment = new Environment([ 'dark_mode_images' => [ 'light_image_class' => 'l', // Default: 'light-image'. 'dark_image_class' => 'd', // Default: 'dark-image'. ], ]); $environment->addExtension(new DarkModeImagesExtension()); ``` ### Note [](#note) It is *not* recommended to use this extension when converting to Markdown on-the-fly on every request. This is best suited for use in a static site generator like [Jigsaw](https://jigsaw.tighten.co/). Contributing ------------ [](#contributing) All contributions (pull requests, issues and feature requests) are welcome. Make sure to read through the [CONTRIBUTING.md](CONTRIBUTING.md) first, though. See the [contributors page](../../graphs/contributors) for all contributors. License ------- [](#license) `sven/commonmark-dark-mode-images` is licensed under the MIT License (MIT). Please see [the license file](LICENSE.md)for more information. ### Health Score 20 — LowBetter than 14% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community7 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1035d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6682e025b83b7a93b4d43c5c9b0b2245d790d72352758c47b81ba14858f45a8a?d=identicon)[svenluijten](/maintainers/svenluijten) --- Top Contributors [![svenluijten](https://avatars.githubusercontent.com/u/11269635?v=4)](https://github.com/svenluijten "svenluijten (3 commits)") --- Tags commonmarkcommonmark-extensiondark-modemarkdownphpprefers-color-schememarkdownimagescommonmarklightdarkcolor schemedarkmodeprefers-color-scheme ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/sven-commonmark-dark-mode-images/health.svg) ``` [![Health](https://phpackages.com/badges/sven-commonmark-dark-mode-images/health.svg)](https://phpackages.com/packages/sven-commonmark-dark-mode-images) ``` ### Alternatives [torchlight/torchlight-commonmark A Commonmark extension for Torchlight, the syntax highlighting API. 29256.6k6](/packages/torchlight-torchlight-commonmark)[zoon/commonmark-ext-youtube-iframe Extension for league/commonmark to replace youtube link with iframe 12275.9k1](/packages/zoon-commonmark-ext-youtube-iframe) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)