Use standard Mittelab CSS

import './main.scss';

import $ from 'jquery';

import 'bootstrap';

// import QCodeDecoder from 'qcode-decoder';

$(function () {

    let qr = new QCodeDecoder();

    const resultHandler = function (err, result) {

        if (err) {

            console.log(err.message);

            return;

        }

        $("input#id_id")[0].value = result;

        $("#qr-scan").modal("toggle");

    };

    $("#cameraProcess").click(function(e) {

        var input = $("#cameraInput")[0];

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                qr.decodeFromImage(e.target.result, resultHandler);

            };

            reader.readAsDataURL(input.files[0]);

        }

    });

    $("#qr-scan").on("show.bs.modal", function(){

        if (!(qr.isCanvasSupported() && qr.hasGetUserMedia())) {

            alert("Your browser doesn\'t match the required specs.");

            throw new Error("Canvas and getUserMedia are required");

        }

        var video = document.querySelector("video");

        var reset = document.querySelector("#reset");

        var stop = document.querySelector('#stop');

        // prepare a canvas element that will receive the image to decode, sets

        // the callback for the result and then prepares the videoElement to

        // send its source to the decoder.

        qr.decodeFromCamera(video, resultHandler,true);

        // attach some event handlers to reset and stop whenever we want.

        reset.onclick = function () {

            for (var i = 0; i < qr.stream.getTracks().length; i++){

                qr.stream.getTracks()[i].stop();

            }

            qr = new QCodeDecoder();

            qr.decodeFromCamera(video, resultHandler,true);

        };

    }).on("hide.bs.modal", function() {

        for (var i = 0; i < qr.stream.getTracks().length; i++){

            qr.stream.getTracks()[i].stop();

        }

        qr = new QCodeDecoder();

    });

});

/*

 * Globals

 */

@import "mlab-bootstrap";

.jumbotron {

  color: $mittelab-header-background;

}

 No newline at end of file

$mittelab-green: #0ce3ac;

$mittelab-blue: #375a7f;

$mittelab-logo: #7fc0c2;

$mittelab-primary: #fff;

$mittelab-secondary: #222;

$mittelab-tertiary: #0ce3ac;

$mittelab-quandary: #0ce3ac;

$mittelab-header-background: #375a7f;

$mittelab-header-primary: #fff;

$mittelab-highlight: #428bca;

$mittelab-danger: #b00b1e;

$mittelab-success: #44ff00;

$mittelab-love: #fa6c8d;

$body-bg: #222;

$body-color: #fff;

$link-color: $mittelab-logo;

$theme-colors: (

  "dark": $body-bg,

  "mitte": $mittelab-blue,

  "light": $mittelab-logo,

);

$container-max-widths: (

  sm: 540px,

  md: 720px,

  lg: 960px,

  xl: 1140px,

  xxl: 1600px

);

$font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

$font-family-monospace:  "Ubuntu Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

@import "~bootstrap/scss/bootstrap";

.img-thumbnail {

  // Fix for dark bg by default

  background-color: $white;

}