@material-ui/core/styles#ThemeProvider JavaScript Examples

The following examples show how to use @material-ui/core/styles#ThemeProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: _app.js    From Screencast with MIT License 6 votes vote down vote up 
render() {
        const { Component, pageProps } = this.props;

        return(
        <>
        <React.Fragment>
        <Head>
        <meta charSet="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <title>Geektober</title>
          <link rel="stylesheet" type="text/css" href="question.css" />
        </Head>
        <ThemeProvider>
          <div className="back">
          <CssBaseline />
          {this.state.loaded ? (
            <Component {...pageProps} />
          ) : (
            <Loader />
          )}
          </div>
        </ThemeProvider>
        </React.Fragment>
        </>
        );
    }
Example #2
Source File: index.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  // Wrap project in auth0 for authentication and authorization
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    audience={config.audience}
    responseType={config.responseType}
    scope={config.scope}
  >
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </Auth0Provider>,
  document.getElementById("root")
);
Example #3
Source File: UserEditModalContent.test.js    From neighborhood-chef-fe with MIT License 6 votes vote down vote up 
describe("Test UserEditModal static properties", () => {
  let UserEditModal;
  beforeEach(() => {
      sessionStorage.setItem('user', JSON.stringify({
        address: "address",
        firstName: "firstName",
        lastName: "lastName",
        id: "id",
        gender: "gender"
      }));

      const store = mockStore({});

      UserEditModal = render(
        <Provider store={store}>
          <BrowserRouter>
              <ThemeProvider theme={theme}>
                  <UserEditModalContent />
              </ ThemeProvider>
          </BrowserRouter>
        </Provider>
      );
  });

    test("UserEditModal component renders", () => {
      console.log(sessionStorage.getItem('user'));
      console.log("here");
  
    expect(UserEditModal.getByText(/Change User Information/i));
  });

});
Example #4
Source File: Home.js    From social-media-strategy-fe with MIT License 6 votes vote down vote up 
describe("Home component", () => {
  it("renders without crashing", () => {
    render(
      <ThemeProvider theme={theme}>
        <Home />
      </ThemeProvider>
    );
  });
});
Example #5
Source File: RootLayout.jsx    From gatsby-starter-builder with MIT License 6 votes vote down vote up 
export default function RootLayout(props) {
  return (
    <React.Fragment>
      <Helmet>
        <meta charSet="UTF-8" />
        <meta name="theme-color" content="#f8f8f8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no"
        />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      </Helmet>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        {props.children}
      </ThemeProvider>
    </React.Fragment>
  );
}
Example #6
Source File: index.js    From Designer-Client with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store.store}>
    <PersistGate loading={null} persistor={store.persistor}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);
