theme.css

html, body {
  margin: 0;
  padding: 0;
}

body {
  /* This is a font-stack that tries to use the system-default sans-serifs first */
  font-family: Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

tfjs-component-playground {
  --mdc-button-horizontal-padding: 0.5rem;
  --mdc-snackbar-action-color: #ccc;

  --tfjs-component-playground-article-gallery-display: flex;
  --tfjs-component-playground-article-gallery-item-flex: auto;
  --tfjs-component-playground-article-gallery-item-margin: 0;
  --tfjs-component-playground-button-margin: 0.5rem;
  --tfjs-component-playground-h1-font-size: 2.25rem;
  --tfjs-component-playground-h1-font-weight: 600;
  --tfjs-component-playground-img-max-width: 100%;
  --tfjs-component-playground-img-padding-top: 2rem;
  --tfjs-component-playground-li-display: list-item;
  --tfjs-component-playground-ul-list-style-type: disc;
  --tfjs-component-playground-ul-margin: 0 0 0 1rem;
}

.theme-light body {
  background-color: #fff;

  color: #000;
}

.theme-dark body {
  background-color: #111;

  color: #aaa;
}

.theme-light tfjs-component-playground {
  background-color: #fff;

  --drawer-scrim-background: rgba(0, 0, 0, 0.8);
  --mdc-text-field-fill-color: #eee;
  --mdc-theme-primary: #eee;
  --mdc-theme-secondary: #555;
  --mdc-theme-text-primary-on-dark: #111;
  --paper-dropdown-menu-color: #000;
  --paper-dropdown-menu-focused-color: #000;
  --paper-listbox-background-color: #fff;
  --paper-listbox-color: #111;
  --primary-background-color: #fff;
  --primary-color: #000;
  --primary-foreground-color: #111;
  --primary-text-color: #111;
  --secondary-text-color: #000;
  --text-color: #111;
  --tfjs-component-playground-branding-text-color: #eee;
  --tfjs-component-playground-button-background-color: #555;
  --tfjs-component-playground-drawer-header-background-color: #000;
  --tfjs-component-playground-drawer-header-color: #eee;
  --tfjs-component-playground-link-color: #111;
  --tfjs-component-playground-link-hover-color: #222;
  --tfjs-component-playground-link-hover-text-decoration: underline;
  --tfjs-component-playground-link-text-decoration: underline;
  --tfjs-component-playground-toolbar-background-color: #000;
}

.theme-dark tfjs-component-playground {
  background-color: #111;

  --drawer-scrim-background: rgba(0, 0, 0, 0.8);
  --mdc-text-field-fill-color: #444;
  --mdc-text-field-label-ink-color: #eee;
  --mdc-theme-primary: #888;
  --mdc-theme-secondary: #222;
  --mdc-theme-text-primary-on-dark: #eee;
  --mdc-button-disabled-ink-color: #111;
  --paper-dropdown-menu-color: #fff;
  --paper-dropdown-menu-focused-color: #fff;
  --paper-listbox-background-color: #111;
  --paper-listbox-color: #fff;
  --primary-background-color: #111;
  --primary-color: #fff;
  --primary-foreground-color: #eee;
  --primary-text-color: #eee;
  --secondary-text-color: #fff;
  --text-color: #eee;
  --tfjs-component-playground-branding-text-color: #fff;
  --tfjs-component-playground-button-background-color: rgba(0, 0, 0, 0.7);
  --tfjs-component-playground-drawer-header-background-color: #000;
  --tfjs-component-playground-drawer-header-color: #eee;
  --tfjs-component-playground-link-color: #eee;
  --tfjs-component-playground-link-hover-color: #fff;
  --tfjs-component-playground-link-hover-text-decoration: underline;
  --tfjs-component-playground-link-text-decoration: underline;
  --tfjs-component-playground-toolbar-background-color: #000;
}