Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Colour scheme toggle icon ignores the sidebar tool size

Aperta Adatta ai principianti
  • Qualcosa non va?
#15,179 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
sass
Ambito
frontend

Direzione di ricerca

Leggi src/resources/formats/html/bootstrap/_bootstrap-rules.scss nelle regole collegate intorno alle righe 1723–1731; l’issue identifica le dimensioni fisse di ::before e la dimensione del carattere dello strumento della barra laterale. Esegui il rendering dell’esempio di sito web fornito e confronta l’icona di attivazione con le icone dei link. Il lavoro è completo quando l’icona di attivazione ha le stesse dimensioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement themes websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

In the tools row of a docked sidebar, the colour scheme toggle icon is larger than the other tool icons.
The tools take their size from the font size of the row (0.875rem), but the toggle icon is drawn by a ::before box with a fixed 1rem height, width and background size.

Measured with a docked sidebar that has a GitHub tool, a second link tool and the colour scheme toggle:

Tool Icon box ::before size
GitHub link 14.9px by 17px 14.875px by 14.875px
Second link 14.9px by 17px 14.875px by 14.875px
Colour scheme toggle 17px by 17px 17px by 17px

The red outlines in this screenshot mark the ::before box of each icon.

Sidebar tools row with the GitHub icon, a second link icon and the colour scheme toggle icon, each outlined in red. The toggle icon box is visibly larger than the two link icon boxes.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: t
  sidebar:
    style: docked
    tools:
      - icon: github
        href: https://example.org
        aria-label: Example repository
      - icon: twitter
        href: https://example.org
        aria-label: Example social
    contents: [index.qmd]
format:
  html:
    theme:
      light: default
      dark: darkly

index.qmd is any page with a title.
Render the project and compare the size of the three tool icons at the top of the sidebar.

Actual behavior

The toggle icon is 17px, and the link icons are 14.875px.

Expected behavior

The toggle icon has the same size as the other tools in the row, for example by sizing the ::before box in em instead of rem.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Lingua principale
JavaScript
Stelle
6.1k
Fork
471
Merge medio
16h 57m
PR unite (30g)
102

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.