Notes for site authors

Tintly changes the colors of the pages people visit. It does not change what a page shows, sends or stores. This guide is for people who build web pages.

Ask Tintly to leave your page alone

Use one of these.

• A meta tag in the <head>: <meta name="tintly" content="off">
• An attribute on the root element: <html data-tintly="off">

Tintly reads both. It also follows them when your script adds or removes them later. The names and the word off are not case sensitive.

If a visitor turned Tintly on for your site by hand, the visitor wins and your page is themed. The request only holds for the default behavior.

The standard color-scheme property is another way to ask. When your page says only light, Tintly leaves it as you wrote it in the dark mode. When your page says only dark, Tintly leaves it as it is in every mode. You can write it in CSS on the root or the body, in the style attribute of the root or the body, or in <meta name="color-scheme" content="only light">. The Light, Paper and E-ink modes still theme a page that says only light, because your page is light anyway. A visitor who turned Tintly on for your site by hand overrides it, and the visitor can turn this respect off in Settings, General, with Leave pages as they are when they declare only light or only dark colors.

Tintly reads the meta tag and the style attribute before the first paint. It reads a declaration in a style sheet when the sheet arrives, so a first frame of the dark version can show before your page is left alone. The Filter engines read only the meta tag and the style attribute.

Offer your own dark theme

If your page has a dark theme, Tintly can show it and leave its own colors out. This works in the dark mode with the Dynamic engine, when Use the site's own dark theme is on. Tintly looks for:

• rules inside @media (prefers-color-scheme: dark)
• rules that start with a dark state of the root or the body, such as .dark, .dark-mode, .theme-dark or [data-theme="dark"]
• the color-scheme property with the word dark, for example color-scheme: light dark
• the light-dark() color function

Tintly turns your dark rules on and reads the result. It keeps your theme only when the page background is dark, the text has a contrast of at least 4.5 to 1 against it and no large light box is left in the middle of the window. If not, it uses its own colors.

Declare color-scheme: light dark in your CSS, and write a dark version of your colors in @media (prefers-color-scheme: dark). A page that is dark by itself is also left as it is, when Tintly finds it dark.

Help Tintly show your page well

• Use readable color pairs. Text and background must have enough contrast on their own. Tintly checks the text it can see and repairs some pairs, but it cannot guess your intent.
• Give text a background color. Text on a box with a solid background-color is themed with the box. Text on a transparent area depends on what is behind it. Text on a picture keeps the colors you chose.
• Avoid inline !important colors where a class would do. Tintly handles them, but they are the hardest rule to follow when a visitor changes the theme.
• Closed shadow roots. Tintly themes open and closed shadow roots in Chromium based browsers. In Firefox open roots are themed.

What Tintly never does

Tintly changes colors, fonts and the scheme hint only. It makes no network request of its own, except to read the style sheets and pictures of the page the visitor is on, and it sends nothing about your page anywhere.