Skip to content

2
2021-155
Commit b07f65fd authored by Kamal Thennakoon's avatar Kamal Thennakoon
Browse files
Options

next.js theme configs

parent b5d62d07
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 18 deletions
client/pages/_app.js
View file @ b07f65fd
......@@ -15,6 +15,9 @@ import '../styles/variables.css'
import '../styles/nprogress.css'
import 'react-tagsinput/react-tagsinput.css'
import '../styles/app.css'
import Head from 'next/head'
import { ThemeProvider } from '@material-ui/styles'
import theme from '../themes/theme'
Router.events.on('routeChangeStart', () => NProgress.start())
Router.events.on('routeChangeComplete', () => NProgress.done())
......@@ -34,23 +37,43 @@ function MyApp({ Component, pageProps }) {
setAuthScreen(authScreen)
}
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles)
}
}, [])
return (
<ModalContext.Provider
value={{ ref, handleComponentVisible, setIsComponentVisible }}
>
<AuthProvider>
<FetchProvider>
<TagProvider>
<Component {...pageProps} />
{isComponentVisible && (
<Modal>
<AuthForms screen={authScreen} />
</Modal>
)}
</TagProvider>
</FetchProvider>
</AuthProvider>
</ModalContext.Provider>
<React.Fragment>
<Head>
<title>ProbExpert</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</Head>
<ThemeProvider theme={theme}>
<ModalContext.Provider
value={{ ref, handleComponentVisible, setIsComponentVisible }}
>
<AuthProvider>
<FetchProvider>
<TagProvider>
<Component {...pageProps} />
{isComponentVisible && (
<Modal>
<AuthForms screen={authScreen} />
</Modal>
)}
</TagProvider>
</FetchProvider>
</AuthProvider>
</ModalContext.Provider>
</ThemeProvider>
</React.Fragment>
)
}
......
client/pages/_document.js
View file @ b07f65fd
import { ServerStyleSheets } from '@material-ui/styles'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import React from 'react'
import SiteConfig from '../site.config'
import theme from '../themes/theme'
class MyDocument extends Document {
static async getInitialProps(ctx) {
//const initialProps = await Document.getInitialProps(ctx)
//return { ...initialProps }
const sheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
})
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement()
]
}
}
render() {
......@@ -17,7 +38,7 @@ class MyDocument extends Document {
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={SiteConfig.description} />
<meta name="theme-color" content={theme.palette.primary.main} />
{/* facebook */}
<meta property="og:url" content={SiteConfig.siteUrl} />
<meta property="og:type" content="website" />
......@@ -48,6 +69,8 @@ class MyDocument extends Document {
{/* favicon */}
<link rel="shortcut icon" href="/images/logo.svg" />
{/* icons (Fonts Icons) */}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</Head>
<body>
<Main />
......
client/themes/theme.js 0 → 100644
View file @ b07f65fd
import { createMuiTheme } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
});
export default theme;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment