To make it more visible if the page is not saved yet (next to the slightly different title color), I added a little indicator. This one is animated, but if you frequently work offline a static indicator might be better:
.sb-unsaved .cm-line::after {
content: url('data:image/svg+xml,<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z" fill="%23ffffff"/></svg>');
animation: spinner 1s linear infinite;
margin: 0 5px;
opacity: 0.3;
}
@keyframes spinner {
to {transform: rotate(360deg);}
}
Static example:
.sb-unsaved .cm-line::after {
content: url('data:image/svg+xml,<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.501 6.501 0 0 0-11.42 3.448H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z" fill="%23ffffff"/></svg>');
margin: 0 5px;
}
Set one of these as space-style, et voilá! A little indicator appears behind your title any time you have unsaved changes. 
The icon is white, which works well in a dark theme. But you can possible also use a variable to change its fill color based on the active theme.
3 Likes
Found a way to tie it to the text color of the (unsaved) title:
.sb-unsaved .cm-line::after {
background-color: var(--top-unsaved-color); /* color of the icon */
content: " "; /* fill this space with sufficient invisible content */
display: inline-block; /* inline ensures it stays behind the title, block makes it sizeable */
height: 24px; width: 24px; /* set the size, otherwise it gets a bit wonky */
/* Use mask-image to only show the colourd background where the svg is */
mask-image: url('data:image/svg+xml,<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.75 3A2.75 2.75 0 0 0 3 5.75v12.5A2.75 2.75 0 0 0 5.75 21h4.249a2.112 2.112 0 0 1 .062-.593l.227-.907H7.5v-5.25a.75.75 0 0 1 .75-.75h6.603l1.435-1.435A2.258 2.258 0 0 0 15.75 12h-7.5A2.25 2.25 0 0 0 6 14.25v5.25h-.25c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25H7v2.75A2.25 2.25 0 0 0 9.25 9.5h4.5A2.25 2.25 0 0 0 16 7.25V4.523c.358.06.692.23.952.49l2.035 2.035c.329.328.513.773.513 1.238v1.721c.07-.005.142-.007.213-.007h.002c.437 0 .875.087 1.285.261V8.287a3.25 3.25 0 0 0-.952-2.299l-2.035-2.035A3.25 3.25 0 0 0 15.714 3H5.75ZM8.5 7.25V4.5h6v2.75a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75Z" fill="%23fff"/><path d="M19.715 11h-.002c-.585 0-1.17.223-1.615.67l-5.902 5.902a2.684 2.684 0 0 0-.707 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.684 2.684 0 0 0 1.248-.707l5.902-5.902A2.285 2.285 0 0 0 19.715 11Z" fill="%23fff"/></svg>');
/* Add a bit of space between it and the title text */
margin: 0 5px;
}
The SVG icon I take from https://fluenticons.co/; copy the svg and put it through something like this SVG to CSS tool to properly format it for use in CSS.