Example #7
Source File: About.jsx    From ChronoFactorem with GNU General Public License v3.0 6 votes vote down vote up 
About = () => {
  const classes = useStyles();
  

  return (
    <>
      <br></br>
      <div style={{ display:'flex', justifyContent:'center' }}>
        <Card className={classes.root}>
          <CardContent>
            <Typography className={classes.title} color="textSecondary" gutterBottom>
              About the Project
            </Typography>
            <Typography variant="h5" component="h2">
              ChronoFactorem
            </Typography>
            <Typography className={classes.pos} color="textSecondary">
              Description
            </Typography>
            <Typography variant="body1" component="p">
            ChronoFactorem is a time-table web app primarily aimed at students in our campus. One of the main features of BITS Pilani is flexibility: one of them being that students can choose their timetable. This web-app can help students make a draft timetable before the actual registration, in order to prevent confusion before and during the registration due to poor planning and lack of information on courses such as the number of people planning on taking it, thus causing significant delays and discomfort to students and the admissions division during the start of the semester.  Students can preview and save their draft timetables and share them with others in order to help people registering for similar courses deal with clashes / timings of classes. Students and teachers can also view the statistics of the courses – such as how many students want to take a course. Features such as mid-semester and comprehensive schedules, lunch hours and clashes which are checked during the actual registration is also shown here in order and students are warned about packed schedules and/or before they proceed with their draft. Essentially, this would emulate a mock timetable making experience –without the time constraints to minimize bad decisions and unnecessary despair.
            </Typography>
          </CardContent>
          <ThemeProvider theme={theme}>
            <CardActions>
              <Button variant="contained" size="large" color="primary" startIcon={<GitHubIcon/>} style={{marginLeft:"0.5vw",marginBottom:"1.5vh"}} href="https://github.com/Dryft-bits/ChronoFactorem" target="_blank">Learn More</Button>
            </CardActions>
          </ThemeProvider>
        </Card>
      </div>
    </>
  );
}
Example #8
Source File: Account.spec.py.js    From treetracker-admin-client with GNU Affero General Public License v3.0 6 votes vote down vote up 
describe('Account', () => {
  it('Account', () => {
    const user = {
      username: 'dadiorchen',
      firstName: 'Dadior',
      lastName: 'Chen',
      email: '[email protected]',
      role: [
        {
          id: 1,
          name: 'admin',
        },
        {
          id: 2,
          name: 'Tree Auditor',
        },
      ],
    };
    mount(
      <ThemeProvider theme={theme}>
        <Account user={user} />
      </ThemeProvider>,
    );
    cy.contains(/Dadior/i);
  });
});
Example #9
Source File: style.js    From Queen with MIT License 6 votes vote down vote up 
StyleProvider = ({ children }) => {
  // const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          // type: prefersDarkMode ? 'dark' : 'light',
          primary: {
            main: '#085394',
          },
          secondary: {
            main: '#FFFFFF',
          },
          declarations: {
            main: '#085394',
            help: 'black',
          },
          background: {
            default: '#eeeeee',
          },
        },
        breakpoints: {
          values: {
            xs: 0,
            sm: 460,
            md: 750,
            lg: 875,
            xl: 1200,
          },
        },
      }),
    []
  );

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
Example #10
Source File: index.js    From course-manager with MIT License 6 votes vote down vote up 
export default function ThemeConfig({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape,
      typography,
      breakpoints,
      shadows,
      customShadows
    }),
    []
  );

  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <GlobalStyles />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}
