It is not possible to customize the dialog that is shown by the client application to the user when a page closes/unloads in mostly ever. This is mainly because the dialog is a browser feature rather than HTML/DOM or related, which is the same rule for the alert(), confirm() and prompt() dialogues.

It is possible to hint some browsers what message to show to the user, but just some will really use it.

I think there are some browsers, but very few custom made, that may allow to use CSS to change a few things (like the browser theme)... But it will not be widely used, unless you control the browser that your users will use.

See this site for more details about theming the browser: https://css-tricks.com/meta-theme-color-and-trickery/

Just give it a test to see if the customized message will show in a specific browser:

// Avoid this. Use only when there really exists unsaved data.
window.addEventListener
(
  'beforeunload', beforeUnloadEvent =>
  {
    beforeUnloadEvent.preventDefault();
    
    beforeUnloadEvent.returnValue =
    (
      // Simply a customized confirmation message in targeted language.
      'Existem dados que não foram salvos, deseja realmente sair?'
    );
    
    console.log('Customized message:',beforeUnloadEvent.returnValue);
    
    // Retrocompatibility
    return beforeUnloadEvent.returnValue;
  }
);
unloadButton.addEventListener
(
  'click', clickEvent =>
  {
    document.location = 'about:blank';
  }
);

<button id="unloadButton">Unload</button>

By the way, I think it would be very cool to allow (with limitations) the application to theme the browser... E.g:

::theme:dialog
{
  background-color: white;
  color: red;
  border: 4px solid black;
}

How about making a feature request?