🧐[问题]自动深色模式不起作用？

alienzhangyw commented 10 months ago

🧐 问题描述

使用themMode="auto"，当在浏览器设置中切换外观主题时，页面主题不会自动变化。

💻 示例代码

src\app\layout.tsx

'use client';
import StyledComponentsRegistry from '@/lib/AntdRegistry';
import { ConfigProvider } from 'antd';
import { ThemeProvider } from 'antd-style';
import type { Metadata } from 'next';
import { ReactNode } from 'react';
import './globals.css';

export const metadata: Metadata = {
  title: 'UtcPay Demo App',
  description: 'App to demonstrate UtcPay',
};

export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <StyledComponentsRegistry>
          <ConfigProvider>
            <ThemeProvider themeMode="auto">
              {children}
            </ThemeProvider>
          </ConfigProvider>
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}

🚑 其他信息

如图，其他网页都变色了，就我这个还是浅色模式

arvinxx commented 10 months ago

内容是咋实现的？

alienzhangyw commented 9 months ago

内容是咋实现的？

src\app\eshop\layout.tsx

'use client';
import { ArrowLeftOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import { Layout } from 'antd';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ReactNode } from 'react';
import { CartProvider } from './CartContext';
import useStyles from './style';

const { Header, Content } = Layout;

export default function EShopLayout({ children }: { children: ReactNode }) {
  const { styles } = useStyles();
  const router = useRouter();
  return (
    <Layout className={styles.layout}>
      <Header className={styles.header}>
        <div className={styles.goBack} onClick={() => router.back()}><ArrowLeftOutlined /></div>
        <div className={styles.cart}><Link href="/eshop/cart">Cart <ShoppingCartOutlined /></Link></div>
      </Header>
      <Content className={styles.content}>
        <CartProvider>
          {children}
        </CartProvider>
      </Content>
    </Layout>
  );
}

src\app\eshop\page.tsx

'use client';
import { Card, Col, Row, Typography } from 'antd';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import products from './products';
import useStyles from './style';

const { Title, Paragraph } = Typography;
const { Meta } = Card;

export default function EShopPage() {
  const { styles } = useStyles();
  const router = useRouter();
  return (
    <div>
      <Title className={styles.title}>Products</Title>
      <Row gutter={[16, 16]}>
        {
          products.map((product) => (
            <Col xs={24} sm={12} md={8} lg={6} xxl={4} key={product.id}>
              <Card
                bordered={false}
                hoverable
                cover={<Image
                  src={product.imageUrl}
                  alt={product.name}
                  width={180}
                  height={160}
                  className={styles.productImage}
                />}
                onClick={() => router.push(`/eshop/product/${product.id}`)}
              >
                <Meta
                  title={
                    <Row justify="space-between">
                      <Col><Title level={4}>{product.name}</Title></Col>
                      <Col><Title level={4} type="danger">${(product.price / 100).toFixed(2)}</Title></Col>
                    </Row>}
                  description={<Paragraph ellipsis>{product.description}</Paragraph>}
                />
              </Card>
            </Col>
          ))
        }
      </Row>
    </div>
  );
}

会不会是因为我使用了这个？在 Next.js 中使用

arvinxx commented 9 months ago

App Router我还没试过。可能要试过之后才清楚

arvinxx commented 6 months ago

@alienzhangyw app router 我试过了，应该是没问题的。请检查下你的代码实现。如果还是排查不出来，请给个可复现仓库

alienzhangyw commented 6 months ago

@alienzhangyw app router 我试过了，应该是没问题的。请检查下你的代码实现。如果还是排查不出来，请给个可复现仓库

你能帮忙看下我上面贴的代码使用方式对不对吗？因为我同时用了antd和antd-style，两边的文档都有参考，不确定到底怎么用。比如ConfigProvider和ThemeProvider会不会冲突，是不是只要一个。

arvinxx commented 6 months ago

@alienzhangyw app router 我试过了，应该是没问题的。请检查下你的代码实现。如果还是排查不出来，请给个可复现仓库

你能帮忙看下我上面贴的代码使用方式对不对吗？因为我同时用了antd和antd-style，两边的文档都有参考，不确定到底怎么用。比如ConfigProvider和ThemeProvider会不会冲突，是不是只要一个。

CP 和 TP 不冲突。但如果没别的配置的话，CP可以不需要。

我看你的代码，看上去是 ok 的，但是为什么不生效，需要更进一步排查下。所以最好能给一个可复现demo

alienzhangyw commented 6 months ago

暂时不知道问题在哪里，用devtool仿真的prefers-color-scheme深色模式是正常的，但是如果Edge浏览器真的设置成深色主题，就不生效。另外在手机端，小米浏览器的深色模式是正常的，但是Chrome浏览器就不行，不知道小米用了什么黑科技。

ant-design / antd-style