The Sentry Maven Skin's look and feel can be easily customized for your documentation with a simple configuration setting, or a few CSS properties.

Basic Themes

By default, the Sentry Maven Skin comes in nice shades of blue, featuring Raleway and Lato elegant fonts. Using the <bodyClass> property under <custom> in src/site/site.xml, you can specify a different color scheme:

<bodyClass> Screenshot
sentry-blue Screenshot of the skins default color scheme (blue)
sentry-green Screenshot of the sentry-green color scheme
sentry-orange Screenshot of the sentry-orange color scheme
sentry-purple Screenshot of the sentry-purple color scheme

Example of site.xml:


How CSS customization works

Create a src/site/resources/css/site.css file in your project. This CSS will be loaded with your documentation and that will override the CSS that ships by default with the skin.

In this site.css, you will redefine the value of a few CSS variables[1] on the <body> element for colors, and on the :root element for the fonts.


You will mainly set 7 CSS variables to modify the colors of the skin for your documentation:

CSS Variable Description
--banner-bgcolor Main theme color, used in the title banner background.
--banner-fgcolor Text color in the title banner. Must provide enough contrast with banner-bgcolor for accessibility.
--main-bgcolor Main content background color (usually white).
--main-fgcolor Main content text color (usually black).
--alternate-bgcolor Alternate background color for highlighting content (typically a shade of var(--banner-bgcolor)).
--alternate-fgcolor Alternate foreground color for highlighted content (typically white or a shade of var(--banner-fgcolor)).
--link-color Color for the links (usually something blue).
/* We're only customizing the title banner background color and the links */
body {
  --banner-bgcolor: #266fd0;
  --alternate-bgcolor: var(--banner-bgcolor);
  --alternate-fgcolor: var(--banner-fgcolor);
  --link-color: #d50c37;

Colors default values

Default values for all customizable colors are (variable names are self-explanatory):

body {
	--banner-bgcolor: #3399ff;
	--banner-fgcolor: #fff;
	--main-bgcolor: #fff;
	--main-fgcolor: #000;
	--alternate-bgcolor: #c0defd;
	--alternate-fgcolor: #013e7a;
	--link-color: #266eb7;;

	--success-bg: #d6e9c6;
	--success-fg: #32661c;
	--info-bg: #bce8f1;
	--info-fg: #0e5172;
	--warning-bg: #faebcc;
	--warning-fg: #7f6c08;
	--danger-bg: #ebccd1;
	--danger-fg: #680c0c;

Dark colors

When the user is displaying your documentation using a dark colors scheme, the dark class is added to the <body> element, so you can customize the colors to use when in dark mode with the body.dark CSS selector:

/* Default colors in light mode */
body {
  --banner-bgcolor: #266fd0;
  --alternate-bgcolor: var(--banner-bgcolor);
  --alternate-fgcolor: var(--banner-fgcolor);
  --link-color: #d50c37;
/* Use a lighter red when in dark mode */
body.dark {
  --link-color: #ff6989;

Default values for colors in dark are:

body.dark {
	--main-bgcolor: #343434;
	--main-fgcolor: #fff;
	--link-color: #81cbf7;
	--success-bg: #32661c;
	--success-fg: #d6e9c6;
	--info-bg: #0e5172;
	--info-fg: #bce8f1;
	--warning-bg: #7f6c08;
	--warning-fg: #faebcc;
	--danger-bg: #680c0c;
	--danger-fg: #ebccd1;


3 main font families are used by the Sentry Maven Skin, which can be customized with the below CSS variables defined on the :root pseudo-element:

CSS Variable Description Default
--title-font Mainly used for the project title in the banner and the document title. Raleway
--heading-font Used for headings in the document, and header and footer. Raleway
--content-font Used in the main content of your documentation, everywhere else. Lato
--content-font-size Associated default font size for the main content. 15px

Each of these variables can specify several alternate fonts[2] if the first one is not available on the reader's system.

Example of site.css:

:root {
  --title-font: "Gill Sans", sans-serif;
  --heading-font: system-ui;
  --content-font: Georgia, serif;
  --content-font-size: medium;

All fonts customizable properties

Actually, the font family, size, weight and style can all be customized with CSS variables defined on the :root element. The HTML page is split in 6 main sections with separate settings:

  • top-... for the very top header
  • banner-... for the colorful banner with the project title
  • left-... for the navigation menu on the left
  • main-title-... for the document title
  • content-... for the content default properties
  • bottom-... for the page footer

The default values for all fonts properties are:

:root {
	--content-font: 'Lato', sans-serif;
	--content-font-size: 15px;

	--title-font: 'Raleway', sans-serif;
	--heading-font: 'Raleway', sans-serif;

	--top-font: var(--heading-font);
	--top-font-size: small;
	--top-font-weight: normal;
	--top-font-style: normal;

	--left-title-font: var(--title-font);
	--left-title-font-size: var(--content-font-size);
	--left-title-font-weight: var(--main-title-font-weight);
	--left-title-font-style: var(--main-title-font-style);

	--left-font: var(--content-font);
	--left-font-size: var(--content-font-size);
	--left-font-weight: normal;
	--left-font-style: normal;

	--banner-font: var(--title-font);
	--banner-font-size: xx-large;
	--banner-font-weight: bold;
	--banner-font-style: normal;

	--main-title-font: var(--title-font);
	--main-title-font-size: 40px;
	--main-title-font-weight: bold;
	--main-title-font-style: normal;

	--h2-font-size: xx-large;
	--h2-font-weight: bold;
	--h2-font-style: normal;

	--h3-font-size: x-large;
	--h3-font-weight: normal;
	--h3-font-style: normal;

	--h4-font-size: large;
	--h4-font-weight: normal;
	--h4-font-style: italic;

	/* Bottom same as top */
	--bottom-font: var(--top-font);
	--bottom-font-size: var(--top-font-size);
	--bottom-font-weight: var(--top-font-weight);
	--bottom-font-style: var(--top-font-style);
No results.