fix: 🐛 Dark mode

vanntile · Mar 17, 2021 · 813f58d · 813f58d
1 parent fde4aca
commit 813f58d
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 7 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -17,7 +17,7 @@ Router.events.on('routeChangeComplete', () => done())
 Router.events.on('routeChangeError', () => done())
 
 const App: React.FC<Props> = ({ Component, pageProps }): JSX.Element => (
-  <ThemeProvider attribute="class">
+  <ThemeProvider attribute="class" defaultTheme="dark">
     <MDXProvider components={MDXComponents}>
       <Component {...pageProps} />
     </MDXProvider>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -11,13 +11,11 @@ export default class MyDocument extends Document {
   render() {
     let csp = `default-src 'self'; script-src 'self' ${cspHashOf(NextScript.getInlineScriptSource(this.props))}`
     if (process.env.NODE_ENV !== 'production') {
-      csp = `style-src 'self' 'unsafe-inline'; font-src 'self' data:; default-src 'self'; script-src 'unsafe-eval' 'self' ${cspHashOf(
-        NextScript.getInlineScriptSource(this.props),
-      )}`
+      csp = `style-src 'self' 'unsafe-inline'; font-src 'self' data:; default-src 'self'; script-src 'unsafe-inline' 'unsafe-eval' 'self'`
     }
 
     return (
-      <Html lang="en">
+      <Html lang="en" className="dark">
         <Head>
           <link
             rel="preload"

diff --git a/styles/globals.css b/styles/globals.css
@@ -178,7 +178,7 @@ pre[class*='language-'] {
 }
 
 .prose a.icon-link {
-  @apply absolute -ml-6 text-gray-400 no-underline shadow-none opacity-0 hover:text-gray-400 hover:no-underline;
+  @apply absolute -ml-6 text-gray-400 no-underline shadow-none opacity-0 2xl:-ml-12 hover:text-gray-400 hover:no-underline;
 }
 
 .prose .icon-link::before {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
   theme: {
     screens: {
       md: '768px',
-      '2xl': '1536px',
+      '2xl': '2560px',
     },
     extend: {
       colors: {