add styling

Author: devksingh4

_config.yml

@@ -160,7 +160,7 @@ gh_edit_branch: "main" # the branch that your docs is served from
 gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 
 # Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
-color_scheme: nil
+color_scheme: dark
 
 callouts_level: quiet # or loud
 callouts:

_includes/components/sidebar.html

@@ -24,6 +24,12 @@
     {% if site.nav_footer_custom != "" %}
       {{ site.nav_footer_custom }}
     {% endif %} <br />
-    {{site.title}} is a member of <a href="https://acm.illinois.edu"><img style="width: 50%;" src="/assets/images/acm-wordmark.png"/></a>.
+    {% if site.color_scheme and site.color_scheme != "nil" %}
+      {% assign color_scheme = site.color_scheme %}
+    {% else %}
+      {% assign color_scheme = "light" %}
+    {% endif %}
+
+    {{site.title}} is a member of <a href="https://acm.illinois.edu"><img style="width: 50%;" src="/assets/images/acm-wordmark-{{ color_scheme }}.png"/></a>.
   </footer>
 </div>

_sass/color_schemes/dark.scss

@@ -1,7 +1,7 @@
 $color-scheme: dark;
-$body-background-color: $grey-dk-300;
+$body-background-color: $acm-dark;
 $body-heading-color: $grey-lt-000;
-$body-text-color: $grey-lt-300;
+$body-text-color: $acm-light;
 $link-color: $blue-000;
 $nav-child-link-color: $grey-dk-000;
 $sidebar-color: $grey-dk-300;

_sass/color_schemes/light.scss

@@ -2,7 +2,7 @@ $color-scheme: light !default;
 $body-background-color: $white !default;
 $body-heading-color: $grey-dk-300 !default;
 $body-text-color: $grey-dk-100 !default;
-$link-color: $purple-000 !default;
+$link-color: $acm-blue !default;
 $nav-child-link-color: $grey-dk-100 !default;
 $sidebar-color: $grey-lt-000 !default;
 $base-button-color: #f7f7f7 !default;

_sass/support/_variables.scss

@@ -58,6 +58,13 @@ $red-100: #f96e65 !default;
 $red-200: #e94c4c !default;
 $red-300: #dd2e2e !default;
 
+$acm-light: #F2FDFF !default;
+$acm-dark: #121616 !default;
+$acm-dark-secondary: #566161 !default;
+$acm-success: #4AA914 !default;
+$acm-danger: #D63626 !default;
+$acm-blue: #0053B3 !default;
+$acm-muted-blue: #5386E4 !default;
 // Spacing
 
 $spacing-unit: 1rem; // 1rem == 16px