fix(mobile): tag and detail page dark mode adaption (#9145)

This commit is contained in:
CatsJuice 2024-12-13 07:55:07 +00:00
parent 6f6f95a8b0
commit 133f21b9ca
No known key found for this signature in database
GPG Key ID: 1C1E76924FAFDDE4
6 changed files with 11 additions and 2 deletions

View File

@ -14,7 +14,7 @@ import { AppTabs } from '../../../components';
import { CollectionDetail } from '../../../views'; import { CollectionDetail } from '../../../views';
export const Component = () => { export const Component = () => {
useThemeColorV2('layer/background/secondary'); useThemeColorV2('layer/background/mobile/primary');
const { collectionService, globalContextService, workspaceService } = const { collectionService, globalContextService, workspaceService } =
useServices({ useServices({
WorkspaceService, WorkspaceService,

View File

@ -12,7 +12,7 @@ import { useParams } from 'react-router-dom';
import { TagDetail } from '../../../views'; import { TagDetail } from '../../../views';
export const Component = () => { export const Component = () => {
useThemeColorV2('layer/background/secondary'); useThemeColorV2('layer/background/mobile/primary');
const params = useParams(); const params = useParams();
const tagId = params.tagId; const tagId = params.tagId;

View File

@ -2,6 +2,10 @@ import { bodyEmphasized } from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
export const header = style({
background: cssVarV2.layer.background.mobile.primary,
});
export const headerContent = style([ export const headerContent = style([
bodyEmphasized, bodyEmphasized,
{ {

View File

@ -12,6 +12,7 @@ import * as styles from './detail.css';
export const DetailHeader = ({ collection }: { collection: Collection }) => { export const DetailHeader = ({ collection }: { collection: Collection }) => {
return ( return (
<PageHeader <PageHeader
className={styles.header}
back back
suffix={ suffix={
<MobileMenu items={<AllDocsMenu />}> <MobileMenu items={<AllDocsMenu />}>

View File

@ -12,6 +12,7 @@ export const TagDetailHeader = ({ tag }: { tag: Tag }) => {
const color = useLiveData(tag.color$); const color = useLiveData(tag.color$);
return ( return (
<PageHeader <PageHeader
className={styles.header}
back back
suffix={ suffix={
<MobileMenu items={<AllDocsMenu />}> <MobileMenu items={<AllDocsMenu />}>

View File

@ -2,6 +2,9 @@ import { bodyEmphasized } from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
export const header = style({
background: cssVarV2.layer.background.mobile.primary,
});
export const headerContent = style([ export const headerContent = style([
bodyEmphasized, bodyEmphasized,
{ {