Use standard Mittelab CSS

assets/index.js

+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();
+    });
+});

assets/main.scss

+/*
+ * Globals
+ */
+
+@import "mlab-bootstrap";
+
+.jumbotron {
+  color: $mittelab-header-background;
+}
\ No newline at end of file

assets/mlab-bootstrap.scss

+$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;
+}