Add requested support for color themes

README.md

@@ -88,6 +88,13 @@ FlashPaper will try to generate the secret retrieval URL based on information pr
  - `true`: The setting `site_title` will be displayed at the top of the page. If `display_logo` is enabled, the text will appear to the right of the logo. 
  - `false`: The setting `site_title` will not be displayed.
 
+### `custom_css`:
+ - `true`: FlashPaper will load your own CSS from `css/custom.css`. Make sure this is mapped into the FlashPaper container.
+ - `false`: FlashPaper will not load custom CSS from `css/custom.css`.
+
+### `bootstrap_theme`:
+ - This is the folder name of a Bootstrap theme in the `css/bootstrap` directory. Defaults to `flashpaper`
+
 ## Donations
 
 PayPal: https://paypal.me/AndrewPaglusch

css/bootstrap/united/_bootswatch.scss

@@ -0,0 +1,30 @@
+// United 5.3.3
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" !default;
+@if $web-font-path {
+  @import url("#{$web-font-path}");
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $body-color;
+  }
+}
+
+// Tables
+
+.table-primary,
+.table-secondary,
+.table-success,
+.table-warning,
+.table-danger,
+.table-info,
+.table-light {
+  --#{$prefix}table-color: #{$body-color};
+}

css/flashpaper.css

@@ -0,0 +1,46 @@
+#form-div {
+    background-color:rgba(72,72,72,0.1);
+    padding-left:35px;
+    padding-right:35px;
+    padding-top:35px;
+    padding-bottom:50px;
+
+    margin:30px;
+    border-radius: 7px;
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+}
+.form-control[readonly] {
+    opacity:1
+}
+textarea {
+    width: 100%;
+    height: 200px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    resize: none;
+}
+fieldset {
+    margin:10px;
+    border: 0;
+}
+.col-8 {
+    width: 320px !important;
+}
+.col-4 {
+    width: 100% !important;
+}
+.btn-primary {
+    border: none;
+    color: white;
+    padding: 12px 28px;
+    text-decoration: none;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+}

docker-compose.yml

@@ -13,6 +13,8 @@ services:
       SITE_LOGO: "img/logo.png"
       DISPLAY_LOGO: "true"
       DISPLAY_TITLE: "false"
+      CUSTOM_CSS: "false"
+      BOOTSTRAP_THEME: "bootstrap"
       RETURN_FULL_URL: "true"
       BASE_URL: "" # https://mydomain.com/flashpaper
       MAX_SECRET_LENGTH: "3000"

docker/entrypoint.sh

@@ -6,6 +6,8 @@
 [ -z "$SITE_LOGO"] && export SITE_LOGO="img/logo.png"
 [ -z "$DISPLAY_LOGO"] && export DISPLAY_LOGO="true"
 [ -z "$DISPLAY_TITLE"] && export DISPLAY_TITLE="false"
+[ -z "$CUSTOM_CSS"] && export CUSTOM_CSS="false"
+[ -z "$BOOTSTRAP_THEME"] && export BOOTSTRAP_THEME="flashpaper"
 [ -z "$RETURN_FULL_URL" ] && export RETURN_FULL_URL="true"
 [ -z "$BASE_URL" ] && export BASE_URL=""
 [ -z "$MAX_SECRET_LENGTH" ] && export MAX_SECRET_LENGTH="3000"

docker/settings.php.TEMPLATE

@@ -6,6 +6,8 @@
 		"site_logo" => "${SITE_LOGO}",
 		"display_logo" => "${DISPLAY_LOGO}",
 		"display_title" => "${DISPLAY_TITLE}",
+		"custom_css" => ${CUSTOM_CSS},
+		"bootstrap_theme" => ${BOOTSTRAP_THEME},
 		"return_full_url" => ${RETURN_FULL_URL},
 		"base_url" => "${BASE_URL}",
 		"max_secret_length" => ${MAX_SECRET_LENGTH},

html/header.php

