Skip to content

Commit f605455

Browse files
lastnamearyapraveenweb
lastnamearya
and
praveenweb
authored
add dark mode theme (close hasura#16) (hasura#62)
* add prettier setup * add eslint package & eslint settings update * Add title tag for a11y * add dark mode toggle switch * basic theme setup * add Global Styles file * add dark mode for reading content * fix ~ padding in pre element * add dark mode for NextPrevious Buttons * update NextPrevious refactor to Functional Component * fix ~ Main top padding * fix ~ Table row background on dark mode Co-authored-by: Praveen Durairaju <praveend.web@gmail.com>
1 parent 5c165af commit f605455

25 files changed

+1415
-242
lines changed

‎gatsby-node.js‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
const componentWithMDXScope = require("gatsby-plugin-mdx/component-with-mdx-scope");
2-
const path = require("path");
3-
const startCase = require("lodash.startcase");
4-
const config = require("./config");
1+
const componentWithMDXScope = require('gatsby-plugin-mdx/component-with-mdx-scope');
2+
3+
const path = require('path');
4+
5+
const startCase = require('lodash.startcase');
6+
7+
const config = require('./config');
58

69
exports.createPages = ({ graphql, actions }) => {
710
const { createPage } = actions;
11+
812
return new Promise((resolve, reject) => {
913
resolve(
1014
graphql(
@@ -34,11 +38,11 @@ exports.createPages = ({ graphql, actions }) => {
3438
// Create blog posts pages.
3539
result.data.allMdx.edges.forEach(({ node }) => {
3640
createPage({
37-
path: node.fields.slug ? node.fields.slug : "/",
38-
component: path.resolve("./src/templates/docs.js"),
41+
path: node.fields.slug ? node.fields.slug : '/',
42+
component: path.resolve('./src/templates/docs.js'),
3943
context: {
40-
id: node.fields.id
41-
}
44+
id: node.fields.id,
45+
},
4246
});
4347
});
4448
})
@@ -49,18 +53,18 @@ exports.createPages = ({ graphql, actions }) => {
4953
exports.onCreateWebpackConfig = ({ actions }) => {
5054
actions.setWebpackConfig({
5155
resolve: {
52-
modules: [path.resolve(__dirname, "src"), "node_modules"],
53-
alias: {
54-
$components: path.resolve(__dirname, "src/components"),
55-
buble: '@philpl/buble' // to reduce bundle size
56-
}
57-
}
56+
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
57+
alias: {
58+
$components: path.resolve(__dirname, 'src/components'),
59+
buble: '@philpl/buble', // to reduce bundle size
60+
},
61+
},
5862
});
5963
};
6064

6165
exports.onCreateBabelConfig = ({ actions }) => {
6266
actions.setBabelPlugin({
63-
name: "@babel/plugin-proposal-export-default-from"
67+
name: '@babel/plugin-proposal-export-default-from',
6468
});
6569
};
6670

@@ -69,36 +73,37 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
6973

7074
if (node.internal.type === `Mdx`) {
7175
const parent = getNode(node.parent);
72-
let value = parent.relativePath.replace(parent.ext, "");
7376

74-
if (value === "index") {
75-
value = "";
77+
let value = parent.relativePath.replace(parent.ext, '');
78+
79+
if (value === 'index') {
80+
value = '';
7681
}
7782

78-
if(config.gatsby && config.gatsby.trailingSlash) {
83+
if (config.gatsby && config.gatsby.trailingSlash) {
7984
createNodeField({
8085
name: `slug`,
8186
node,
82-
value: value === "" ? `/` : `/${value}/`
87+
value: value === '' ? `/` : `/${value}/`,
8388
});
8489
} else {
8590
createNodeField({
8691
name: `slug`,
8792
node,
88-
value: `/${value}`
93+
value: `/${value}`,
8994
});
9095
}
9196

9297
createNodeField({
93-
name: "id",
98+
name: 'id',
9499
node,
95-
value: node.id
100+
value: node.id,
96101
});
97102

98103
createNodeField({
99-
name: "title",
104+
name: 'title',
100105
node,
101-
value: node.frontmatter.title || startCase(parent.name)
106+
value: node.frontmatter.title || startCase(parent.name),
102107
});
103108
}
104109
};

‎src/CommunityAuthor.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import './components/styles.css';
32

43
const CommunityAuthor = ({ name, imageUrl, twitterUrl, githubUrl, description }) => {
54
return (

‎src/GithubLink.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
22
const githubIcon = require('./components/images/github.svg');
33

4-
import './components/styles.css';
5-
64
const GithubLink = ({ link, text }) => {
75
return (
86
<a href={link} className="githubSection">

‎src/YoutubeEmbed.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import './components/styles.css';
32

43
const YoutubeEmbed = ({ link }) => {
54
return (

‎src/components/DarkModeSwitch.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import styled from '@emotion/styled';
3+
4+
import NightImage from './images/night.png';
5+
import DayImage from './images/day.png';
6+
7+
const StyledSwitch = styled('div')`
8+
display: flex;
9+
justify-content: flex-end;
10+
width: 100%;
11+
padding: 0 20px 0 25px;
12+
13+
/* The switch - the box around the slider */
14+
.switch {
15+
position: relative;
16+
display: inline-block;
17+
width: 50px;
18+
height: 20px;
19+
}
20+
21+
/* Hide default HTML checkbox */
22+
.switch input {
23+
opacity: 0;
24+
width: 0;
25+
height: 0;
26+
}
27+
28+
/* The slider */
29+
.slider {
30+
position: absolute;
31+
cursor: pointer;
32+
top: 0;
33+
left: 0;
34+
right: 0;
35+
bottom: 0;
36+
background-color: #ccc;
37+
-webkit-transition: 0.4s;
38+
transition: 0.4s;
39+
}
40+
41+
.slider:before {
42+
position: absolute;
43+
content: '';
44+
height: 30px;
45+
width: 30px;
46+
left: 0px;
47+
bottom: 4px;
48+
top: 0;
49+
bottom: 0;
50+
margin: auto 0;
51+
-webkit-transition: 0.4s;
52+
transition: 0.4s;
53+
box-shadow: 0 0px 15px #2020203d;
54+
background: white url(${NightImage});
55+
background-repeat: no-repeat;
56+
background-position: center;
57+
}
58+
59+
input:checked + .slider {
60+
background: linear-gradient(to right, #fefb72, #f0bb31);
61+
}
62+
63+
input:checked + .slider:before {
64+
-webkit-transform: translateX(24px);
65+
-ms-transform: translateX(24px);
66+
transform: translateX(24px);
67+
background: white url(${DayImage});
68+
background-repeat: no-repeat;
69+
background-position: center;
70+
}
71+
72+
/* Rounded sliders */
73+
.slider.round {
74+
border-radius: 34px;
75+
}
76+
77+
.slider.round:before {
78+
border-radius: 50%;
79+
}
80+
`;
81+
82+
export const DarkModeSwitch = ({ isDarkThemeActive, toggleActiveTheme }) => (
83+
<StyledSwitch>
84+
<label id="switch" className="switch">
85+
<input
86+
type="checkbox"
87+
id="slider"
88+
onChange={toggleActiveTheme}
89+
checked={isDarkThemeActive ? false : true}
90+
/>
91+
<span className="slider round"></span>
92+
</label>
93+
</StyledSwitch>
94+
);

‎src/components/Header.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import { StaticQuery, graphql } from 'gatsby';
33
import GitHubButton from 'react-github-btn';
44
import Link from './link';
5-
import './styles.css';
6-
import config from '../../config.js';
7-
85
import Loadable from 'react-loadable';
6+
7+
import config from '../../config.js';
98
import LoadingProvider from './mdxComponents/loading';
9+
import { DarkModeSwitch } from './DarkModeSwitch';
1010

1111
const help = require('./images/help.svg');
1212

@@ -39,7 +39,7 @@ function myFunction() {
3939
}
4040
}
4141

42-
const Header = ({ location }) => (
42+
const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
4343
<StaticQuery
4444
query={graphql`
4545
query headerTitleQuery {
@@ -158,6 +158,12 @@ const Header = ({ location }) => (
158158
</GitHubButton>
159159
</li>
160160
) : null}
161+
<li>
162+
<DarkModeSwitch
163+
isDarkThemeActive={isDarkThemeActive}
164+
toggleActiveTheme={toggleActiveTheme}
165+
/>
166+
</li>
161167
</ul>
162168
</div>
163169
</nav>

0 commit comments

Comments
 (0)