Revision history [back]

To modify the light/dark mode icon in Docusaurus, follow these steps:

1. Locate the icon file: The existing icon file is located in the "static/img" folder of your Docusaurus project. Look for the following files: "light-mode-icon.svg" and "dark-mode-icon.svg".

2. Replace the icon file: You can replace the icon file with any other icon of your preference. Make sure to name it the same as the original icon file so that it can be recognized by Docusaurus.

3. Update the configuration file: The configuration file for Docusaurus is called "docusaurus.config.js". Open this file and look for the following code:

themeConfig: {
  colorMode: {
    defaultMode: 'light',
    switchConfig: {
      darkIcon: '🌑',
      darkIconStyle: {},
      lightIcon: '☀️',
      lightIconStyle: {},
    },
  },
},

In this code, you can see the two icon files being referenced – "darkIcon" and "lightIcon". Replace the file names with the names of your new icon files.

1. Save and deploy: Save the configuration file and deploy your project. Your new light/dark mode icon should now be displayed.