Code Theme

DeveloperHub supports both light and dark themes for code blocks. We recommend using the light code theme for your whole project when using the light theme.

Setting Light/Dark Code Theme

To switch the code theme between light and dark modes, follow these steps:

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

Advanced Code Theming

We utilize CodeMirror for the rendering and formatting of our code blocks. CodeMirror offers a wide variety of themes for your selection. You can explore the complete list of available themes here.

To change the code theme, you need to import the theme stylesheet and provide a setting that specifies the theme to use. This ensures your selected theme is applied correctly in 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 the copy button to match the theme you have chosen.