Initial Release of Premade Themes, First up: DiscordDark by JS

webapp/titanembeds/static/css/embedstyle.css

@@ -228,4 +228,8 @@ a {
         -ms-flex-align: center;
             align-items: center;
   }
+}
+
+#nameplate {
+  cursor: pointer;
 }

webapp/titanembeds/static/js/embed.js

@@ -89,6 +89,7 @@
     }
     
     $(function() {
+        $('select').material_select();
         $("#focusmodal").modal({
             dismissible: true,
             opacity: .5,
@@ -98,6 +99,12 @@
             endingTop: "10%",
         });
         $("#focusmodal").modal("open");
+        $("#userembedmodal").modal({
+            dismissible: true,
+            opacity: .5,
+            inDuration: 400,
+            outDuration: 400,
+        });
         
         if (document.hasFocus()) {
             primeEmbed();
@@ -108,7 +115,36 @@
                 primeEmbed();
             }
         });
+        
+        $("#nameplate").click(function () {
+            $("#userembedmodal").modal("open");
+        });
+        
+        $( "#theme-selector" ).change(function() {
+            const theme_options = ["DiscordDark"];
+            var theme = $("#theme-selector option:selected").val();
+            if (theme == "") {
+              $("#css-theme").attr("href", "");
+              disable_userdef_css(false);
+            } else if ($.inArray(theme, theme_options) != -1) {
+                disable_userdef_css(true);
+                $("#css-theme").attr("href", "/static/themes/" + theme + "/css/style.css");
+            }
+        });
     });
