load a random theme on theme-park.dev

Resources/landing-page/css/custom.css

@@ -1,3 +1,37 @@
+:root {
+    --about: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 0)), var(--main-bg-color);
+}
+
+.bg-primary {
+    background: var(--about) !important;
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
+}
+
+.bg-dark,
+.theme-overview,
+#services,
+#themes,
+footer {
+    background: var(--main-bg-color);
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
+}
+
+.text-white-50 {
+    color: var(--text) !important;
+}
+
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
 
     #mainNav,
@@ -76,26 +110,25 @@
     }
 
     #mainNav.navbar-scrolled .navbar-brand:hover {
-        color: #12afa0;
+        color: rgb(var(--accent-color));
     }
 
     #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
         color: #fff;
-        ;
     }
 
     #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
-        color: #12afa0;
+        color: var(--link-color-hover);
     }
 }
 
 #mainNav .navbar-nav .nav-item .nav-link:hover,
 #mainNav .navbar-nav .nav-item .nav-link:active {
-    color: #12afa0;
+    color: rgb(var(--accent-color));
 }
 
 #mainNav .navbar-nav .nav-item .nav-link.active {
-    color: #12afa0 !important;
+    color: var(--link-color-hover) !important;
 }
 
 .navbar-light .navbar-toggler-icon {
@@ -117,61 +150,61 @@
 
 /* BUTTON SHIT*/
 .btn-primary {
-    color: #fff;
+    color: var(--button-text);
-    background-color: #009688;
+    background-color: var(--button-color);
-    border-color: #009688;
+    border-color: var(--button-color);
 }
 
 .btn-primary:hover {
-    color: #fff;
+    color: var(--button-text-hover);
-    background-color: #12afa0;
+    background-color: var(--button-color-hover);
-    border-color: #12afa0;
+    border-color: var(--button-color-hover);
 }
 
 .btn-primary:focus,
 .btn-primary.focus {
-    color: #fff;
+    color: var(--button-text-hover);
-    background-color: #12afa0;
+    background-color: var(--button-color-hover);
-    border-color: #12afa0;
+    border-color: var(--button-color-hover);
-    box-shadow: 0 0 0 0.2rem #12afa080;
+    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.5);
 }
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-    color: #fff;
+    color: var(--text-muted);
-    background-color: #009688;
+    background-color: rgba(255, 255, 255, 0.3);
-    border-color: #009688;
+    border-color: rgba(255, 255, 255, 0.3);
 }
 
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show>.btn-primary.dropdown-toggle {
-    color: #fff;
+    color: var(--button-text-hover);
-    background-color: #12afa0;
+    background-color: var(--button-color-hover);
-    border-color: #12afa0;
+    border-color: var(--button-color-hover);
 }
 
 .btn-primary:not(:disabled):not(.disabled):active:focus,
 .btn-primary:not(:disabled):not(.disabled).active:focus,
 .show>.btn-primary.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem #12afa080;
+    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.502);
 }
 
 hr.divider {
-    border-color: #12afa0
+    border-color: rgb(var(--accent-color));
 }
 
 a {
-    color: #fff;
+    color: var(--link-color);
 }
 
 a:hover {
-    color: #12afa0;
+    color: var(--link-color-hover);
     text-decoration: none;
 }
 
 .text-primary {
-    color: #12afa0 !important;
+    color: rgb(var(--accent-color)) !important;
 }
 
 body,
@@ -202,29 +235,32 @@ header.masthead {
     margin: 0;
 }
 
+/*
 .bg-primary,
 .bg-dark {
     background: #2d2d2d;
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
     background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ 
 
 }
+*/
+
+
 
 .theme-overview {
-    background: #2d2d2d;
+    /* background: #2d2d2d;
     background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
     background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
-    background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
+    background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); */
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     font-family: var(--font-family-sans-serif);
 }
 
 #services,
 #themes {
-    background: rgba(87, 109, 117, 1.0);
+    /* background: rgba(87, 109, 117, 1.0); */
-    color: white;
+    color: var(--text-hover);
     padding: 0rem 0 8rem 0;
 }
 
@@ -247,7 +283,7 @@ header.masthead {
 .app-container:hover {
     color: white;
     text-decoration: none;
-    background: #47918a80;
+    background: rgba(var(--accent-color), 0.5);
 }
 
 .app-container:hover img {

Resources/landing-page/css/styles.css

@@ -7013,9 +7013,9 @@ a.close.disabled {
   vertical-align: text-top !important;
 }
 
-.bg-primary {
+/* .bg-primary {
   background-color: #f4623a !important;
-}
+} */
 
 a.bg-primary:hover,
 a.bg-primary:focus,

Resources/landing-page/js/scripts.js

@@ -70,3 +70,23 @@
     });
 
 })(jQuery); // End of use strict
+
+// load random css stylesheet
+const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr",
+"plex","space-gray","hotpink","onedark"];
+var random = themes[~~(Math.random() * themes.length)];
+function injectTheme(theme,container="head") {
+    if (container === "head") {
+        html_element = document.head;
+    } else html_element = document.body;
+    let link = document.createElement("link");
+    url = "/CSS/variables/"
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.href = `${url}/${theme}.css`;
+  
+    html_element.appendChild(link);
+  }
+
+  injectTheme(random);
+

index.html

@@ -19,9 +19,9 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
         rel="stylesheet" />
     <!-- Core theme CSS (includes Bootstrap)-->
-    <link href="Resources/landing-page/css/styles.css?v=1" rel="stylesheet" />
+    <link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.5">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.6">
 </head>
 
 <body id="page-top">
@@ -536,7 +536,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
     <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.1"></script>
     <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
     <script type="text/javascript">
         $(function () {