First run prep for web package using shared_theme.

bin--build_themes.dart

import 'dart:io';
import 'package:<project_name>/themes.dart';

void main() async {
  await File('lib/src/_themes.g.scss').writeAsString(themeset.toString(), flush: true);
}

lib--app_component.dart

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:<project_name>/config.dart';
import 'src/example_list/example_list.dart';


@Component(
  selector: 'my-app',
  styleUrls: [
    'package:angular_components/app_layout/layout.scss.css',
    'app_component.css'
  ],
  templateUrl: 'app_component.html',
  directives: [
    MaterialToggleComponent,
    ExampleList,
  ],
)
class AppComponent {
  static const name = appName;
  bool dark = window.localStorage['theme'] == 'Dark';

  void toggle() {
    dark = !dark;
    final name = dark ? 'Dark' : 'Light';
    document.documentElement.className = 'theme-$name';
    window.localStorage['theme'] = name;
  }
}

lib--app_component.html

<header class="material-header shadow">
    <div class="material-header-row">
        <span>{{name}}</span>
        <div class="material-spacer"></div>
        <material-toggle label="Dark" [checked]="dark"
            (checkedChange)="toggle()"></material-toggle>
    </div>
</header>
<div id="content">
    <example-list></example-list>
</div>

lib--app_component.scss

@import 'src/themes.g';

:host {
  .material-header {
    @include font-title;
    @include primary-color;
  }
  #content {
    padding: 8px;
  }
}

lib--src--example_list--example_list.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'example-list',
  styleUrls: ['example_list.css'],
  templateUrl: 'example_list.html',
  directives: [
    MaterialButtonComponent,
    MaterialListComponent,
    MaterialListItemComponent,
    materialInputDirectives,
  ],
)
class ExampleList {
  void showSnackbar() {
    print('Snackbar is not an AngularDart component.');
  }
}

lib--src--example_list--example_list.html

<material-list>
    <material-list-item class="font-body1" style="white-space: normal;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </material-list-item>
    <material-list-item class="font-display4">Display4</material-list-item>
    <material-list-item class="font-display3">Display3</material-list-item>
    <material-list-item class="font-display2">Display2</material-list-item>
    <material-list-item class="font-display1">Display1</material-list-item>
    <material-list-item class="font-headline">Headline</material-list-item>
    <material-list-item class="font-title">Title</material-list-item>
    <material-list-item class="font-subhead">Subhead</material-list-item>
    <material-list-item class="font-body2">Body2</material-list-item>
    <material-list-item class="font-body1">Body1</material-list-item>
    <material-list-item class="font-button">Button</material-list-item>
    <material-list-item class="font-caption">Caption</material-list-item>

    <material-list-item><div class="primary-color">Primary</div></material-list-item>
    <material-list-item><div class="primary-color-light">Primary Light</div></material-list-item>
    <material-list-item><div class="primary-color-dark">Primary Dark</div></material-list-item>
    <material-list-item><div class="secondary-color">Secondary</div></material-list-item>
    <material-list-item><div class="secondary-color-light">Secondary Light</div></material-list-item>
    <material-list-item><div class="secondary-color-dark">Secondary Dark</div></material-list-item>
    <material-list-item><div class="background-color">Background</div></material-list-item>
    <material-list-item><div class="background-color-inverted">Background (inverted)</div></material-list-item>
    <material-list-item><div class="card-color">Card</div></material-list-item>
    <material-list-item><div class="divider-color">Divider</div></material-list-item>
    <material-list-item><div class="error-color">Error</div></material-list-item>
    <material-list-item>
        <material-button class="primary" (trigger)="showSnackbar()">Primary Button</material-button>
    </material-list-item>
    <material-list-item>
        <material-button class="secondary" (trigger)="showSnackbar()">Secondary Button</material-button>
    </material-list-item>
    <material-list-item>
        <!--type="text" is important here, it applies the inputBase theme. -->
        <material-input type="text"  label="Input" floatingLabel [displayBottomPanel]="false" ></material-input>
    </material-list-item>
</material-list>

lib--src--example_list--example_list.scss

@import '../themes.g';

:host {
  material-list-item {
    padding: 0;

    /// Give large text some extra room.
    &[class*="-display"] {
      padding: 12px 0;
    }

    [class*="-color"] {
      height: 56px;
      width: 256px;
      display: flex;
      align-items: center;
      justify-content: center;

      &.undefined {
        @include background-color;
      }
    }

    .background-color-inverted {
      @include invert-colors('background');
    }

    material-button.primary {
      margin: 12px 0;
    }
  }
}

web--index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="manifest" href="manifest.json" />
    <meta name="theme-color" content="#ffffff" />
    <title><project_name></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
    <script>
      // Set the theme without waiting for Angular to load.
      let name = window.localStorage['theme'] || 'Light';
      document.documentElement.className = `theme-${name}`;
    </script>
  </body>
</html>

web--styles.scss

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);

//@import 'package:angular_components/css/material/material';
@import 'package:<project_name>_web/src/themes.g';

/// Force all elements to be transparent by default. This makes theming elements
/// easier because many of the angular components set background colors to white.
///
/// It doesn't effect some elements, for example material-list needed to have
/// its background changed manually.
* {
  background-color: transparent;
}

body {
  @include background-color;
  @include font-body1;
  padding: 0;
  margin: 0;
}

material-button.primary {
  @include primary-button;
}
material-button.secondary {
  @include secondary-button;
}
material-button.tertiary {
  @include tertiary-button;
}
material-button .content {
  text-transform: none;
  // Inherit the colors set by the above mixins.
  color: inherit !important;
  background-color: inherit !important;
  border-radius: inherit !important;
}

material-list {
  @include background-color;
}
material-list-item {
  // Taken from `package:angular_components/material_list/mixins`.
  &:not([separator="present"]) {
    &:hover,
    &:focus,
    &.active {
      @include selected-row-color(background-color);
    }
  }
}


/// Material input hack.
/// This element was much harder than others to share a theme definition with
/// Flutter. However, it is pretty well duplicated here for both outline and
/// underline input types.
material-input[type="text"]:not(.no-theme) {
  padding: 16px 0 0 !important;
  @include background-color;
  .label-text {
    @include background-color;
  }
  .underline {
    display: none;
  }
  .top-section {
    @include input-base;
    margin-bottom: 2px !important;
    .input-container {
      margin: 0 !important;
    }
    .label-text.animated {
      transform: translateY(-50%) translateY(-10px) !important;
      padding: 0 2px;
    }

    /// Copy Flutter input behavior.
    /// hint color: the border and text color.
    /// if no hint color, use primary color for light themes and secondary color
    /// for dark themes.
    &:focus-within {
      @include themify {
        $hint: theme-color('hint');
        @if $hint and $hint !='inherit' {
          border-color: $hint;
          .label-text {
            color: $hint !important;
          }
        }
        @else {
          @if themed('brightness')=='light' {
            $color: theme-color('primary');
            border-color: $color;
            .label-text {
              color: $color !important;
            }
          }
          @else {
            $color: theme-color('secondary');
            border-color: $color;
            .label-text {
              color: $color !important;
            }
          }
        }
      }
    }
  }
}