Material dynamic colors by Beercss

index.pug

nav.top
  button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg')")
    img.responsive(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg")
  button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg')")
    img.responsive(src="https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg")
  button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg')")
    img.responsive(src="https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg")
  button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg')")
    img.responsive(src="https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg")
  button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg')")
    img.responsive(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg")
  button.circle.flat(onclick="mode()")
    i light_mode

main.responsive
  h2.bold.page.top.active Material dynamic colors
  
  .large-space
  h3.bold.page.right.active Build whatever you want, seriously.
  .large-divider

  article.no-padding.round
    .row.no-space
      .col.s12.m4.s
        img.responsive.extra.top-round(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg")
      .col.s12.m4.m.l
        img.responsive.extra.left-round(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg")
      .col.s12.m8.padding
        .row.no-wrap.middle-align
          .col
            h5.no-margin Classic Utility Jacket
            span In stock
          .col.min
            h6 $110,00
        nav
          a.chip.square.active XS
          a.chip.square S
          a.chip.square M
          a.chip.square L
          a.chip.square XL
          label.l Size guide
        .large-divider
        nav
          button.flat Buy now
          button.border Add to bag
          button.border
            i favorite
        p Free shipping on all continental US orders.

  article.round.border
    .row.no-space
      .col.s12.m4
        img.responsive.extra.round(src="https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg")
      .col.s12.m8.padding
        h6.no-margin.bold Kids Jumpsuit
        h5.bold.middle-align
          span $39,00
          label  In stock
        nav
          a.chip.circle XS
          a.chip.circle S
          a.chip.circle M
          a.chip.circle L
          a.chip.circle XL
          label.l Size guide
        .large-divider
        nav
          button.flat.round Buy now
          button.flat.round Add to bag
          button.flat.circle
            i favorite
        p Free shipping on all continental US orders.

  article.small-padding
    .row.no-space
      .col.s12.m4
        img.responsive.extra(src="https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg")
      .col.s12.m8.large-padding
        h5.no-margin Dogtooth Style Jacket
        h6.middle-align 
          span $39,00 
          label  In stock
        nav
          a.chip.circle XS
          a.chip.circle S
          a.chip.circle M
          a.chip.circle L
          a.chip.circle XL
          label.l Size guide
        .large-divider
        nav
          button.flat.large Buy now
          button.large.border Add to bag
          button.large.border.square
            i favorite
        p Free shipping on all continental US orders.

  article.flat.top-shadow.white-text
    .row.no-space
      .col.s12.m4.padding
        img.responsive.large(src="https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg")
      .col.s12.m8.padding
        h5.no-margin Retro Shoe
        h6.middle-align $39,00 
          label.bold  In stock
        nav
          a.chip.circle.bottom-round.right-round XS
          a.chip.circle.bottom-round.right-round S
          a.chip.circle.bottom-round.right-round M
          a.chip.circle.bottom-round.right-round L
          a.chip.circle.bottom-round.right-round XL
          label.l Size guide
        .large-divider
        nav
          button.flat Buy now
          button.border Add to bag
          button.none
            i favorite
        p Free shipping on all continental US orders.
  
  .large-space
  h3.bold Responsive everything.
  .large-divider
  
  article.no-padding.flat
    .row.no-wrap.middle-align
      .col
        .s
          img.responsive.large(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg")
          .absolute.left.bottom.right.bottom-shadow.s.padding
            div Entire house
            h5 Beach House in Collingwood
        .large-padding
          .m.l
            div Entire house
            h5 Beach House in Collingwood
          div
            nav
              i star
              a 4.94
              a (128)
              a Collingwood, Ontario
            .m.l.large-divider
            nav
              a
                img.circle(src="https://tailwindcss.com/_next/static/media/kevin-francis.c9970f19128315df0cfda2b4f54eb981.jpg")
              a.bold Hosted by Kevin Francis
            nav
              button.flat.large Check availability
      .col.m.l.large-padding
        img.responsive.large.round(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg")
        .space.l
        .row.no-wrap.l
          .col.min
            img.round.extra(src="https://tailwindcss.com/_next/static/media/beach-house-interior-1.bc69273a536a51bb58092b2896b92e3a.jpg")
          .col.min
            img.round.extra(src="https://tailwindcss.com/_next/static/media/beach-house-interior-2.de1a47680b1fb31d36d1130dc925b197.jpg")
          .col

material-dynamic-colors-by-beercss.markdown

Material dynamic colors by Beercss

A Pen by Leonardo Wehrmeister on CodePen.

License.

script.js

const theme = async(from) => {
  await ui("theme", from);
};

const mode = () => {
  let newMode = ui("mode") == "dark" ? "light" : "dark";
  ui("mode", newMode);
}

scripts

<script src="https://cdn.jsdelivr.net/npm/beercss@2.1.1/dist/cdn/beer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.9/dist/cdn/material-dynamic-colors.min.js"></script>

styles

<link href="https://cdn.jsdelivr.net/npm/beercss@2.1.1/dist/cdn/beer.min.css" rel="stylesheet" />