First commit

resources/sass/_uikitOverrides.scss

@@ -0,0 +1,3 @@
+.uk-light .uk-close {
+    color: $close-color !important;
+}

resources/sass/app.scss

@@ -0,0 +1,27 @@
+// 1. Your custom variables and variable overwrites.
+// $global-link-color: #DA7D02;
+
+// 2. Import default variables and available mixins.
+@import "~uikit/src/scss/variables-theme.scss";
+@import "~uikit/src/scss/mixins-theme.scss";
+
+// 3. Your custom mixin overwrites.
+// @mixin hook-card() { color: #000; }
+
+// 4. Import UIkit.
+@import "~uikit/src/scss/uikit-theme.scss";
+
+// uikit overrides, mainly fixes of colors due to dark theme
+@import "uikitOverrides";
+
+@import "./components/toggle";
+
+$footer-height: 80px;
+
+#content {
+    min-height: calc(100vh - #{$navbar-nav-item-height + $footer-height});
+}
+
+footer {
+    line-height: $footer-height;
+}

resources/sass/components/toggle.scss

@@ -0,0 +1,63 @@
+/**
+ * Source: w3schools https://www.w3schools.com/howto/howto_css_switch.asp
+ */
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: translate .4s;
+}
+
+.slider::before {
+    position: absolute;
+    content: "";
+    height: .8em;
+    width: .8em;
+    left: .1em;
+    bottom: .1em;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: $text-primary-color;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider::before {
+    transform: translateX(1em);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 1em;
+}
+
+.slider.round::before {
+    border-radius: 50%;
+}