CONVERT HTML THEMES

HTML THEMES

This is html with convert-theme-default.css

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css" rel="stylesheet">    
      html, body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
      }
    </style>
</head>
<body>

  <p>Click the button to get a time-based greeting:</p>
  <button onclick="myFunction()">Try it</button>
  <p id="demo"></p>
  
  <script type="text/javascript">
    function myFunction($param) {
      var greeting;
      var time = new Date().getHours();
      if (time < 10) {
          greeting = "Good morning";
        } else if (time < 20) {
          greeting = "Good day";
        } else {
          greeting = "Good evening";
      }
      document.getElementById("demo").innerHTML = greeting;
    }
  </script>
</body>
</html>

CSS THEMES

This is html with convert-theme-dark.css

CSS
// @import 'convert-theme-dark.scss';
@import 'convert-all-theme.scss';
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
@keyframes tag_abbr {
  from {color: #ddd;}
  to {color: red;}
}

SCSS THEMES

This is html with convert-theme-dark.css

SCSS
$font-stack   : Helvetica, sans-serif;
$primary-color: #333;

body {
   font : 100% $font-stack;
  color : $primary-color;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }