Theme Builder

Colours for your phpMyFAQ 4.1 or 4.2 installation, with a live preview and contrast check.

phpMyFAQ 4.2 paints its frontend from a small set of CSS variables, one set per colour mode. Change them here, watch the preview, and paste the result into your installation. Everything runs in your browser; the theme is stored in the page URL, so you can bookmark or share it. The defaults shown are those of phpMyFAQ 4.2, but the exported CSS uses the same variables and colour modes as phpMyFAQ 4.1, so it works with phpMyFAQ 4.1 as well.

PrimaryButtons, links and active navigation items.

SecondarySecondary buttons and badges.

InfoInformational alerts and badges.

SuccessSuccess alerts and confirmation buttons.

WarningWarning alerts and badges.

DangerError alerts and destructive buttons.

LightLight text on dark surfaces such as the navigation.

DarkDark text and dark surfaces.

Navigation barBackground of the top navigation.

FooterBackground of the footer.

Page backgroundBackground behind the content area.

Body backgroundBackground of the content area.

Body textDefault text colour.

BordersCard and table borders.

LinksLink colour (high contrast only by default).

Link hoverLink colour on hover.

My FAQCategoriesAdd questionLogin

Welcome to the FAQ

How do I reset my password?

Use the "Forgot password" link on the login page and follow the email instructions.

This FAQ was updated yesterday.

Preview only: the links and buttons do nothing.

Contrast (Light)

Light and dark mode aim for WCAG 2.2 level AA: at least 4.5:1 for normal text.

Body text on body background15.43:1 Pass
Navigation text on navigation bar11.46:1 Pass
Footer text on footer11.95:1 Pass
White on primary button10.58:1 Pass
White on secondary button6.81:1 Pass
White on success3.39:1 Fail (needs 4.5:1)
White on danger4.35:1 Fail (needs 4.5:1)
Black on warning12.65:1 Pass
Primary as text on body background10.58:1 Pass

Export

Paste the CSS below into Admin → Configuration → Layout → Custom CSS. No file access needed, works on every phpMyFAQ 4.1 and 4.2 installation.

:root,
[data-bs-theme='light'] {
  --bs-light: #eceff9;
  --bs-dark: #060508;
  --bs-primary: #083c83;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #2f3035;
  --bs-pmf-footer: #142f48;
  --bs-pmf-background: #9eb6c9;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
}

[data-bs-theme='dark'] {
  --bs-light: #eceff9;
  --bs-dark: #060508;
  --bs-primary: #083c83;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #1d212a;
  --bs-pmf-footer: #1d212a;
  --bs-pmf-background: #14171d;
  --bs-body-bg: #14171d;
  --bs-body-color: #eceff9;
  --bs-border-color: #2e3440;
}

[data-bs-theme='high-contrast'] {
  --bs-light: #ffffff;
  --bs-dark: #000000;
  --bs-primary: #ffff00;
  --bs-secondary: #00ffff;
  --bs-info: #00ffff;
  --bs-success: #00ff00;
  --bs-warning: #ffff00;
  --bs-danger: #ff0000;
  --bs-pmf-nav: #000000;
  --bs-pmf-footer: #000000;
  --bs-pmf-background: #000000;
  --bs-body-bg: #000000;
  --bs-body-color: #ffffff;
  --bs-border-color: #ffffff;
  --bs-link-color: #ffff00;
  --bs-link-hover-color: #ffff66;
}

theme.css is for a copied template set: duplicate assets/templates/default, replace its theme.css with the download and select the set under Layout → Template set.

How it works

Pick a colour mode (light, dark or high contrast) and adjust the colours.
Check the contrast report. Light and dark should meet WCAG AA, high contrast AAA.
Copy the CSS into Admin → Configuration → Layout → Custom CSS, or download theme.css for a copied template set as described in the developer documentation.

Search

Theme Builder

Welcome to the FAQ

How do I reset my password?

Contrast (Light)

Export

How it works

Getting started

Resources

Misc

Get Connected

Theme Builder

Welcome to the FAQ

How do I reset my password?

Contrast (Light)

Export

How it works

Other interesting links

Getting started

Resources

Misc

Get Connected