A version of the Beamer theme Metropolis for reveal.js

metropolis.css

/**
 * A simple theme for reveal.js presentations, derived from serif.css 
 * It's in the spirit of the Metropolis theme for beamer https://github.com/matze/mtheme
 *
 * This theme is Copyright (C) 2016 Vince Hodges, http://sourdoughlabs.com - it is MIT licensed.
 */

@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

.reveal a {
    line-height: 1.3em; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
    background: #f1f1f1;
    background-color: #f1f1f1; }

body.dark {
    background: #33474b;
    background-color: #33474b; }
    
body.dark .reveal {
    color:#f1f1f1;
}

body.dark .reveal h1,
body.dark .reveal h2,
body.dark .reveal h3,
body.dark .reveal h4,
body.dark .reveal h5,
body.dark .reveal h6 {
    color:#f1f1f1;
}

.reveal {
    font-family: "Fira Sans";
    font-size: 32px;
    font-weight: normal;
    color: #33474b; }

::selection {
    color: #fff;
    background: #26351C;
    text-shadow: none; }

.reveal .slides {
    text-align:left;
}

.reveal .slides > section,
.reveal .slides > section > section {
    line-height: 1.2;
    font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    margin: 0 0 20px 0;
    color: #33474b;
    font-family: "Fira Sans";
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    word-wrap: break-word; }

.reveal h1 {
    font-size: 1.77em; }

.reveal h2 {
    font-size: 1.30em; }

.reveal h3 {
    font-size: .95em; }

.reveal h4 {
    font-size: .75em; }

.reveal h1 {
    text-shadow: none; }

h1.subtitle {
    font-size: 1em;
    padding-bottom:15px;
    border-bottom: 2px solid #EB811B;
}

h2.author, h3.date {
    font-size: .6em;
}

h1.title {
    font-variant: small-caps;
}

.level2 h1 {
    font-size:1.57em;
    font-variant: small-caps;
    text-transform: lowercase;
}

.titleslide h1 {
    font-variant: small-caps;
    font-size:1.67em;
    margin-left:25px;
    margin-right:25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #EB811B;
}


/*********************************************
 * OTHER
 *********************************************/
.reveal p {
    margin: 20px 0;
    line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
    max-width: 95%;
    max-height: 95%; }

.reveal strong,
.reveal b {
    font-weight: bold; }

.reveal em {
    font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
    display: inline-block;
    text-align: left;
    margin: 0 0 0 1em; }

.reveal ol {
    list-style-type: decimal; }

.reveal ul {
    list-style-type: disc; }

.reveal ul ul {
    list-style-type: square; }

.reveal ul ul ul {
    list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
    display: block;
    margin-left: 40px; }

.reveal dt {
    font-weight: bold; }

.reveal dd {
    margin-left: 40px; }

.reveal q,
.reveal blockquote {
    quotes: none; }

.reveal blockquote {
    display: block;
    position: relative;
    width: 70%;
    margin: 20px auto;
    padding: 5px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
    display: inline-block; }

.reveal q {
    font-style: italic; }

.reveal pre {
    display: block;
    position: relative;
    width: 90%;
    margin: 20px auto;
    text-align: left;
    font-size: 0.55em;
    font-family: monospace;
    line-height: 1.2em;
    word-wrap: break-word;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

.reveal code {
    font-family: monospace; }

.reveal pre code {
    display: block;
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal; }

.reveal table {
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0; }

.reveal table th {
    font-weight: bold; }

.reveal table th,
.reveal table td {
    text-align: left;
    padding: 0.2em 0.5em 0.2em 0.5em;
    border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
    text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
    text-align: right; }

.reveal table tr:last-child td {
    border-bottom: none; }

.reveal sup {
    vertical-align: super; }

.reveal sub {
    vertical-align: sub; }

.reveal small {
    display: inline-block;
    font-size: 0.6em;
    line-height: 1.2em;
    vertical-align: top; }

.reveal small * {
    vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
    color: #51483D;
    text-decoration: none;
    -webkit-transition: color 0.15s ease;
    -moz-transition: color 0.15s ease;
    transition: color 0.15s ease; }

.reveal a:hover {
    color: #8b7c69;
    text-shadow: none;
    border: none; }

.reveal .roll span:after {
    color: #fff;
    background: #25211c; }

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
    margin: 15px 0px;
    background: rgba(255, 255, 255, 0.12);
    border: 4px solid #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal section img.plain {
    border: 0;
    box-shadow: none; }

.reveal a img {
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    transition: all 0.15s linear; }

.reveal a:hover img {
    background: rgba(255, 255, 255, 0.2);
    border-color: #51483D;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
    border-right-color: #51483D; }

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
    border-left-color: #51483D; }

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
    border-bottom-color: #51483D; }

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
    border-top-color: #51483D; }

.reveal .controls .navigate-left.enabled:hover {
    border-right-color: #8b7c69; }

.reveal .controls .navigate-right.enabled:hover {
    border-left-color: #8b7c69; }

.reveal .controls .navigate-up.enabled:hover {
    border-bottom-color: #8b7c69; }

.reveal .controls .navigate-down.enabled:hover {
    border-top-color: #8b7c69; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
    background: rgba(235, 129, 27, .4); }

.reveal .progress span {
    background: rgba(235, 129, 27, 1);
    -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

Hi ! Using a color picker on my mac I found that the background color is more #fafafa instead of #f1f1f1.

Cool, thanks for letter me (and everyone else reading this) know!

Really nice, thanks! btw, do you know how could I emulate the title bar that appears on the Metropolis Beamer theme? I'm not too good at CSS. If you could only point what would be the proper way of doing it would already be very helpful, as I will try to implement it by myself, but don't know where to start.

@davidpolverari it doesn't seem like it's easy to do. I've been searching for a while and haven't been able to get a good header that extends to the edge of the slides like in the beamer template.

It's been a long time since I worked with this (5 years according to the presentation I just dug out!).

For a full bleed header some links:

• https://codepen.io/chriscoyier/pen/xOjaYA
• https://www.joshwcomeau.com/css/full-bleed/

But I am not sure how I would apply the technique without having to change the markup (I was using pandoc to convert a md file into the html). Perhaps there's a different reveal.js theme that has the title bar already in that format that could be modified with the colors and fonts from here.

If you figure it out please share as I too was interested in having the full width header bar, but was too busy to dig into making it work so I just lived with it (and indeed I think I ended up just using the pdf straight out of beamer).