Documentation
✨ Features
Dark theme

Dark theme for Google Forms

Google Forms has no dark mode — an embedded form stays bright white even on a dark website, which looks broken and hurts readability at night. CustomGForm lets you define a second, dark palette for the same form. Visitors whose device is set to dark mode get the dark version automatically, and you can pin the scheme yourself so the form always matches the page around it.

Key capabilities

  • A full dark palette alongside your light one — every color you can set in the light theme has a dark counterpart (background, text, links, inputs, borders, buttons, error states)
  • Automatic detection of the visitor's prefers-color-scheme system setting, with no code on your side
  • Optional in-form toggle so respondents can switch the scheme themselves; their choice is remembered for that form
  • Pin or sync the scheme from your own site with the data-theme embed attribute (or the theme React prop)
  • Light/Dark preview switch in the customizer, so you tune both palettes without leaving the page
  • AI theming generates a matching light and dark palette in one prompt
  • Works in both standard and popup embeds, and changes nothing about the data sent to Google Forms

Which scheme a visitor sees

The widget resolves the color scheme in this order — the first match wins:

  1. The visitor's own choice, if they used the in-form toggle before (stored in their browser, per form)
  2. The data-theme attribute on the embed — light or dark pin the scheme, auto defers to the system
  3. The device's system preference (prefers-color-scheme), which is also the default when data-theme is missing or has an unrecognized value
OptionTypeDescription
data-theme="auto"defaultFollows the visitor's system dark-mode setting. Also used when the attribute is absent.
data-theme="dark"stringAlways opens in dark mode, whatever the system setting is.
data-theme="light"stringAlways opens in light mode, whatever the system setting is.

Changing the attribute after the form has loaded re-renders it with the new scheme, so you can wire the form straight into your site's own light/dark switcher.

Dark mode is part of the Custom theme, not a separate addon — turn it on in the same theme customizer panel where you set your light colors. Saving a theme template stores the dark palette too, so a brand theme carries both schemes to your other forms.

Styling the page around the form

While the dark scheme is active, a standard embed adds the class cgf__theme-dark to the form's root element. Use it as a hook when the surrounding section of your page needs to react to the form's scheme:

.cgf__theme-dark {
  /* your own rules for the dark state */
}
⚠️

If you switch Enable dark mode off and save, the dark palette is removed from the form. Turning it back on starts from the default dark colors again.

Learn more



Theme customizerPrefilled fields