Rosure
  • 👋Documentation for Rosure Portfolio
  • Getting Started
    • 🎯Features
    • ➡️Sections Overview
  • Setup and Configuration
    • 📍Getting Started
    • 🎨Customization
      • Adding a New Section
      • 03 What I do Section (Adding a New Service)
      • 04 Skills Section (Adding a New Skill)
      • 05 Experience Section (Adding work experience)
      • 06 Projects Section (Adding a New Porject)
      • 07 Enabling the Contact Form
      • Set Default Theme and Configure Toggle Button
    • 🖌️Global Styles
  • Additional
    • 📄Licenses
    • 💌Credits
Powered by GitBook
On this page
  • Set the Default Theme
  • Hide the Theme Toggle Button
  1. Setup and Configuration
  2. Customization

Set Default Theme and Configure Toggle Button

Set the Default Theme

The default theme for the template is dark mode. If you want to change it to light mode, follow these steps:

  1. Open the js/dark-light-theme.js file.

  2. Locate the following line at line 5:

    const defaultTheme = 'dark';
  3. Change the value 'dark' to 'light':

    const defaultTheme = 'light';
  4. Save the file. The default theme will now be set to light mode.


Hide the Theme Toggle Button

If you don't want users to switch between dark and light themes and prefer to lock the theme to your chosen default, you can simply hide the toggle button:

  1. Open the css/styles.css

  2. Add the following CSS rule:

    #theme-toggle {
        display: none;
    }
  3. Save the file. The toggle button will no longer be visible in the header, but the code will remain in case you want to re-enable it later.

Previous07 Enabling the Contact FormNextGlobal Styles

Last updated 4 months ago

🎨