+    
+    function disable_userdef_css(boolean) {
+        var usrcss = $("#user-defined-css").text();
+        const disable_header = "/* DISABLED_USER_CSS===";
+        if (usrcss.length > 0) {
+            if (boolean && usrcss.substring(0, disable_header.length) != disable_header) {
+                usrcss = disable_header + usrcss + "*/";
+            } else if (!boolean && usrcss.substring(0, disable_header.length) == disable_header) {
+                usrcss = usrcss.substring(disable_header.length, usrcss.length - 2);
+            }
+            $("#user-defined-css").text(usrcss);
+        }
+    }
 
     function primeEmbed() {
         $("#focusmodal").modal("close");

webapp/titanembeds/static/themes/DiscordDark/css/style.css

@@ -0,0 +1,134 @@
+/* DiscordDark Theme by .JS#2125 */
+
+@font-face {
+    font-family: Whitney;
+    font-style: light;
+    font-weight: 300;
+    src: url("../font/whitney_light.woff") format("woff")
+}
+
+@font-face {
+    font-family: Whitney;
+    font-style: normal;
+    font-weight: 500;
+    src: url("../font/whitney_normal.woff") format("woff")
+}
+
+@font-face {
+    font-family: Whitney;
+    font-style: medium;
+    font-weight: 600;
+    src: url("../font/whitney_medium.woff") format("woff")
+}
+
+@font-face {
+    font-family: Whitney;
+    font-style: bold;
+    font-weight: 700;
+    src: url("../font/whitney_bold.woff") format("woff")
+}
+
+* {
+font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+/*background-color: var(--dark-highlight);*/
+:root {
+  /*--: */
+  --dark-primary: #2e3136;
+  --dark-secondary: #36393e;
+  --dark-highlight: #2e3136;
+  --dark-highlight-guildlist: #1e2124;
+  --dark-highlight-channellist: #2e3136;
+  --dark-highlight-channelheader: #36393e;
+}
+#footer {
+background-color: rgb(60,60,60);
+}
+#footercontainer {
+border-radius:20px;
+border: 1px solid rgb(99,99,99);
+margin-left:-0px!important;
+padding-left:-4px!important;
+background-color: rgb(60,60,60);
+}
+#nameplate {
+background:transparent!important;
+margin-left:10px
+}
+#chatcontent > p > span.chatusername,
+#curuser_discrim,
+#curuser_name {
+display:block
+}
+#curuser_discrim {
+font-size:50%;
+color:rgb(125,131,134);
+}
+#curuser_discrim,
+#curuser_name {
+margin-top:-2px
+}
+#currentuserimage {
+margin-top:4px;
+margin-right:4px
+}
+#chatcontent > p { display: table; }
+#chatcontent > p > span { display: table-row }
+#chatcontent > p > span:nth-child(1):before { content:"Today at " }
+#chatcontent > p > span.chatusername { display: table-header-group }
+#chatcontent > p > span.chatmessage { display: table-footer-group;display:inline-block!important;color:rgb(195,196,197) }
+#chatcontent {
+background:rgb(54,57,62)
+}
+::-webkit-input-placeholder { color:rgb(99,99,99) }
+:-moz-placeholder { color:rgb(99,99,99) }
+::-moz-placeholder { color:rgb(99,99,99) }
+:-ms-input-placeholder { color:rgb(99,99,99) }
+::-ms-input-placeholder { color:rgb(99,99,99) }
+body > div.navbar-fixed > nav > div,
+#members-nav {
+background:rgb(46,49,54)
+}
+#guild-nav {
+background: rgb(30,33,36)
+}
+div.divider {
+background:rgb(46,49,54);
+margin-left:10px;
+margin-right:10px;
+/*height:150%*/
+}
+#discord-members > li > a.subheader,
+#members-nav > li:nth-child(1) > a,
+#discord-members-count,
+#embed-discord-members-count,
+#members-nav > li:nth-child(4) > a,
+#guest-members-count,
+#members-nav > li:nth-child(6) > a {
+text-transform: uppercase;
+color:rgb(130,131,134)
+}
+body > main,
+body {
+background:rgb(54,57,62)
+}
+#members-btn > i { visibility:hidden }
+#members-btn {
+visibility:visible;
+background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0xIDFoMjR2MjRIMVYxeiIvPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTE2Ljc3MjA3NTQgMTQuNjc5MTc3OGMtLjIyNDkwOTctLjIyNTY4ODYtLjQ3NDE1NzMtLjQzNTE2ODEtLjc0MjA3NTQtLjYyOTE3NzguMzUtLjAzLjY4LS4wNS45Ny0uMDUgMi4zMyAwIDcgMS4xNyA3IDMuNVYyMGgtNHYtMWMwLTEuODgxNjkxNC0xLjQwNzcwNTYtMy4zMjMwMTQzLTMuMjI3OTI0Ni00LjMyMDgyMjJ6bS0xLjQzODU3MzUtOC4xNzU4NTM0QzE1LjgwOTgwODIgNi4xODUyNTE3MyAxNi4zODI3ODQ1IDYgMTcgNmMxLjY2IDAgMi45OSAxLjM0IDIuOTkgM3MtMS4zMyAzLTIuOTkgM2MtLjYxNzE5MTQgMC0xLjE5MDE0NzEtLjE4NTIzNzMtMS42NjY0NDIzLS41MDMyODcyQzE1Ljc1NzQ4MzIgMTAuNzYyMTQwOTUgMTYgOS45MDk1NTYgMTYgOS4wMDAwNjY5M2MwLS45MDk1Mjg5Ni0uMjQyNTM4MS0xLjc2MjE0ODgtLjY2NjQ5ODEtMi40OTY3NDI1M3pNMTAgMTNjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0em0wIDJjLTIuNjcgMC04IDEuMzQtOCA0djJoMTZ2LTJjMC0yLjY2LTUuMzMtNC04LTR6Ii8+CiAgPC9nPgo8L3N2Zz4=);
+background-repeat:no-repeat;
+margin-top:18px
+}
+.circle:hover {
+border-radius:20px;
+background: linear-gradient(to right, #f9f9f9 90%, #fff);
+}
+#channels-list > li:hover {
+-webkit-filter: brightness(150%);
+}
+#discord-members > li > a,
+#embed-discord-members > li > a,
+#embed-unauth-users > li > a {
+color:rgb(171,173,175)
+}

webapp/titanembeds/templates/embed.html.j2

@@ -6,6 +6,7 @@
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" integrity="sha256-6DQKO56c9MZL0LAc7QNtxqJyqSa3rS9Gq5FVcIhtA+w=" crossorigin="anonymous" media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
+    <link id="css-theme" type="text/css" rel="stylesheet" href="">
 
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -16,7 +17,7 @@
     {% include 'google_analytics.html.j2' %}
     
     {% if css is not none %}
-    <style>{{ css.css }}</style>
+    <style id="user-defined-css">{{ css.css }}</style>
     {% endif %}
   </head>
   <body>
@@ -113,6 +114,20 @@
         <p class="flow-text">Please click this part of the page to initialize the embed.</p>
       </div>
     </div>
+    
+    <div id="userembedmodal" class="modal">
+      <div class="modal-content">
+        <h4>Theme</h4>
+        <div class="row">
+          <div class="input-field col s12">
+            <select id="theme-selector">
+              <option value="" selected>Default</option>
+              <option value="DiscordDark">DiscordDark</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <footer id="footer" class="footer">
       <div id="fetching-indicator" class="preloader-wrapper small active" style="display: none;">