add dark mode

api/resolvers/user.js

@@ -44,6 +44,15 @@ export default {
 
       return true
     },
+    setTheme: async (parent, { theme }, { me, models }) => {
+      if (!me) {
+        throw new AuthenticationError('you must be logged in')
+      }
+
+      await models.user.update({ where: { id: me.id }, data: { theme } })
+
+      return true
+    },
     upsertBio: async (parent, { bio }, { me, models }) => {
       if (!me) {
         throw new AuthenticationError('you must be logged in')

api/typeDefs/user.js

@@ -11,6 +11,7 @@ export default gql`
   extend type Mutation {
     setName(name: String!): Boolean
     setSettings(tipDefault: Int!): Boolean
+    setTheme(theme: String!): Boolean
     upsertBio(bio: String!): User!
   }
 
@@ -29,5 +30,6 @@ export default gql`
     bio: Item
     sats: Int!
     msats: Int!
+    theme: String!
   }
 `

components/header.js

@@ -13,6 +13,8 @@ import { useEffect, useState } from 'react'
 import { randInRange } from '../lib/rand'
 import styled from 'styled-components'
 import Sun from '../svgs/sun-fill.svg'
+import Moon from '../svgs/moon-fill.svg'
+import { gql, useMutation } from '@apollo/client'
 
 const Brand = styled(Navbar.Brand)`
   color: ${({ theme }) => theme.brandColor}
@@ -43,6 +45,16 @@ export const StyledNavbar = styled(Navbar).attrs(({ theme }) => ({
   & .dropdown-divider {
     border-top: 1px solid ${({ theme }) => theme.borderColor};
   }
+
+  & .theme {
+    margin-right: 1rem;
+    cursor: pointer;
+    fill: ${({ theme }) => theme.dropdownItemColor};
+  }
+
+  & .theme:hover {
+    fill: ${({ theme }) => theme.dropdownItemColorHover};
+  }
 `
 
 function WalletSummary ({ me }) {
@@ -56,6 +68,12 @@ export default function Header () {
   const [session, loading] = useSession()
   const [sort, setSort] = useState('recent')
   const [within, setWithin] = useState()
+  const [setTheme] = useMutation(
+    gql`
+      mutation setTheme($theme: String!) {
+        setTheme(theme: $theme)
+      }`
+  )
 
   useEffect(() => {
     setSort(localStorage.getItem('sort') || 'recent')
@@ -127,7 +145,9 @@ export default function Header () {
                 <Link href='/settings' passHref>
                   <NavDropdown.Item>settings</NavDropdown.Item>
                 </Link>
-                <Sun className='fill-grey mr-3' />
+                {me?.theme === 'light'
+                  ? <Moon onClick={() => setTheme({ variables: { theme: 'dark' } })} className='theme' />
+                  : <Sun onClick={() => setTheme({ variables: { theme: 'light' } })} className='theme' />}
               </div>
               <NavDropdown.Divider />
               <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>

components/me.js

@@ -21,6 +21,7 @@ export function MeProvider ({ children }) {
         id
       }
       hasInvites
+      theme
     }
   }`
   const { data } = useQuery(query, { pollInterval: 1000 })

pages/_app.js

@@ -2,7 +2,7 @@ import '../styles/globals.scss'
 import { ApolloProvider, gql } from '@apollo/client'
 import { Provider } from 'next-auth/client'
 import { FundErrorModal, FundErrorProvider } from '../components/fund-error'
-import { MeProvider } from '../components/me'
+import { MeProvider, useMe } from '../components/me'
 import PlausibleProvider from 'next-plausible'
 import { LightningProvider } from '../components/lightning'
 import { ItemActModal, ItemActProvider } from '../components/item-act'
@@ -60,20 +60,18 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-// const lightTheme = {
+const lightTheme = {
-//   body: 'linear-gradient(180deg, #f5f5f5, #f5f5f5, white)',
+  body: '#f5f5f5',
-//   color: '#212529',
+  color: '#212529',
-//   navbarVariant: 'light',
+  navbarVariant: 'light',
-//   inputBg: '#ffffff',
+  borderColor: '#ced4da',
-//   navbarVariant: 'light',
+  inputBg: '#ffffff',
-//   borderColor: 'rgb(255 255 255 / 50%)',
+  dropdownItemColor: 'inherit',
-//   dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
+  dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
-//   dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
+  commentBg: 'rgba(0, 0, 0, 0.03)',
-//   commentBg: 'rgba(255, 255, 255, 0.04)',
+  clickToContextColor: 'rgba(0, 0, 0, 0.05)',
-//   clickToContextColor: 'rgba(255, 255, 255, 0.08)',
+  brandColor: 'rgba(0, 0, 0, 0.9)'
-//   color: '#f8f9fa',
+}
-//   brandColor: 'var(--primary) !important'
-// }
 
 const darkTheme = {
   body: '#000000',
@@ -88,6 +86,16 @@ const darkTheme = {
   brandColor: 'var(--primary) !important'
 }
 
+function ThemeProviderWrapper ({ children }) {
+  const me = useMe()
+  console.log(me)
+  return (
+    <ThemeProvider theme={me?.theme === 'light' ? lightTheme : darkTheme}>
+      {children}
+    </ThemeProvider>
+  )
+}
+
 function MyApp ({ Component, pageProps: { session, ...props } }) {
   const client = getApolloClient()
   /*
@@ -107,11 +115,11 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
 
   return (
     <PlausibleProvider domain='stacker.news' trackOutboundLinks>
-      <ThemeProvider theme={darkTheme}>
+      <Provider session={session}>
-        <GlobalStyle />
+        <ApolloProvider client={client}>
-        <Provider session={session}>
+          <MeProvider>
-          <ApolloProvider client={client}>
+            <ThemeProviderWrapper>
-            <MeProvider>
+              <GlobalStyle />
               <LightningProvider>
                 <FundErrorProvider>
                   <FundErrorModal />
@@ -121,10 +129,10 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
                   </ItemActProvider>
                 </FundErrorProvider>
               </LightningProvider>
-            </MeProvider>
+            </ThemeProviderWrapper>
-          </ApolloProvider>
+          </MeProvider>
-        </Provider>
+        </ApolloProvider>
-      </ThemeProvider>
+      </Provider>
     </PlausibleProvider>
   )
 }

prisma/migrations/20211104210749_theme/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "theme" TEXT NOT NULL DEFAULT E'light';

prisma/schema.prisma

@@ -35,6 +35,7 @@ model User {
   checkedNotesAt DateTime?
   tipDefault     Int         @default(0)
   pubkey         String?     @unique
+  theme          String      @default("light")
 
   @@index([createdAt])
   @@map(name: "users")

styles/globals.scss

@@ -95,6 +95,10 @@ footer {
   fill: #6c757d;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 @media screen and (max-width: 767px) {
   input, select, textarea, .form-control, .form-control:focus, .input-group-text {
     font-size: 1rem !important;