Making CSS style changes

By Craig Buckler

235 words, 2-minute read

paint
Image courtesy of David Pisnoy

This theme’s CSS files are managed by Publican rather than a third-party bundler such as esbuild, PostCSS, or Lightning. CSS files are contained in src/content/css/ and mostly copied as-is – although you could insert jsTACS ${ expressions } if required.

main.css #

main.css is the root stylesheet which @imports others from the sub-directories:

You can add, remove, or rearrange CSS files as necessary.

The template partial src/template/_partials/htmlhead.html sets a Content Security Policy in the HTML <head>. You may need to update the <meta> tag if you load resources from third-party domains.

In development mode, a date/time value is appended as a querystring to the @import URL to ensure CSS files are hot-reloaded when a change occurs. It is not added when creating a production build.

---
refresh: ${ tacs.config.isDev ? `?${ +new Date() }` : '' }
---
@import url('./core/elements.css${ data.refresh }');

core/variables.css #

You can change CSS variables defined in core/variables.css to modify fonts, layout dimensions, and colors.

Colors are defined using the CSS light-dark() function which sets light and dark theme colors. For example, the primary background color:

:root {
  --color-back1: light-dark(#fff, #151719);
}