Skip to content

Commit

Permalink
Merge pull request #313 from ssoda01/feat/add-dark-theme-config
Browse files Browse the repository at this point in the history
feat: add dark theme config #310
  • Loading branch information
guansss authored Jun 19, 2024
2 parents d92296c + 05a1885 commit 5c8a9b7
Show file tree
Hide file tree
Showing 13 changed files with 118 additions and 29 deletions.
4 changes: 2 additions & 2 deletions src/components/ActionCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,9 @@ const InlineCondition: FCC<{
title?: string
}> = ({ title, children }) => (
<div className="min-w-[5em] text-lg leading-none">
<span className="text-zinc-500 mr-0.5 tabular-nums font-bold">
<span className="text-zinc-500 dark:text-slate-100 mr-0.5 tabular-nums font-bold">
{children}
</span>
<span className="text-zinc-400 text-xs">{title}</span>
<span className="text-zinc-400 dark:text-slate-200 text-xs">{title}</span>
</div>
)
4 changes: 2 additions & 2 deletions src/components/FactItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export const FactItem: FCC<{
className,
)}
>
{icon && <Icon icon={icon} className="mr-2 text-zinc-500" />}
<div className="text-sm mr-2 text-zinc-500">{title}</div>
{icon && <Icon icon={icon} className="mr-2 text-zinc-500 dark:text-slate-100" />}
<div className="text-sm mr-2 text-zinc-500 dark:text-slate-100">{title}</div>
{children}
</div>
)
2 changes: 1 addition & 1 deletion src/components/HelperText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const HelperText: FCC<{
}

