CSS personalizado

Os temas do Jamdesk oferecem configurações padrão adequadas, mas você pode adicionar CSS personalizado para combinar com sua marca ou ajustar estilos específicos.

Adicionar CSS personalizado

Crie um arquivo style.css na raiz do projeto (na mesma pasta que docs.json). O Jamdesk aplica esse arquivo automaticamente a todas as páginas; não é necessário adicioná-lo ao docs.json.

Qualquer arquivo .css na raiz do projeto funciona, não apenas style.css, o que é útil ao migrar de outra ferramenta. Se houver vários arquivos, o Jamdesk os combina em ordem alfabética pelo nome.

Execute jamdesk dev para pré-visualizar o resultado localmente. O comando renderiza o CSS personalizado da mesma forma que no site publicado.

/* Your custom styles */
article h1 {
  font-size: 2.5rem;
}

Para ver um passo a passo mais detalhado sobre como mudar a cor do cabeçalho e adicionar um botão flutuante, consulte Exemplos de CSS e JS.

Variáveis CSS

As cores e os raios dos cantos são definidos por variáveis CSS. Substitua os valores em :root para atualizar todos os componentes que os utilizam:

:root {
  /* Page and text colors */
  --color-bg-primary: #ffffff;      /* page background */
  --color-bg-secondary: #f8fafc;    /* inputs, subtle panels */
  --color-text-primary: #0a0a0a;    /* headings */
  --color-text-secondary: #404144;  /* body text */
  --color-text-muted: #737373;      /* captions and hints */
  --color-border: #e2e8f0;

  /* Corner radius for cards, buttons and panels */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Os valores acima são os padrões do tema Jam. Outros temas começam com seus próprios valores, que você pode consultar nas ferramentas de desenvolvimento do navegador, no elemento <html>.

As cores da sua marca devem ser definidas em docs.json, não aqui. O Jamdesk transforma colors.primary na cor de destaque usada em links, botões e no item ativo da barra lateral. Consulte Cores personalizadas.

As fontes também devem ser definidas em docs.json. O campo fonts carrega uma fonte do Google Fonts ou um arquivo de fonte próprio e a aplica em todo o site. Definir font-family no CSS só funciona com !important, porque os temas definem fontes com seletores mais específicos. Consulte Tipografia.

Personalizações comuns

Alterar a fonte do código

Os blocos de código mantêm a fonte monoespaçada do tema, a menos que você a substitua com !important:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

article pre,
article pre code,
article code {
  font-family: 'Fira Code', monospace !important;
  font-variant-ligatures: common-ligatures;
}

Personalizar os estilos dos links

Os links no corpo da página sempre têm classes. Portanto, selecione-os pelo local onde aparecem, não com a:not([class]):

article .prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

article .prose a:hover {
  text-decoration-thickness: 2px;
}

Ajustar o espaçamento dos títulos

article .prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

article .prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

Estilizar blocos de aviso

Os blocos de aviso obtêm suas cores de variáveis terminadas em -bg, -border e -text:

/* Warmer Note callouts */
:root {
  --color-note-bg: #fef3c7;
  --color-note-border: #f59e0b;
}

Estilizar a aba ativa

article [role="tab"][aria-selected="true"] {
  border-bottom-width: 3px;
}

Modo escuro

No modo escuro, o Jamdesk adiciona a classe dark ao elemento <html>. Coloque as substituições do modo escuro em html.dark:

/* Light mode */
:root {
  --color-bg-primary: #fffdf7;
}

.custom-banner {
  background: #f0f4ff;
  color: #1e3a5f;
}

/* Dark mode */
html.dark {
  --color-bg-primary: #14110f;
}

html.dark .custom-banner {
  background: #1e293b;
  color: #e2e8f0;
}

Seletores a usar

Os nomes de classe do Jamdesk vêm do Tailwind e podem mudar em qualquer versão. Estes seletores são estáveis:

Fontes externas

Sempre que possível, carregue as fontes por meio de docs.json. O campo fonts aceita Google Fonts e arquivos hospedados por você, incluindo arquivos .woff2 no seu repositório, e aplica as fontes aos títulos e ao texto do corpo.

Use CSS como alternativa para fontes que não são cobertas por fonts, como a fonte do código mostrada acima ou uma fonte diferente em um único elemento. Carregue a fonte com @import ou @font-face e, em seguida, defina-a com !important:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

article .prose blockquote {
  font-family: 'CustomFont', serif !important;
}

Estilos responsivos

Use consultas de mídia para ajustar os estilos ao tamanho da tela:

/* Phones */
@media (max-width: 768px) {
  article h1 {
    font-size: 1.75rem;
  }
}

Depuração

Clique com o botão direito em um elemento e escolha Inspect para identificar o que deve ser selecionado. Prefira os seletores em Seletores a usar, funções como role="tab" e variáveis CSS em vez de nomes longos de classes do Tailwind. Se uma regra não for aplicada, confira o painel Styles para identificar uma regra do tema que prevaleça por especificidade ou use !important.

Limitações

• O CSS é aplicado globalmente; use seletores específicos para evitar conflitos
• Alguns estilos do tema, incluindo fontes e o fundo do cabeçalho do Jam, usam !important ou seletores muito específicos. Talvez seja necessário usar !important para substituí-los
• Na pré-visualização local (jamdesk dev), as alterações nos arquivos CSS são aplicadas quando você atualiza o navegador; no site publicado, elas entram em vigor na próxima compilação

Próximos passos