Enable Dope (Dark) Mode on TownSquare 🌙

app/assets/v2/css/town_square.css

@@ -1007,6 +1007,153 @@ body.green.offer_view .announce {
   }
 }
 
+/* Toggle Switch Dope Mode */
+
+#dopeSwitch {
+  position: relative;
+  display: inline-block;
+}
+
+.dark {
+  background-color: rgb(23, 7, 61);
+}
+
+.dark .bg-white {
+  background-color: #2b2642!important;
+  box-shadow: 60px!important;
+}
+
+.dark .bg-lightblue {
+  background-color: #2b2642!important;
+  box-shadow: 60px!important;
+}
+
+.dark .grey {
+  color: #fff!important;
+}
+
+.dark .tip_activity {
+  background-color: black!important;
+}
+
+.dark .activity_stream {
+  color: #fff!important;
+}
+
+.dark .activity_stream .activity_comments .comment_container.filled {
+  background-color: #877cab42!important;
+}
+
+.dark .activity_stream .activity_comments .activity_comments_main_comment {
+  color: #fff!important;
+  border-top: 2px solid #346698!important;
+}
+
+.dark .textarea.form__input {
+  color: #fff!important;
+}
+
+.dark .font-body {
+  color: #fff!important;
+}
+
+.dark .form-control {
+  background-color: #282440!important;
+}
+
+.dark #status {
+  background-color: #282440;
+}
+
+.dark .form__input {
+  background-color: #282440;
+  color: #fff!important;
+}
+
+.dark .townsquare_nav-list .nav-item .nav-link {
+  color: #fff;
+}
+
+.dark .townsquare_block-header {
+  color: #fff;
+}
+
+.dark .font-caption {
+  color: #fff!important;
+}
+
+.dark .activity_stream .box {
+  border-bottom: 1px solid #312979;
+  box-shadow: 1px -5px #312979;
+  border-radius: 10px;
+}
+
+.dark .poll_choices.answered div span {
+  color: #fff!important;
+}
+
+.dark .poll_choices div p {
+  color: #fff!important;
+  background-color: black!important;
+}
+
+.dark .activity_stream .comment_row .activity_comments_main {
+  border-top: #8ab2b2!important;
+}
+
+.dark .poll_choices div.vote {
+  background-color: #232342!important;
+}
+
+.dark .poll_choices.answered div.vote {
+  border: 1px solid #262661!important;
+}
+
+.dark #status .btn-group-toggle .btn-radio {
+  background-color: black!important;
+}
+
+.dark .poll_choices.answered div.vote {
+  background-color: black!important;
+}
+
+.dark .action:hover {
+  background-color: black!important;
+}
+
+.dark .border {
+  border: 1px solid #346698!important;
+}
+
+.dark #new_activity_notifier {
+  background-color: #262661!important;
+  border-bottom: 1px solid #262661!important;
+}
+
+
+.dark #status .btn-group-toggle .btn-radio {
+  background-color: #2b3358!important;
+}
+
+.dark .empty {
+  background-color: #201a40;
+}
+
+.dark #reflink {
+  background-color: #201a40;
+}
+
+.dark a {
+  color: #567AFF;
+}
+
+.dark popover-body {
+  color: #dde5ee;
+}
+
+.dark popover-user-card {
+  background-color: #201a40;
+}
 
 .promo .logo {
   height: 55px;
@@ -1052,3 +1199,4 @@ body.green.offer_view .announce {
 .promo .close-promo i {
   font-weight: 100;
 }
+

app/assets/v2/js/pages/townsquare.js

@@ -102,6 +102,26 @@ $(document).ready(function() {
       document.location.href = get_redir_location($('.nav-link.active').data('slug'));
     }, 10);
   });
+
+  // Enables Dope Mode
+  $('body').toggleClass(localStorage.toggled);
+
+ $('#dopeSwitch').on("click",function(event) {
+  if (localStorage.toggled != 'dark') {
+    $('body').toggleClass('dark',  true)
+    localStorage.toggled = 'dark';
+  } else {
+    $('body').toggleClass('dark', false)
+    localStorage.toggled = '';
+  }
+
+});
+
+  if (!$('body').hasClass('dark', false)) {
+     $('#dopeSwitch').prop('checked', false)
+  } else {
+     $('#dopeSwitch').prop('checked', true)
+  }
 
   // toggles the daily email sender
   $('body').on('change', '#receive_daily_offers_in_inbox', function(e) {

app/townsquare/templates/townsquare/index.html

@@ -178,6 +178,12 @@
         </div>
       </div>
     </div>
+    <div>
+      <div class="custom-control custom-switch">
+        <input type="checkbox" class="custom-control-input" id="dopeSwitch">
+        <label class="custom-control-label" for="dopeSwitch">Dope mode</label>
+      </div>
+    </div>
 
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}