Dark Mode no TabNews (beta)

Caso você queira acessar o Dark Mode Beta do TabNews, acesse por essa URL de Homologação:

https://tabnews-kyre21c3n-tabnews.vercel.app/

Essa implementação está sendo feita por ermesonsampaio no PR #377

Teste de Syntax Highlight em Dark Mode

import { Box, useTheme } from '@primer/react';
import { useRouter } from 'next/router';
import webserver from 'infra/webserver.js';
import { BaseLayout, Header } from 'pages/interface/index.js';
import { useEffect } from 'react';

export default function DefaultLayout({ children, containerWidth = 'large', metadata, content }) {
  const { setColorMode, colorMode } = useTheme();

  useEffect(() => {
    (async () => {
      const darkMode = window
        .matchMedia("(prefers-color-scheme: dark)")
        .matches;

      const systemTheme = !darkMode ? 'day' : 'night';
      const mode = await localStorage.getItem('theme') || systemTheme;

      setColorMode(mode);
    })();
  }, [setColorMode]);

  useEffect(() => {
    document
      .querySelector('html')
      .setAttribute('data-theme', colorMode);

    localStorage.setItem('theme', colorMode);
  }, [colorMode]);

  const router = useRouter();
  const webserverHost = webserver.getHost();
  const defaultMetadata = {
    title: 'TabNews',
    description: null,
    image: `${webserverHost}/default-image-share.png`,
    url: `${webserverHost}${router.asPath}`,
    noIndex: false,
  };

  let updatedMetadata = { ...defaultMetadata, ...metadata };

  if (content) {
    if (content.title) {
      updatedMetadata.title = `${content.title} · ${content.username}`;
    } else {
      updatedMetadata.title = `${content.username}/${content.slug}`;
    }
  }

  if (updatedMetadata.title && updatedMetadata.title != defaultMetadata.title) {
    updatedMetadata.title = `${updatedMetadata.title} · TabNews`;
  }

  return (
    <BaseLayout metadata={updatedMetadata}>
      <Header />
      <Box
        maxWidth={containerWidth}
        sx={{
          marginX: 'auto',
          display: 'flex',
          flexWrap: 'wrap',
          padding: [3, null, null, 4],
        }}>
        {children}
      </Box>
    </BaseLayout>
  );
}

Teste de quote

Esse Dark Mode ainda tem alguns comportamentos que precisam ser lapidados, mas ta ficando muito delicinha.

Teste de task

• Fazer deploy em Homologação.
• Consertar o flash of unstyled content que está fazendo piscar o fundo.
• Entender se estamos usando as abstrações certas para ficar fácil fazer o update das dependências.

Teste de tabela

Título	Descrição
Dark Mode	Massa
Light Mode	Massa também
Ermeson Sampaio	Ainda mais massa

Teste de Diagramas

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!