return (
<div className={clsx('flex text-gray-600 text-xs items-center', className)}>
<div className={clsx('flex text-gray-600 dark:text-zinc-400 text-xs items-center', className)}>
<Icon icon="info-sign" size={12} className="mr-1.5" />
<div>{child()}</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/OperationCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
/>
</div>
<div>
<div className="text-sm text-zinc-600 mb-2 font-bold">
<div className="text-sm text-zinc-600 dark:text-slate-100 mb-2 font-bold">
干员/干员组
</div>
<OperatorTags operation={operation} />
Expand Down Expand Up @@ -187,7 +187,7 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
/>
</div>
<div className="md:w-1/2">
<div className="text-sm text-zinc-600 mb-2 font-bold">
<div className="text-sm text-zinc-600 dark:text-slate-100 mb-2 font-bold">
干员/干员组
</div>
<OperatorTags operation={operation} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/drawer/NavAside.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const NavAside = () => {
<div className="flex-col w-full" key={link.to}>
<NavLink
to={link.to}
className="text-sm text-zinc-600 !no-underline"
className="text-sm text-zinc-600 dark:text-slate-100 !no-underline"
onClick={() => toggleNav()}
>
{({ isActive }) => (
Expand Down
2 changes: 1 addition & 1 deletion src/components/entity/EDifficulty.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const DifficultyTag: FC<{
'transition border border-solid !text-xs cursor-help tracking-tight !px-2 !py-1 !mx-1 !my-1 leading-none !min-h-0',
hardLevel
? 'bg-red-400 hover:bg-red-500 border-red-700 text-red-900'
: 'bg-slate-200 hover:bg-slate-300 border-slate-300 text-slate-700',
: 'bg-slate-200 hover:bg-slate-300 border-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-100',
)}
>
{content}
Expand Down
4 changes: 2 additions & 2 deletions src/components/entity/ELevel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const NeoELevel: FC<{
}

return (
<Tag className="transition border border-solid !text-xs tracking-tight !px-2 !py-1 !my-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
<Tag className="transition border border-solid !text-xs tracking-tight !px-2 !py-1 !my-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-100">
<div className="flex items-center">
<div className="flex whitespace-pre">
<span className="inline-block font-bold my-auto">{catThree}</span>
Expand All @@ -47,7 +47,7 @@ export const ELevel: FC<{
}

return (
<Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
<Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 dark:bg-slate-900 dark:text-slate-100">
<div className="flex items-center mx-1">
<div className="flex flex-col mr-2">
<H4 className="inline-block font-bold my-auto">{catThree}</H4>
Expand Down
4 changes: 2 additions & 2 deletions src/components/viewer/OperationRating.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ export const OperationRating: FC<{
layout === 'horizontal' ? IconSize.STANDARD : IconSize.LARGE
}
icon="star-empty"
className="text-zinc-600"
className="text-zinc-600 dark:text-slate-100"
/>
}
readonly
/>
)}
<div
className={clsx(
'text-sm text-zinc-500',
'text-sm text-zinc-500 dark:text-slate-100',
layout === 'horizontal' && !operation.notEnoughRating && 'mr-1.5',
)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/viewer/OperationSetViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -219,13 +219,13 @@ function OperationSetViewerInner({

<div className="flex flex-col items-start select-none tabular-nums">
<FactItem title="发布于" icon="time">
<span className="text-gray-800 font-bold">
<span className="text-gray-800 dark:text-slate-100 font-bold">
<RelativeTime moment={operationSet.createTime} />
</span>
</FactItem>

<FactItem title="作者" icon="user">
<span className="text-gray-800 font-bold">
<span className="text-gray-800 dark:text-slate-100 font-bold">
{operationSet.creator}
</span>
</FactItem>
Expand Down
6 changes: 3 additions & 3 deletions src/components/viewer/OperationViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -339,17 +339,17 @@ function OperationViewerInner({

<div className="flex flex-col items-start select-none tabular-nums">
<FactItem title="浏览量" icon="eye-open">
<span className="text-gray-800 font-bold">{operation.views}</span>
<span className="text-gray-800 dark:text-slate-100 font-bold">{operation.views}</span>
</FactItem>

<FactItem title="发布于" icon="time">
<span className="text-gray-800 font-bold">
<span className="text-gray-800 dark:text-slate-100 font-bold">
<RelativeTime moment={operation.uploadTime} />
</span>
</FactItem>

<FactItem title="作者" icon="user">
<span className="text-gray-800 font-bold">
<span className="text-gray-800 dark:text-slate-100 font-bold">
{operation.uploader}
</span>
</FactItem>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/AppLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const AppLayout: FCC = ({ children }) => (
<NavLink
key={link.to}
to={link.to}
className="text-sm text-zinc-600 !no-underline ml-2"
className="text-sm text-zinc-600 dark:text-slate-100 !no-underline ml-2"
>
{({ isActive }) => (
<Button minimal icon={link.icon} active={isActive}>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ export const IndexPage: ComponentType = withGlobalErrorBoundary(() => {

<AnnPanel className="mb-4" />

<div className="flex flex-wrap leading-relaxed mb-8">
<div className="flex flex-wrap leading-relaxed mb-8 section-social-links">
{SOCIAL_LINKS.map((link) => (
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-zinc-600 no-underline"
className="flex items-center text-zinc-600 dark:text-slate-100 no-underline"
>
{link.icon}
<span>{link.label}</span>
Expand Down
105 changes: 97 additions & 8 deletions src/styles/blueprint.less
Original file line number Diff line number Diff line change
Expand Up @@ -235,22 +235,111 @@ body {
}

.bp4-dark {
@dark-content-bg: #2f343c;

// background
.docs-content-wrapper {
@apply min-h-screen;
background-color: #2f343c;
background-color: @dark-content-bg;
}

// navbar
.bp4-navbar {

a,
.bp4-tag span {
@apply text-slate-50;
}
}

// 首页右侧友情链接
.section-social-links {
svg {
color: #8abbff;
}

span:hover {
@apply text-slate-50;
}
}


// 作业详情页
.bp4-card p,
.bp4-card div,
.markdown-body,
.markdown-body blockquote,
.markdown-body span {
@apply text-slate-100;
}

.markdown-body blockquote {
@apply bg-zinc-900;
}

// 通用样式 - 按钮、tag、提示
.bp4-button {
.bp4-button-text {
@apply text-slate-50;
}

&.bp4-minimal.bp4-intent-danger:hover:enabled {
@apply bg-red-500;
}
}

.bp4-tag {
background-color: #141c2b;
@apply bg-slate-900 text-slate-200;

&.bp4-intent-danger {
background-color: #b3303f;
@apply bg-red-500;
}

&.bp4-intent-primary {
background-color: #3498db;
@apply bg-blue-500;
}

}

.bp4-callout p {
@apply text-slate-50;
}

.bp4-label {

p,
span,
div {
@apply text-slate-100;
}
}
div,
p,
span {
color: #fff;

.bp4-text-muted {
@apply text-slate-100;
}

.bp4-menu {
.bp4-menu-item.bp4-selected {
@apply text-slate-100;
}
}

.bp4-form-group {
.bp4-form-helper-text {
@apply text-slate-100;
}

.bp4-input-group input {
@apply text-slate-100;
}
}

.bp4-tabs {

div,
span,
p {
@apply text-slate-100;
}
}
}

0 comments on commit 5c8a9b7

Please sign in to comment.