@@ -16,60 +16,20 @@
 		<link rel="stylesheet" href="./css/fontawesome.min.css" rel="stylesheet" />
 		<link rel="stylesheet" href="./css/solid.min.css" rel="stylesheet" />
 		<!-- Bootstrap CSS -->
-		<link rel="stylesheet" href="./css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-		<style>
-			#form-div {
-				background-color:rgba(72,72,72,0.1);
-				padding-left:35px;
-				padding-right:35px;
-				padding-top:35px;
-				padding-bottom:50px;
-
-				margin:30px;
-				border-radius: 7px;
-				-moz-border-radius: 7px;
-				-webkit-border-radius: 7px;
-			}
-			.form-control[readonly] {
-				opacity:1
+		<?php
+                if ( $settings['bootstrap_theme'] != 'flashpaper') {
+				echo '<link rel="stylesheet" href="./css/bootstrap/'. $settings['bootstrap_theme'] .'/bootstrap.min.css">';
+			} else {
+				echo'<link rel="stylesheet" href="./css/bootstrap/flashpaper/bootstrap.min.css">';
 			}
-			textarea {
-				width: 100%;
-				height: 200px;
-				padding: 12px 20px;
-				box-sizing: border-box;
-				border: 2px solid #ccc;
-				border-radius: 4px;
-				resize: none;
+		?>
+        <link rel="stylesheet" href="./css/flashpaper.css">                                   
+		<?php
+                if ( $settings['custom_css'] == 'true') {
+				echo '<link rel="stylesheet" href="./css/custom.css">';
 			}
-			fieldset {
-				margin:10px;
-				border: 0;
-			}
-			.btn-primary {
-				background-color: #4ca2ae;
-				border: none;
-				color: white;
-				padding: 12px 28px;
-				text-decoration: none;
-				font-size: 16px;
-				margin: 4px 2px;
-				cursor: pointer;
+		?>
 
-				-webkit-transition-duration: 0.4s; /* Safari */
-				transition-duration: 0.4s;
-			}
-			.btn-primary:hover {
-				background-color: #67b2bc;
-				color: white;
-			}
-			.col-8 {
-				width: 320px !important;
-			}
-			.col-4 {
-				width: 100% !important;
-			}
-		</style>
 		<script src="./js/color-toggle.js" defer></script>
 	</head>
 	<body onUnload="document.getElementById('secret').value = ''">

includes/sanitycheck.php

@@ -19,6 +19,23 @@ function sanity_check() {
 			$errors[] = 'The settings.php file is not readable or does not exist';
 		}
 
+		# make sure custom.css exists when set
+		if ( $settings['custom_css'] == 'true') {
+			// Verify that the custom.css file exists
+			if ( ! file_exists('./css/custom.css')) {
+				$errors[] = 'The custom.css file is not readable or does not exist';
+			}
+		}
+
+		# make sure bootstrap theme folder exists
+		if ( $settings['bootstrap_theme'] != 'flashpaper') {
+			$bootstrap_theme = $settings['bootstrap_theme'];
+			$theme_folder_path = './css/bootstrap/' . $bootstrap_theme;
+			if ( ! is_dir($theme_folder_path)) {
+				$errors[] = 'Error: The bootstrap theme folder "' . $bootstrap_theme . '" does not exist';
+			}
+		}
+
 		return $errors;
 	}
 

settings.example.php

@@ -5,7 +5,9 @@
 		'site_title' => 'FlashPaper :: Self-Destructing Message',
 		'site_logo' => 'img/logo.png',
 		'display_logo' => 'true', # true/false
-		'display_title' => 'false', # true/false  
+		'display_title' => 'false', # true/false
+		'custom_css' => 'false', # true/false
+		'bootstrap_theme' => 'flashpaper', # any option in css/bootstrap folder
 		'return_full_url' => true,
 		'base_url' => '', # https://mydomain.com/flashpaper
 		'max_secret_length' => 3000,