Custom Styling / Scripts

The website’s visual appearance is controlled by CSS, which means many styles cannot be directly modified in Typst, such as font size and text color.

To change styles, you need to edit the CSS files directly.

Default Stylesheets

tufted loads four base stylesheets by default:

• Tufte CSS 1.8.0 from cdnjs: the original Tufte stylesheet
• assets/tufted.css: the heavily customized template stylesheet
• assets/theme.css: the stylesheet that controls dark/light mode
• assets/reading-nav.css: the floating contents rail

The site’s custom stylesheet is loaded after these base stylesheets.

Custom CSS

The tufted template accepts a css array parameter to specify custom stylesheet paths. The default is assets/custom.css. Custom stylesheets are loaded after the default ones, so they override rules from the defaults. For example:

#let template = tufted.tufted-web.with(
  // ...
  css: ("/assets/custom.css"),
  // ...
)

To customize the website style, just edit assets/custom.css. For example, to change link color:

a {
  color: #ff0000;
}

Custom JS Scripts

By default, the project loads the following JavaScript files on every page. They are located in assets/:

• code-blocks.js - adds line numbers and a copy button to code blocks
• format-headings.js - improves heading formatting
• theme-toggle.js - toggles dark/light mode
• marginnote-toggle.js - toggles margin notes (improves mobile experience)
• page-prefetch.js - warms local pages after load and on link intent

Reading pages also load reading-nav.js to create the floating contents rail. It is controlled by the template’s toc parameter.

These scripts are automatically loaded in tufted-lib/tufted.typ via the js-scripts parameter.

If you want to add your own JavaScript file, you can use the js-scripts parameter of tufted-web. It accepts an array of script paths. For example:

// config.typ
#let template = tufted.tufted-web.with(
  // ...
  js-scripts: ("/assets/custom.js"),
  // ...
)

If you need to add a JavaScript file only for a specific page, you can set js-scripts in that page’s metadata:

#import "../index.typ": template, tufted
#show: template.with(
  title: "Custom Styling",
  description: "Custom styling documentation",
  js-scripts: ("/assets/page-specific.js"),
)