What is Base16 Scss

A SCSS implementation of the Base16 builder guidelines. With built in support for Rouge and PrismJS highlighters.

Using the builder implementations laid out by Base16 all the appropriate SCSS and CSS variables are created. If importing rouge.scss or prismjs.scss the created styles are applied.

Default Schemes

The default base16 are provided (along with Github & Material) with the standard @import "base16scss";.

base16-dark (default)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('UserModule', [])
  .service('UserService', ['$http', function($http){
    return {
      getUsers: function() {
        return $http.get('/users');
      }
    }    
  }])
  .controller('UserController', ['UserService', function(userService){
    var $ctrl = this;
    $ctrl.$onInit = function() {
      userService.getUsers().then(function(result){
        $ctrl.users = result.data;
      }).catch(function(err){
        console.log(err);
      })
    };
  }]);

base16-light

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('UserModule', [])
  .service('UserService', ['$http', function($http){
    return {
      getUsers: function() {
        return $http.get('/users');
      }
    }    
  }])
  .controller('UserController', ['UserService', function(userService){
    var $ctrl = this;
    $ctrl.$onInit = function() {
      userService.getUsers().then(function(result){
        $ctrl.users = result.data;
      }).catch(function(err){
        console.log(err);
      })
    };
  }]);

base16-ocean

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('UserModule', [])
  .service('UserService', ['$http', function($http){
    return {
      getUsers: function() {
        return $http.get('/users');
      }
    }    
  }])
  .controller('UserController', ['UserService', function(userService){
    var $ctrl = this;
    $ctrl.$onInit = function() {
      userService.getUsers().then(function(result){
        $ctrl.users = result.data;
      }).catch(function(err){
        console.log(err);
      })
    };
  }]);

base16-mocha

Also works with ```javascript

angular.module('UserModule', [])
  .service('UserService', ['$http', function($http){
    return {
      getUsers: function() {
        return $http.get('/users');
      }
    }    
  }])
  .controller('UserController', ['UserService', function(userService){
    var $ctrl = this;
    $ctrl.$onInit = function() {
      userService.getUsers().then(function(result){
        $ctrl.users = result.data;
      }).catch(function(err){
        console.log(err);
      })
    };
  }]);

Scheme Repository

Check out the full list of scheme repositories https://github.com/chriskempson/base16#template-repositories.