Skip to content

Commit ebe3f93

Browse files
authored
[main < 149-implement-dark] Implement dark mode (#150)
* Enable dark mode * Update CSS * Enable dark mode and basic styling * Update gradient in left menu * Style dark mode * Add sitemap * Update styles * Remove shadow * Update analytics code
1 parent 214bf86 commit ebe3f93

10 files changed

+330
-242
lines changed

components/Footer.js

+20-20
Original file line numberDiff line numberDiff line change
@@ -20,86 +20,86 @@ const ExternalLink = ({ href, children }) => (
2020
);
2121

2222
const Footer = () => (
23-
<footer className="flex flex-col pt-[56px] lg:pt-[107px] px-[40px] lg:px-[156px] h-full lg:h-[511px] bg-[#F9F9F9] items-center">
23+
<footer className="flex flex-col pt-[56px] lg:pt-[107px] px-[40px] lg:px-[156px] h-full lg:h-[511px] bg-[#F9F9F9] dark:bg-[#231F20] items-center">
2424
<div className="flex flex-col lg:flex-row gap-[40px] lg:gap-[80px] mb-[45px]">
2525
<div className="flex flex-col mr-[140px] w-[162px] h-[56px]">
26-
<Image
27-
src="/docs/memgraph-logo-footer.svg"
26+
<Image className="bg-[url('/docs/memgraph-logo-footer.svg')] dark:bg-[url('/docs/memgraph-logo-footer-dark.svg')]"
27+
src="/docs/memgraph-logo-background.png"
2828
alt="Memgraph Logo"
2929
width="162"
3030
height="56"
3131
/>
3232
</div>
3333
<div className="flex flex-col gap-[12px]">
34-
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
34+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium dark:text-[#E6E6E6]">
3535
Documentation
3636
</div>
37-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
37+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
3838
<Link href="/getting-started">Get started</Link>
3939
</div>
40-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
40+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
4141
<Link href="/data-migration">Migrate data</Link>
4242
</div>
43-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
43+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
4444
<Link href="/querying">Query data</Link>
4545
</div>
46-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
46+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
4747
<Link href="/custom-query-modules">Create an app</Link>
4848
</div>
49-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
49+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
5050
<Link href="/data-visualization">Visualize data</Link>
5151
</div>
52-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
52+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
5353
<Link href="/advanced-algorithms">Use advanced algorithms</Link>
5454
</div>
5555
</div>
5656
<div className="flex flex-col gap-[12px]">
57-
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
57+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium dark:text-[#E6E6E6]">
5858
Community
5959
</div>
60-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
60+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
6161
<ExternalLink href="https://discord.gg/memgraph">
6262
Discord
6363
</ExternalLink>
6464
</div>
65-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
65+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
6666
<ExternalLink href="https://stackoverflow.com/questions/tagged/memgraphdb">
6767
Stack Overflow
6868
</ExternalLink>
6969
</div>
70-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
70+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
7171
<ExternalLink href="https://twitter.com/memgraphdb">
7272
Twitter
7373
</ExternalLink>
7474
</div>
7575
</div>
7676
<div className="flex flex-col gap-[12px]">
77-
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
77+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium dark:text-[#E6E6E6]">
7878
More
7979
</div>
80-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
80+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
8181
<ExternalLink href="https://cloud.memgraph.com/login">
8282
Memgraph Cloud
8383
</ExternalLink>
8484
</div>
85-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
85+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
8686
<ExternalLink href="https://playground.memgraph.com">
8787
Memgraph Playground
8888
</ExternalLink>
8989
</div>
90-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
90+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
9191
<ExternalLink href="https://github.com/memgraph/memgraph">
9292
GitHub
9393
</ExternalLink>
9494
</div>
95-
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
95+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal dark:text-[#E6E6E6]">
9696
<ExternalLink href="https://www.youtube.com/channel/UCZ3HOJvHGxtQ_JHxOselBYg">
9797
YouTube
9898
</ExternalLink>
9999
</div>
100100
</div>
101101
</div>
102-
<div className="flex flex-row text-[11px] text-[#646265] font-normal">
102+
<div className="flex flex-row text-[11px] text-[#646265] font-normal dark:text-[#E6E6E6]">
103103
Copyright © 2023 Memgraph
104104
</div>
105105
</footer>

package.json

-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
"autoprefixer": "^10.4.15",
2323
"next": "^13.4.19",
2424
"next-sitemap": "^4.2.3",
25-
"next-themes": "^0.2.1",
2625
"nextra": "^2.12.3",
2726
"nextra-theme-docs": "^2.12.3",
2827
"postcss": "^8.4.29",

pages/_app.tsx

+20-19
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,40 @@ import Script from "next/script";
22
import type { AppProps } from 'next/app';
33
import { Inter } from 'next/font/google'
44
import '../styles/globals.css'
5-
import { ThemeProvider } from 'next-themes';
65

76
const inter = Inter({ subsets: ['latin'] });
87

98
function MyApp({ Component, pageProps }: AppProps) {
109
return (
1110
<>
12-
<Script src="https://www.googletagmanager.com/gtag/js?id=G-QCNYSWXVGM" />
13-
<Script strategy="lazyOnload" id="google_analytics">{`
11+
<Script src="https://www.googletagmanager.com/gtag/js?id=G-QCNYSWXVGM" />
12+
13+
<Script strategy="lazyOnload" id="google_analytics">{`
1414
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
1515
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
1616
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
1717
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
18-
})(window,document,'script','dataLayer','GTM-N45PRD5');
18+
})(window,document,'script','dataLayer','GTM-N45PRD5')
1919
window.dataLayer = window.dataLayer || [];
2020
function gtag(){dataLayer.push(arguments);}
2121
gtag('js', new Date());
2222
gtag('config', 'G-QCNYSWXVGM');
2323
`}</Script>
2424

25-
<Script strategy="lazyOnload" id="segment">{`
25+
<Script strategy="lazyOnload" id="segment">{`
2626
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="CqNYSAW7IN6mk3psB5M7tb4FS6BD9fJx";analytics.SNIPPET_VERSION="4.13.2";
2727
analytics.load("CqNYSAW7IN6mk3psB5M7tb4FS6BD9fJx");
2828
analytics.page();
2929
}}();
3030
`}</Script>
3131

32-
<Script strategy="lazyOnload" src="https://leadbooster-chat.pipedrive.com/assets/loader.js" />
32+
{/* <Script strategy="lazyOnload" id="pipedrive">{`
33+
window.pipedriveLeadboosterConfig = {base: 'leadbooster-chat.pipedrive.com',companyId: 7580008,playbookUuid: '7d9b46d7-3fc3-41d6-9c4f-d597e81fd098',version: 2};(function () {var w = window;if (w.LeadBooster) {console.warn('LeadBooster already exists');} else {w.LeadBooster = {q: [],on: function (n, h) {this.q.push({ t: 'o', n: n, h: h });},trigger: function (n) {this.q.push({ t: 't', n: n });},};}})();
34+
`}</Script>
35+
36+
<Script strategy="lazyOnload" src="https://leadbooster-chat.pipedrive.com/assets/loader.js" /> */}
3337

34-
<Script strategy="lazyOnload" id="outfunnel">{`
38+
<Script strategy="lazyOnload" id="outfunnel">{`
3539
window.OFID = "619cd60794500205bf055239";
3640
(function(){
3741
var script = document.createElement('script');
@@ -41,31 +45,28 @@ document.getElementsByTagName('head')[0].appendChild(script);
4145
})();
4246
`}</Script>
4347

44-
<Script strategy="lazyOnload" id="linkedin">{`
48+
<Script strategy="lazyOnload" id="linkedin">{`
4549
_linkedin_partner_id = "2463025";
4650
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
4751
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
4852
(function(){var s = document.getElementsByTagName("script")[0];
4953
var b = document.createElement("script");
50-
b.type="text/javascript";b.async=true;
51-
b.src="https://snap.licdn.com/li.lms-analytics/insight.min.js";
52-
s.parentNode.insertBefore(b,s);})();
54+
b.type = "text/javascript";b.async = true;
55+
b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
56+
s.parentNode.insertBefore(b, s);})();
5357
`}</Script>
54-
55-
<Script src="//static.ads-twitter.com/oct.js" />
56-
<Script strategy="lazyOnload" id="twitter">{`
58+
{/*
59+
<Script src="//static.ads-twitter.com/oct.js" />
60+
<Script strategy="lazyOnload" id="twitter">{`
5761
twttr.conversion.trackPid('o8ess', { tw_sale_amount: 0, tw_order_quantity: 0 });
58-
`}</Script>
62+
`}</Script> */}
5963

60-
<Script strategy="lazyOnload" id="reddit">{`
64+
<Script strategy="lazyOnload" id="reddit">{`
6165
!function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document);rdt('init','t2_lrrq2wp9');rdt('track', 'PageVisit');
6266
`}</Script>
63-
64-
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
6567
<main className={inter.className}>
6668
<Component {...pageProps} />
6769
</main>
68-
</ThemeProvider>
6970
</>
7071
);
7172
}

public/external-link.svg

+8
Loading

public/memgraph-logo-background.png

165 Bytes
Loading

public/memgraph-logo-footer-dark.svg

+32
Loading

0 commit comments

Comments
 (0)