Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Colour scheme toggle icon ignores the sidebar tool size

Open Beginner friendly
  • Is something wrong?
#15,179 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
sass
Domain
frontend

Research direction

Read src/resources/formats/html/bootstrap/_bootstrap-rules.scss at the linked rules around lines 1723–1731; the issue identifies the fixed ::before dimensions and the sidebar tool font size. Render the supplied website example and compare the toggle icon with the link icons. Done when the toggle icon matches their size.

Written by the indexing model from the issue text.

Description

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
Dominant language
JavaScript
Stars
6.1k
Forks
476
Avg merge
16h 57m
Merged PRs (30d)
102

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.