Dark theme toggle not rendering on deployed site

Support
, ,
1

Hello!

I have created my first React App using an API. I have included a dark/light theme icon in my App.js file using the useLocalStorage hook. This works fine in my local version, the icon and text to change the theme renders and I am able to switch to dark mode with the theme choice saving to local storage.

However, none of this works in my deployed version. The icon to switch themes is not showing. I couldn’t find anything online to fix the issue.

Here is the link to the deployed site: Deployed site

I have attached a screenshot of my local site:

Screenshot (533)
Screenshot (533)1920×1148 98 KB

Here’s the code from my App.js file:

`import ‘./App.css’;
import AllHeadlines from ‘./components/AllHeadlines/AllHeadlines’;
import Header from ‘./components/Header/Header’;
import useLocalStorage from ‘use-local-storage’;
import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
import SummaryPage from ‘./components/summary/SummaryPage’;

function App() {

const [theme, setTheme] = useLocalStorage(‘theme’ ? ‘dark’ : ‘light’)
const [themeText, setThemeText] = useLocalStorage(‘Dark Theme’);
const [themeIcon, setThemeIcon] = useLocalStorage(“fa-solid fa-moon”)

const switchTheme = () => {
const newTheme = theme === ‘light’ ? ‘dark’ : ‘light’;
setTheme(newTheme);
const newThemeText = newTheme === ‘light’ ? ‘Dark Theme’ : ‘Light Theme’;
setThemeText(newThemeText);
const newThemeIcon = newTheme === ‘light’ ? “fa-solid fa-moon” : “fa-solid fa-sun”;
setThemeIcon(newThemeIcon);
}

return (

    <BrowserRouter>
      <div className="App" data-theme={theme}>
        <Header />
        <div className="theme-toggle">
            <i onClick={switchTheme} className={themeIcon}></i>
            <h5>{themeText}</h5>
        </div>
        <Routes>

          <Route path="/" element={<AllHeadlines />} />
          <Route path="/summary/:id" element={<SummaryPage />} />

        </Routes>

      </div>
    </BrowserRouter>

);
}

export default App;`

Build Settings:

Build settings

Runtime
Not set

Base directory
Not set

Build command
npm run build

Publish directory
build

Deploy log visibility
Logs are public

Build status

Active

Can anyone see if there’s something that I am missing? Also, if you need anymore info let me know.

Thank you in advance

Paula

2

Hi @P-Gayle, thanks for the post.

If possible can you share a repository of the website for me to help with the debugging?

Thanks.