How to change color to dark mode of a free casper ghost theme
To change the color to dark mode on a free Casper Ghost theme, you can either use the built-in setting in the Ghost admin interface (for newer versions of Casper) or inject custom code. Option 1: Using the Built-in Theme SettingFor recent versions of the Casper theme, the dark mode feature is available as a standard option in the Ghost admin panel.
- Log in to your Ghost admin panel (e.g.,
yourdomain.com/ghost). - Navigate to Settings > Design & branding.
- Click on Customize and find the Color scheme setting under the "Site wide" section.
- Select Dark from the available options (which are typically Light, Dark, or System).
Selecting "System" will make the site automatically switch to dark mode if the user's operating system is set to dark mode. Option 2: Using Code Injection (for older themes or to force dark mode)If your theme version doesn't have the color scheme option or you want to force dark mode for all users, you can use the code injection feature.
- Log in to your Ghost admin panel.
- Navigate to Settings > Code injection.
- Save your changes. The site should now appear in dark mode by default for all visitors.
In the Site Header section, add the following script:html
<script>
document.documentElement.classList.add('dark-mode');
</script>
This script adds the dark-mode class to the <html> element, which triggers the dark mode CSS styles already present in the Casper theme.
Note: If you want to allow users to toggle between light and dark modes manually, you will need to modify the theme's code more extensively by adding a JavaScript function and a toggle button to your theme files. This involves downloading and editing the theme's code, then re-uploading it as a custom theme.