diff --git a/api/resolvers/user.js b/api/resolvers/user.js
index fe9489fe..a58c4af2 100644
--- a/api/resolvers/user.js
+++ b/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')
diff --git a/api/typeDefs/user.js b/api/typeDefs/user.js
index af0cf975..f511dff1 100644
--- a/api/typeDefs/user.js
+++ b/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!
}
`
diff --git a/components/header.js b/components/header.js
index 12a68d35..d7aac6ea 100644
--- a/components/header.js
+++ b/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 () {
settings
-
+ {me?.theme === 'light'
+ ? setTheme({ variables: { theme: 'dark' } })} className='theme' />
+ : setTheme({ variables: { theme: 'light' } })} className='theme' />}
logout
diff --git a/components/me.js b/components/me.js
index b41969c3..8eedf09c 100644
--- a/components/me.js
+++ b/components/me.js
@@ -21,6 +21,7 @@ export function MeProvider ({ children }) {
id
}
hasInvites
+ theme
}
}`
const { data } = useQuery(query, { pollInterval: 1000 })
diff --git a/pages/_app.js b/pages/_app.js
index 3b9009ae..8d4893b7 100644
--- a/pages/_app.js
+++ b/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 = {
-// body: 'linear-gradient(180deg, #f5f5f5, #f5f5f5, white)',
-// color: '#212529',
-// navbarVariant: 'light',
-// inputBg: '#ffffff',
-// navbarVariant: 'light',
-// borderColor: 'rgb(255 255 255 / 50%)',
-// dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
-// dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
-// commentBg: 'rgba(255, 255, 255, 0.04)',
-// clickToContextColor: 'rgba(255, 255, 255, 0.08)',
-// color: '#f8f9fa',
-// brandColor: 'var(--primary) !important'
-// }
+const lightTheme = {
+ body: '#f5f5f5',
+ color: '#212529',
+ navbarVariant: 'light',
+ borderColor: '#ced4da',
+ inputBg: '#ffffff',
+ dropdownItemColor: 'inherit',
+ dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
+ commentBg: 'rgba(0, 0, 0, 0.03)',
+ clickToContextColor: 'rgba(0, 0, 0, 0.05)',
+ brandColor: 'rgba(0, 0, 0, 0.9)'
+}
const darkTheme = {
body: '#000000',
@@ -88,6 +86,16 @@ const darkTheme = {
brandColor: 'var(--primary) !important'
}
+function ThemeProviderWrapper ({ children }) {
+ const me = useMe()
+ console.log(me)
+ return (
+
+ {children}
+
+ )
+}
+
function MyApp ({ Component, pageProps: { session, ...props } }) {
const client = getApolloClient()
/*
@@ -107,11 +115,11 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
return (
-
-
-
-
-
+
+
+
+
+
@@ -121,10 +129,10 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
-
-
-
-
+
+
+
+
)
}
diff --git a/prisma/migrations/20211104210749_theme/migration.sql b/prisma/migrations/20211104210749_theme/migration.sql
new file mode 100644
index 00000000..fa690e8e
--- /dev/null
+++ b/prisma/migrations/20211104210749_theme/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN "theme" TEXT NOT NULL DEFAULT E'light';
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 9195317a..88d54488 100644
--- a/prisma/schema.prisma
+++ b/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")
diff --git a/styles/globals.scss b/styles/globals.scss
index a400149b..0a3d8ac3 100644
--- a/styles/globals.scss
+++ b/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;