> For the complete documentation index, see [llms.txt](https://nghiaxchis.gitbook.io/ncmaz-blog-magazine-full-site-editing-wordpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nghiaxchis.gitbook.io/ncmaz-blog-magazine-full-site-editing-wordpress/basics/dark-light-logo.md).

# Dark/Light Logo

In case you need to use 2 separate **logos** for 2 Light/Dark modes of the website, please check the instructions below:

#### 1, Add a Image block (logo in dark mode) next to the main logo and add class to this image as "*dark-logo*" 👇

<div align="left"><figure><img src="https://3262797344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiQ0nkraIeIqL66aRYHNM%2Fuploads%2Fc00plhhlTaLyuBeARCLb%2FScreenshot%202025-03-15%20at%2009.57.17.png?alt=media&amp;token=231bf75b-07e7-4404-86be-ab999a352776" alt=""><figcaption></figcaption></figure></div>

#### 2, Add the following custom CSS code to the "Additional CSS" section 👇 - (check out this guide to learn how to add Additional CSS )

{% content-ref url="/pages/4cu8ZIlcku313kljfmnG" %}
[Add Custom CSS](/ncmaz-blog-magazine-full-site-editing-wordpress/basics/add-custom-css.md)
{% endcontent-ref %}

```css
// Additional CSS

.dark header .wp-block-site-logo {
    display: none;
}
.logo-dark {
    display: none;
}
.dark header .logo-dark {
    display: block;
}
```