Add backend css

Resources/Private/Sass/Backend/index.scss

@@ -0,0 +1,18 @@
+.typo3-login {
+    .panel,
+    .panel-footer {
+        background-color: rgba(0, 0, 0, .5);
+    }
+    input {
+        color: #9CD9F0;
+        border-color: #9CD9F0;
+        background-color: #2E3436;
+
+    }
+    .form-control:focus {
+        border-color: #77DFD8;
+    }
+    a {
+        color: #fff;
+    }
+}

Resources/Public/Backend/Css/index.css

@@ -0,0 +1 @@
+.typo3-login .panel,.typo3-login .panel-footer{background-color:rgba(0,0,0,.5)}.typo3-login input{color:#9cd9f0;border-color:#9cd9f0;background-color:#2e3436}.typo3-login .form-control:focus{border-color:#77dfd8}.typo3-login a{color:#fff}

ext_tables.php

@@ -0,0 +1,10 @@
+<?php
+
+(function (string $extensionKey) {
+    $GLOBALS['TBE_STYLES']['skins'][$extensionKey] = [
+        'name' => $extensionKey,
+        'stylesheetDirectories' => [
+            'css' => 'EXT:' . $extensionKey . '/Resources/Public/Backend/Css/'
+        ]
+    ];
+})('ds_site');

gulpfile.js

@@ -2,10 +2,11 @@ const { src, dest, parallel, watch } = require('gulp');
 const sass = require('gulp-sass');
 const minifyCSS = require('gulp-csso');
 
-const sassFolder = 'Resources/Private/Sass/';
+const frontendSassFolder = 'Resources/Private/Sass/Frontend/';
+const backendSassFolder = 'Resources/Private/Sass/Backend/';
 
-function css() {
+function frontendCss() {
-    return src(sassFolder + 'index.scss')
+    return src(frontendSassFolder + 'index.scss')
         .pipe(sass({
             includePaths: [
                 './node_modules/'
@@ -14,9 +15,21 @@ function css() {
         .pipe(minifyCSS())
         .pipe(dest('Resources/Public/Css/'))
 }
+function backendCss() {
+    return src(backendSassFolder + 'index.scss')
+        .pipe(sass({
+            includePaths: [
+                './node_modules/'
+            ]
+        }).on('error', sass.logError))
+        .pipe(minifyCSS())
+        .pipe(dest('Resources/Public/Backend/Css/'))
+}
 
-exports.css = css;
+exports.frontendCss = frontendCss;
+exports.backendCss = backendCss;
 exports.watch = function () {
-    watch([sassFolder + '**/*.scss'], {ignoreInitial: false}, css);
+    watch([frontendSassFolder + '**/*.scss'], {ignoreInitial: false}, frontendCss);
+    watch([backendSassFolder + '**/*.scss'], {ignoreInitial: false}, backendCss);
 };
-exports.default = parallel(css);
+exports.default = parallel(frontendCss, backendCss);