Skip to content

Commit

Permalink
feat: complete the dark mode on Features
Browse files Browse the repository at this point in the history
  • Loading branch information
@TwilightLogic
TwilightLogic committed May 13, 2024
1 parent cffeb22 commit abd9702
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 46 deletions.
14 changes: 10 additions & 4 deletions docs/website/components/index/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,9 @@ export default function Index({
</div>

{/* FEATURES */}
<div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-[#F5F5F5] flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0">
<div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-[#F5F5F5] dark:bg-inherit flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0">
<div className="px-4 max-w-[854px] w-full h-full">
<h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929]">
<h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929] dark:text-[#EEEBEB]">
{featuresTitle.split(' ').slice(0, -1).join(' ')}{' '}
<span className="text-[#FF914B]">{featuresTitle.split(' ').slice(-1)}</span>
</h2>
Expand All @@ -114,12 +114,18 @@ export default function Index({
className="flex flex-col items-center justify-center md:items-start md:justify-start"
>
<div className="w-12 h-12 md:w-16 md:h-16">
<Image src={feature.logo} alt="features logo" width={40} height={40} />
<Image
src={feature.logo}
alt="features logo"
width={40}
height={40}
className="dark:filter dark:invert dark:brightness-150"
/>
</div>
<h3 className="text-4xl font-medium text-[#FF914B] text-center md:text-start">
{feature.title}
</h3>
<p className="text-gray-600 mt-2 text-center md:text-start">
<p className="text-gray-600 mt-2 text-center md:text-start dark:text-[#EAEAEA]">
{feature.description}
</p>
</div>
Expand Down
87 changes: 45 additions & 42 deletions docs/website/theme.config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useConfig } from 'nextra-theme-docs'
const theme: DocsThemeConfig = {
docsRepositoryBase: 'https://github.com/rooch-network/rooch/blob/main/docs/website',
nextThemes: {
defaultTheme: 'light',
defaultTheme: 'system',
},
logo: (
<div>
Expand Down Expand Up @@ -56,49 +56,52 @@ const theme: DocsThemeConfig = {
? 'Unlocking infinite utility for the Bitcoin Economy'
: '开启比特币经济的无限可能'
return (
<>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="theme-color" content="#ffffff"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{/* MULTI-LANGUAGES */}
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="x-default"/>
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en-us"/>
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en"/>
<link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh-cn"/>
<link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh"/>
{/* WEBSITE */}
<meta name="description" content={pageDescription}/>
<meta property="og:description" content={pageDescription}/>
<meta property="og:image" content="https://rooch.network/logo/rooch-banner.png"/>
<meta name="apple-mobile-web-app-title" content="Rooch Network"/>
{/* TWITTER */}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="https://rooch.network"/>
<meta name="twitter:creator" content="https://rooch.network"/>
<meta name="twitter:title" content="Rooch Network | Unlocking Infinite Utility for the Bitcoin Economy"/>
<meta name="twitter:description" content={pageDescription}/>
<meta name="twitter:image" content="https://rooch.network/logo/rooch-banner.png"/>
<meta name="twitter:image:alt" content="Rooch Network"/>
{/* FAVICON */}
<link rel="icon" href="/logo/rooch_black_logo.svg" type="image/svg+xml"/>
<link rel="icon" href="/logo/rooch_black_logo.png" type="image/png"/>
<link
rel="icon"
href="/logo/rooch_white_logo.svg"
type="image/svg+xml"
media="(prefers-color-scheme: dark)"
/>
<link
rel="icon"
href="/logo/rooch_white_logo.png"
type="image/png"
media="(prefers-color-scheme: dark)"
/>
</>
<>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* MULTI-LANGUAGES */}
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="x-default" />
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en-us" />
<link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en" />
<link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh-cn" />
<link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh" />
{/* WEBSITE */}
<meta name="description" content={pageDescription} />
<meta property="og:description" content={pageDescription} />
<meta property="og:image" content="https://rooch.network/logo/rooch-banner.png" />
<meta name="apple-mobile-web-app-title" content="Rooch Network" />
{/* TWITTER */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://rooch.network" />
<meta name="twitter:creator" content="https://rooch.network" />
<meta
name="twitter:title"
content="Rooch Network | Unlocking Infinite Utility for the Bitcoin Economy"
/>
<meta name="twitter:description" content={pageDescription} />
<meta name="twitter:image" content="https://rooch.network/logo/rooch-banner.png" />
<meta name="twitter:image:alt" content="Rooch Network" />
{/* FAVICON */}
<link rel="icon" href="/logo/rooch_black_logo.svg" type="image/svg+xml" />
<link rel="icon" href="/logo/rooch_black_logo.png" type="image/png" />
<link
rel="icon"
href="/logo/rooch_white_logo.svg"
type="image/svg+xml"
media="(prefers-color-scheme: dark)"
/>
<link
rel="icon"
href="/logo/rooch_white_logo.png"
type="image/png"
media="(prefers-color-scheme: dark)"
/>
</>
)
},
project: {
link: 'https://github.com/rooch-network',
project: {
link: 'https://github.com/rooch-network',
},
chat: {
link: 'https://discord.gg/rooch',
Expand Down

0 comments on commit abd9702

Please sign in to comment.