feat(theming): dark mode 🌚

app/assets/v2/css/base.css

@@ -1725,3 +1725,12 @@ div.busyOverlay {
   font-size: 22px;
 }
 
+.bg-shade-0 {
+  background: var(--bg-shade-0);
+}
+.bg-shade-1{
+  background: var(--bg-shade-1);
+}
+.bg-shade-2{
+  background: var(--bg-shade-2);
+}

app/assets/v2/css/buttons.css

@@ -274,7 +274,7 @@ button:focus {
 }
 
 .btn-radio i {
-  color: #3E00FF;
+  color: var(--button-radio-icon-color);
 }
 
 .badge-greylight {

app/assets/v2/css/colors.css

@@ -1,4 +1,4 @@
-:root {
+html {
   --gc-light-blue: #16a8d5;
   --gc-blue: #3E00FF;
   --gc-blue-hover: #5b24ff;
@@ -24,6 +24,62 @@
 
   --text-light: #D8D8D8;
   --text-dark: var(--gc-black);
+
+  --bg-shade-0: white;
+  --bg-shade-1: white;
+  --bg-shade-2: #5f5c74;
+
+  --main-bg: #eff3f6;
+  --form-input-bg: white;
+  --form-input-color: rgba(0, 0, 0, 0.38);
+  --button-radio-icon-color: #3e00ff;
+  --link-color: #3e00ff;
+  --townsquare-link-color: black;
+  --townsquare-block-header-color: #626365;
+  --active-button-border-color: var(--link-color);
+  --default-text-color: var(--text-dark);
+}
+
+/* @media screen and (prefers-color-scheme: dark) { */
+html.dark-mode {
+  --gc-light-blue: #16a8d5;
+  --gc-blue: #3E00FF;
+  --gc-blue-hover: #5b24ff;
+  --gc-purple: #0D0764;
+  --gc-purple-hover: #0b0d9d;
+  --gc-green: #0FCE7C;
+  --gc-green-hover: #25E899;
+  --gc-pink: #f9006c;
+  --gc-pink-hover: #f167a3;
+  --gc-yellow: #F5A623;
+
+  --gc-white: #ffffff;
+  --gc-light-violet: #bbafd0;
+  --gc-dark-violet: #130b88;
+  --gc-black: #0d023a;
+  --t: #ccc;
+
+  --gc-grey: #fafafa;
+  --gc-blue-grey: #f2f6f9;
+  --gc-dark-grey: #868789;
+  --gc-darker-grey: #3d3d3d;
+
+  --text-light: #D8D8D8;
+  --text-dark: var(--gc-black);
+
+  --bg-shade-0: #0a0428;
+  --bg-shade-1: #221d3e;
+  --bg-shade-2: #5f5c74;
+
+  --main-bg: #0a0428;
+  --form-input-bg: #221d3e;
+  --form-input-color: white;
+  --button-radio-icon-color: white;
+  --link-color: white;
+  --townsquare-link-color: white;
+  --townsquare-block-header-color: white;
+  --active-button-border-color: white;
+  --default-text-color: white;
 }
 
 .text-highlight-purple {

app/assets/v2/css/forms/input.css

@@ -1,5 +1,5 @@
 .form__input {
-  background-color: #FFF;
+  background-color: var(--form-input-bg);
   border-radius: 2px;
   border: 1px solid #D8D8D8;
   padding: 5px 7px;
@@ -47,20 +47,9 @@ textarea.form__input {
   background-position: top 0.5rem right 0.5rem;
 }
 
+.form__input,
 .form__input::-webkit-input-placeholder {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.form__input::-moz-placeholder {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.form__input:-moz-placeholder {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.form__input:-ms-input-placeholder {
-  color: rgba(0, 0, 0, 0.38);
+  color: var(--form-input-color);
 }
 
 .form__input:disabled {

app/assets/v2/css/gitcoin.css

@@ -262,8 +262,9 @@ div.button-pink {
   background-repeat: no-repeat;
 }
 
+
 .bg-lightblue {
-  background-color: #EFF3F6;
+  background-color: var(--main-bg);
 }
 
 .bg-lightpurple {

app/assets/v2/css/labs.css

@@ -1,5 +1,5 @@
 body {
-  color: var(--text-dark);
+  color: var(--default-text-color);
 }
 
 .navbar {

app/assets/v2/css/notifications.css

@@ -1,13 +1,21 @@
-:root {
+html {
   --color-notification: 37, 232, 153;
   --badge-bg: #D6FBEB;
   --badge-text: #00A55E;
   --link-color: #3E00FF;
   --badge-blue-bg: #E7F0FA;
   --badge-blue-text: #6587AE;
-
 }
 
+/* @media screen and (prefers-color-scheme: dark) { */
+html.dark-mode {
+  --color-notification: 37, 232, 153;
+  --badge-bg: #D6FBEB;
+  --badge-text: #00A55E;
+  --link-color: #3E00FF;
+  --badge-blue-bg: #5f5c74;
+  --badge-blue-text: white;
+}
 
 .navbar-nav .nav-link.notification__icon {
   position: relative;

app/assets/v2/css/theme_switcher.css

@@ -0,0 +1,23 @@
+#theme-switcher{
+  align-items: center;
+  cursor: pointer;
+}
+
+.theme-switcher-svg {
+  fill: white;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.5rem;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+html:not(.dark-mode) .theme-switcher__dark {
+  display: none;
+}
+
+html.dark-mode .theme-switcher__light {
+  display: none;
+}

app/assets/v2/css/town_square.css

@@ -1,3 +1,6 @@
+body {
+  color: var(--default-text-color);
+}
 #mobile_nav_toggle{
   display: none !important;
 }
@@ -862,7 +865,7 @@ body.green.offer_view .announce {
 
 .townsquare_nav-list .nav-item .nav-link {
   padding-left: 0;
-  color: black;
+  color: var(--townsquare-link-color);
 }
 
 .townsquare_nav-list .nav-link.active {
@@ -886,7 +889,7 @@ body.green.offer_view .announce {
 
 .townsquare_block-header {
   font-size: 0.9rem;
-  color: #626365;
+  color: var(--townsquare-block-header-color);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -900,10 +903,11 @@ body.green.offer_view .announce {
   background-color: var(--badge-blue-bg);
   color: var(--badge-blue-text);
   border: 1px solid transparent;
+  margin-bottom: 0.5rem !important;
 }
 
 #status .btn-group-toggle .btn-radio.active {
-  border: 1px solid var(--link-color);
+  border: 1px solid var(--active-button-border-color);
 }
 
 .grey {

app/assets/v2/js/theme_switcher.js

@@ -0,0 +1,53 @@
+let CURRENT_MODE;
+const LIGHT_MODE = 'light';
+const DARK_MODE = 'dark';
+
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+const theme = window.localStorage.getItem('theme');
+if (theme === 'dark' || (!theme && window.matchMedia("(prefers-color-scheme: dark)"))) {
+  document.documentElement.classList.add('dark-mode');
+}
+
+document.addEventListener('DOMContentLoaded', subscribe, false);
+
+function subscribe() {
+  // Handle preferred user theme mode
+  document.getElementById('theme-switcher').addEventListener("click", onToggleMode);
+
+  // Load theme if persisted
+  const mode = window.localStorage.getItem('theme');
+  if (mode) {
+    return activateMode(mode);
+  }
+
+  // Attempt to detect theme mode
+  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+  const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+
+  window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode())
+  window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode())
+
+  if(isDarkMode) activateDarkMode()
+  if(isLightMode) activateLightMode()
+}
+
+function onToggleMode() {
+  const mode = CURRENT_MODE === LIGHT_MODE ? DARK_MODE : LIGHT_MODE;
+  window.localStorage.setItem('theme', mode);
+  activateMode(mode);
+}
+
+function activateLightMode() {
+  activateMode(LIGHT_MODE);
+}
+
+function activateDarkMode() {
+  activateMode(DARK_MODE);
+}
+
+function activateMode(mode) {
+  CURRENT_MODE = mode;
+
+  // Toggle root dark-mode class
+  document.documentElement.classList.toggle('dark-mode', mode === DARK_MODE);
+}

app/dashboard/templates/shared/menu.html

@@ -331,5 +331,6 @@ <h5>Weekly leaderboard</h5>
   </nav>
   <nav class="navbar-nav mr-3">
     {% include 'shared/nav_auth.html' with source='authed' %}
+    {% include 'shared/theme_switcher.html' with source='authed' %}
   </nav>
 </div>

app/dashboard/templates/shared/theme_switcher.html

@@ -0,0 +1,5 @@
+<div id="theme-switcher" class="navbar-nav mr-3" aria-label="Toggle light/dark theme" title="Toggle light/dark theme">
+  <svg class="theme-switcher-svg theme-switcher__light" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"></path></svg>
+
+  <svg class="theme-switcher-svg theme-switcher__dark" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path></svg>
+</div>

app/townsquare/templates/townsquare/index.html

@@ -27,6 +27,8 @@
     <link rel="stylesheet" href="{% static "v2/css/town_square.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/activity_stream.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/tag.css" %}">
+    <link rel="stylesheet" href="{% static "v2/css/theme_switcher.css" %}">
+    <script src="{% static "v2/js/theme_switcher.js" %}"></script> <!-- needs to be in the head section -->
   </head>
 
   <body class="{{ active }} bg-lightblue g-font-muli" >

app/townsquare/templates/townsquare/shared/shareactivity.html

@@ -1,6 +1,6 @@
 {% load humanize static i18n %}
             {% if not is_direct_link %}
-              <div class="bg-white rounded border">
+              <div class="bg-shade-1 rounded border">
                 <div id="status">
                   <div id="char_count" data-toggle="tooltip" title="You have been a Gitcoin community member for {{max_length_offset}} days, and you can post up to 280 + {{max_length_offset}} = {{max_length}} chars in your status update."></div>
                   <div class="position-relative d-flex flex-row px-2 pt-4 pb-2">