Dark Mode

Dark Mode

Enabling Dark Mode

You can enable dark mode for your site by using the style.darkMode property of your site.json configuration file.

{
  "style": {
    "darkMode": true
  }
}

    

    Wrap Text
    

    


    
    
    
    

    Copy
    

    


    
    
    

Enabling dark mode causes the site to default to the user's system preference. Readers can also switch between light and dark mode at any time using the <dark-mode-toggle/> component, which appears in the navigation bar to the right of the search bar. This setting will be remembered for future visits to the site.

Adapting Existing Sites to Dark Mode

Updating stylesheet

After enabling dark mode, replace your /css/main.css in your markbind site directory with the latest version here to override the default Bootstrap styles with the new dark mode compatible styles.

Adapting your contents

We recognise that some of your existing contents e.g. images with transparent backgrounds and diagrams might have some visibility issues when viewed in dark mode. We recommend that:

• You wrap your images in a <box> tag with light background to improve visibility.

  <box background-color="#f8f9fa">
    your existing content
  </box>
  
      
  
      Wrap Text
      
  
      
  
  
      
      
      
      
  
      Copy
      
  
      
  
  
      
      
      

• Adapt your diagrams to use colours that are more visible in both modes