# Codeblock Theme Picker

**URL:** <https://meta.discourse.org/t/codeblock-theme-picker/146396>\
**Category:** Theme component\
**Tags:** official, codeblock-theme-picker\
**Created:** [April 1, 2020, 6:53am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396 "2020-04-01T06:53:35Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/580155_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)\
**Post date:** [April 1, 2020, 6:53am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/1 "2020-04-01T06:53:35Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Codeblock Theme Picker** will allow you to easily change the theme used in code blocks. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/codeblock-theme-picker) |
| 🛠 | **Repository Link** | [https://github.com/discourse/hljs-theme-picker](https://github.com/discourse/hljs-theme-picker) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=codeblock-theme-picker "Ask for support on configuring and using Codeblock Theme Picker") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=codeblock-theme-picker "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=codeblock-theme-picker "Discussion about the user interface of Codeblock Theme Picker, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=codeblock-theme-picker "Discussion about how existing Codeblock Theme Picker features can be improved or enhanced, and how proposed new features could work")

### Features

 ![Some examples of the colors available](https://global.discourse-cdn.com/meta/original/3X/3/e/3e627f0d3cc4343172abba8e8a1b7ed5b7c58b59.png)

This is just a handful of the available options. This component includes [all 90 options](https://highlightjs.org/static/demo/) offered in the hljs repository.

> ℹ While all the options are included in this component, it will only load the one you pick. So, there’s no overhead.

### How to use it

Due to the way this component is wired up, it will require a small change to one of your site settings.

1. Head to `your.site.com/admin/site_settings/`
2. Search for `theme_authorized_extensions`
3. Add `css` to that list.

Like so:

 ![add css to theme authorized extensions](https://global.discourse-cdn.com/meta/original/3X/a/4/a4fc401af2a0cf3ea31c6bf31a1c35f129ea79c6.png)

⚠ You have to do this before you install the component, otherwise it won’t work.

Once that’s done, you can install the component just like any other component.

### Settings

| Name | Description |
| --- | --- |
| hljs theme | Select the theme you want code blocks to use. You can visit [the hljs demo page](https://highlightjs.org/static/demo/) to preview the themes |
| hljs dark match | Load dark color scheme if available |

If you need to see what the options look like, have a look here [We're not a CDN - highlight.js](https://highlightjs.org/static/demo/)

Once you decide on a hljs theme to use, you can search the dropdown for the one you want and save the setting. You will need to refresh the page in order for everything to start working.

### Credits

All of the hljs themes included in this component have copyright information in their respective files. The list of all of those authors (❤) is too big to add here, but you can see them [here](https://github.com/discourse/hljs-theme-picker/tree/master/assets).

  

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @JammyDodger 2024-06-11T13:25:37Z
> 
> > **Check document**
> >
> > Perform check on document:

---

_[View the full topic](https://meta.discourse.org/t/codeblock-theme-picker/146396)._