Code Theme

Natively, DeveloperHub supports a light and dark theme for code blocks. We suggest using the light code theme when using light theme project wide.

Setting Light/Dark Code Theme

To change the code theme between light and dark:

• Click on Project settings in the sidebar.
• Under Customisation, choose the Code Theme.
• Click Save.

Advanced Code Theming

We use CodeMirror for rendering and formatting our code blocks, and CodeMirror provides heaps of themes for you to choose from. The list of themes is available here.

To change the code theme, you will need to import the theme stylesheet and also provide a setting that specifies which theme to use. This ensures that your selected theme is applied correctly within the application.

• First, find a CDN providing the stylesheet of the theme for maximum performance. cdnjs is an example.
• Import the theme stylesheet by add such a style tag using Custom HEAD Tags:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/ambiance.min.css">

• Apply the theme settings also by adding a script to your HEAD tags:

<script>

    window.settings.apply({

      code: {

        darkTheme: 'ambiance',

        lightTheme: 'xq-light'

      }

    });  

</script>

You might want to change the styling of the code block tabs and copy button to match the theme you have chosen.