Example #11
Source File: index.jsx    From simplQ-frontend with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Auth0Provider
    domain="simplq.us.auth0.com"
    clientId="9BAywifjAy6n0sx8WbuQubMGGjofpwd6"
    redirectUri={window.location.origin}
    audience="https://devbackend.simplq.me/v1"
    scope="read:current_user update:current_user_metadata"
    cacheLocation="localstorage"
    useRefreshTokens
  >
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <Layout />
      </Provider>
    </ThemeProvider>
  </Auth0Provider>,
  document.getElementById('root')
);
Example #12
Source File: CustomThemeProvider.js    From 8086-emulator-web with Apache License 2.0 6 votes vote down vote up 
CustomThemeProvider = (props) => {
  // eslint-disable-next-line react/prop-types
  const { children } = props

  // Read current theme from localStorage or maybe from an api
  const currentTheme = localStorage.getItem('appTheme') || 'normal'

  // State to hold the selected theme name
  const [themeName, _setThemeName] = useState(currentTheme)

  // Retrieve the theme object by theme name
  const theme = getTheme(themeName)

  // Wrap _setThemeName to store new theme names in localStorage
  const setThemeName = (name) => {
    localStorage.setItem('appTheme', name)
    _setThemeName(name)
  }

  const contextValue = {
    currentTheme: themeName,
    setTheme: setThemeName,
  }

  return (
    <CustomThemeContext.Provider value={contextValue}>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </CustomThemeContext.Provider>
  )
}
Example #13
Source File: index.js    From acsys with MIT License 6 votes vote down vote up 
init = async () => {
  const con = await Acsys.isConnected();
  if (con) {
    ReactDOM.render(
      <body>
        <ThemeProvider theme={theme}>
          <AcsysProvider>
            <App />
          </AcsysProvider>
        </ThemeProvider>
      </body>,
      document.getElementById('root')
    );
  } else {
    ReactDOM.render(
      <body>
        <ThemeProvider theme={theme}>
          <Configuration />
        </ThemeProvider>
      </body>,
      document.getElementById('root')
    );
  }
}
Example #14
Source File: App.js    From reddish with MIT License 6 votes vote down vote up 
App = () => {
  const classes = useMainPaperStyles();
  const dispatch = useDispatch();
  const { darkMode } = useSelector((state) => state);

  useEffect(() => {
    const setPostsAndSubreddits = async () => {
      try {
        await dispatch(fetchPosts('hot'));
        await dispatch(setSubList());
        await dispatch(setTopSubsList());
      } catch (err) {
        dispatch(notify(getErrorMsg(err), 'error'));
      }
    };

    dispatch(setUser());
    dispatch(setDarkMode());
    setPostsAndSubreddits();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <ThemeProvider theme={customTheme(darkMode)}>
      <Paper className={classes.root} elevation={0}>
        <ToastNotif />
        <NavBar />
        <Routes />
      </Paper>
    </ThemeProvider>
  );
}
Example #15
Source File: App.js    From stack-underflow with MIT License 6 votes vote down vote up 
App = () => {
  const { darkMode } = useStateContext();
  const classes = useBodyStyles();

  return (
    <ThemeProvider theme={customTheme(darkMode)}>
      <Paper className={classes.root} elevation={0}>
        <ToastNotification />
        <NavBar />
        <Routes />
      </Paper>
    </ThemeProvider>
  );
}
Example #16
Source File: index.js    From react-electron-sqlite-boilerplate with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={<p>Loading</p>} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <Routes />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #17
Source File: App.js    From whaticket with MIT License 6 votes vote down vote up 
App = () => {
  const [locale, setLocale] = useState();

  const theme = createTheme(
    {
      scrollbarStyles: {
        "&::-webkit-scrollbar": {
          width: "8px",
          height: "8px",
        },
        "&::-webkit-scrollbar-thumb": {
          boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
          backgroundColor: "#e8e8e8",
        },
      },
      palette: {
        primary: { main: "#2576d2" },
      },
    },
    locale
  );

  useEffect(() => {
    const i18nlocale = localStorage.getItem("i18nextLng");
    const browserLocale =
      i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);

    if (browserLocale === "ptBR") {
      setLocale(ptBR);
    }
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  );
}
Example #18
Source File: ThemeContextProvider.js    From react-sample-projects with MIT License 6 votes vote down vote up 
ThemeContextProvider = ({ children }) => {
  const [isDark, setDarkMode] = useState(
    window.matchMedia('(prefers-color-scheme: dark)').matches,
  );
  const theme = createTheme(isDark ? dark : light);
  const toggleTheme = () => {
    setDarkMode(() => !isDark);
  };

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </ThemeContext.Provider>
  );
}
Example #19
Source File: AppThemeProvider.jsx    From covid with GNU General Public License v3.0 6 votes vote down vote up 
AppThemeProvider = (props) => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
  const { type, children } = props

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          type: type || (prefersDarkMode ? 'dark' : 'light')
        }
      }),
    [prefersDarkMode, type]
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}
Example #20
Source File: index.js    From lifebank with MIT License 6 votes vote down vote up 
render(
  <ThemeProvider theme={theme}>
    <ApolloProvider client={client}>
      <CookiesProvider>
        <UserProvider>
          <CssBaseline />
          <App />
        </UserProvider>
      </CookiesProvider>
    </ApolloProvider>
  </ThemeProvider>,
  document.getElementById('root')
)
Example #21
Source File: index.js    From eSim-Cloud with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={theme}>
    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
    <CssBaseline />
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
)
Example #22
Source File: App.jsx    From bull-master with MIT License 6 votes vote down vote up 
function App({ basePath }) {
  return (
    <ThemeProvider theme={theme}>
      <RequestProvider value={client}>
        <Router basename={basePath}>
          <Layout>
            <Routes>
              <Route exact path="/" element={<Dashboard />} />
              <Route exact path="/queues/:queueName" element={<Queue />} />
              <Route exact path="/queues/:queueName/:jobId" element={<Job />} />
            </Routes>
          </Layout>
        </Router>
      </RequestProvider>
    </ThemeProvider>
  );
}
Example #23
Source File: index.jsx    From viv with MIT License 6 votes vote down vote up 
function RoutedAvivator(props) {
  const query = useQuery();
  const url = query.get('image_url');
  const {
    routeProps: { history }
  } = props;
  if (url) {
    const urlSrouce = {
      urlOrFile: url,
      description: getNameFromUrl(url)
    };
    return (
      <ThemeProvider theme={darkTheme}>
        <Avivator source={urlSrouce} history={history} />
      </ThemeProvider>
    );
  }
  const source = getRandomSource();
  return (
    <ThemeProvider theme={darkTheme}>
      <Avivator source={source} history={history} isDemoImage />
    </ThemeProvider>
  );
}
Example #24
Source File: index.js    From hacktoberfest-participants with MIT License 6 votes vote down vote up 
export default function Home(props) {
  const classes = useStyles();
  const [theme, setTheme] = useThemeState('light', 'theme');

  return (
    <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
      <React.Fragment>
        <CssBaseline />
        <Helmet>
          <meta charSet='utf-8' />
          <title>Hacktoberfest presented by DigitalOcean</title>
          <link
            rel='canonical'
            href='https://iamdarshshah.github.io/hacktoberfest-participants'
          />
          <link rel='icon' href={icon} />
        </Helmet>
        <Header
          onChange={() => {
            setTheme((prev) => {
              let value = prev === 'light' ? 'dark' : 'light';
              localStorage.setItem('theme', value);
              return value;
            });
          }}
          theme={theme}
        />
        <Content {...props} />
        <footer className={classes.footer}>
          <Footer />
        </footer>
      </React.Fragment>
    </ThemeProvider>
  );
}
Example #25
Source File: index.js    From react-redux-jsonplaceholder with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #26
Source File: index.js    From SyntaxMeets with MIT License 6 votes vote down vote up 
ReactDOM.render(
  
    <ThemeProvider theme={theme}>
      <MediaQuery query="(max-device-width: 768px)">
        <Mobile /> 
      </MediaQuery>
      <MediaQuery query="(min-device-width: 769px)">
        <App />
      </MediaQuery>
    </ThemeProvider>
,
  document.getElementById('root')
);
Example #27
Source File: App.js    From conectadev with MIT License 6 votes vote down vote up 
function App() {
  const { settings } = useSettings();

  return (
    <ThemeProvider theme={createTheme(settings)}>
      <BrowserRouter>
        <Auth>
          <Routes>
            <GuestRoute path="/sign-in" element={<SignIn />} />
            <GuestRoute path="/sign-up" element={<SignUp />} />
            <Route path="//*" element={<Home />} />
          </Routes>
        </Auth>
      </BrowserRouter>
    </ThemeProvider>
  );
}
Example #28
Source File: App.js    From oftadeh-react-admin with MIT License 6 votes vote down vote up 
App = () => {
  const curThemeName = localStorage.getItem("appTheme") || "light";

  const [themeType, setThemeType] = useState(curThemeName);

  const setThemeName = themeName => {
    localStorage.setItem("appTheme", themeName);
    setThemeType(themeName);
  };

  const theme = getTheme({
    paletteType: themeType
  });

  return (
    <ThemeContext.Provider value={{ setThemeName, curThemeName }}>
      <ThemeProvider theme={theme}>
        <div className="App">
          <OftadehRoutes />
        </div>
      </ThemeProvider>
    </ThemeContext.Provider>
  );
}
Example #29
Source File: index.test.js    From reminder-atomic-app-demo with MIT License 6 votes vote down vote up 
describe("Event List Item", () => {
  const data = {
    date: "12:12:!2 12/12/12",
    title: "Test Title",
    type: "Test Type",
  };

  it("Renders the list item", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <EventListItem eventData={data} />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});