skolhustick

//tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},

skolhustick

/* Based on https://docs.aws.amazon.com/code-samples/latest/catalog/javascript-athena-index.js.html */

const _ = require('lodash')
const Queue = require('async/queue')
const AWS = require('aws-sdk')
require('dotenv').config()

AWS.config.update({
  region: process.env.AWS_REGION,
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,

skolhustick

const AWS = require('aws-sdk')
require('dotenv').config()

// Configure AWS SDK with the credentials created before
// You should probably use a .env file for this
AWS.config.update({
  region: process.env.AWS_REGION,
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
})

skolhustick

import React from 'react'
import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
  Box,
  Flex,
  IconButton,
  useColorMode,

skolhustick

import React from 'react'
import Button from '../components/Button'

const Home = () => {
  return <Button>Theme Test</Button>
}

export default Home

skolhustick

import React, { useState, useEffect } from 'react'
import useDarkMode from 'use-dark-mode'
import { ThemeProvider } from 'styled-components'
import { lightTheme, darkTheme } from '../theme'

const MyApp = ({ Component, pageProps }) => {
  const [isMounted, setIsMounted] = useState(false)
  const darkMode = useDarkMode(true)
  const theme = darkMode.value ? darkTheme : lightTheme

skolhustick

import styled from 'styled-components'

const Button = styled.button`
  background: ${props => props.theme.bg};
  color: ${props => props.theme.fontColor};
`

Button.defaultProps = {
  theme: {
    bg: 'white',

skolhustick

const light = {
  bg: 'white',
  fontColor: 'purple'
}

const dark = {
  bg: 'black',
  fontColor: 'white'
}

skolhustick

import styled from 'styled-components'

const Button = styled.button`
  background: ${props => props.theme.bg.primary};
  color: ${props => props.theme.fontColor};
`

Button.defaultProps = {
  theme: {
    bg: 'white',

skolhustick

import React from 'react'
import Link from 'next/link'
import Head from 'next/head'

const links = [
  { href: 'https://zeit.co/now', label: 'ZEIT' },
  { href: 'https://github.com/zeit/next.js', label: 'GitHub' }
].map(link => ({
  ...link,
  key: `nav-link-${link.href}-${link.label}`