Add support for dark mode

about.json

@@ -1,6 +1,6 @@
 {
   "name": "Versatile Banner",
   "about_url": "https://meta.discourse.org/t/versatile-banner/109133",
-  "license_url": "https://github.com/tshenry/discourse-versatile-banner/blob/master/LICENSE",
+  "license_url": "https://github.com/tshenry/discourse-versatile-banner/blob/main/LICENSE",
   "component": true
 }

common/color_definitions.scss

@@ -0,0 +1,18 @@
+@function dark-if-set($dark, $light){
+  @if $dark != '' { @return $dark; } 
+  @else { @return $light; }
+}
+
+$bg-color: dark-light-choose($background_color, dark-if-set($background_color_dark, $background_color));
+$primary-text: dark-light-choose($primary_text_color, dark-if-set($primary_text_color_dark, $primary_text_color));
+$secondary-text: dark-light-choose($secondary_text_color, dark-if-set($secondary_text_color_dark, $secondary_text_color));
+$link-text: dark-light-choose($link_text_color, dark-if-set($link_text_color_dark, $link_text_color));
+$bg-img: url(dark-light-choose($banner_background_image, dark-if-set($banner_background_image_dark, $banner_background_image)));
+
+:root {
+  --banner-bg-color: #{$bg-color};
+  --banner-primary-text: #{$primary-text};
+  --banner-secondary-text: #{$secondary-text};
+  --banner-link-text: #{$link-text};
+  --banner-bg-img: #{$bg-img};
+}

common/common.scss

@@ -49,13 +49,13 @@
   max-width: calc(100% - 16px);
   margin: 0 auto;
   margin-top: 20px;
-  color: $primary_text_color;
+  color: var(--banner-primary-text);
   position: relative;
-  background-image: url($banner_background_image);
+  background-image: var(--banner-bg-img);
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
-  background-color: $background_color;
+  background-color: var(--banner-bg-color);
 
   .button-container {
     margin-right: 5px;
@@ -102,11 +102,11 @@
   h2,
   h3 {
     text-align: center;
-    color: $secondary_text_color;
+    color: var(--banner-secondary-text);
   }
 
   a {
-    color: $link_text_color;
+    color: var(--banner-link-text);
   }
 
   .section-header {
@@ -121,7 +121,7 @@
       margin: auto;
       width: 165px;
       height: 1px;
-      background: $secondary_text_color;
+      background: var(--banner-secondary-text);
     }
 
     .description p {
@@ -144,7 +144,7 @@
 
       .icon {
         font-size: 70px;
-        color: $secondary_text_color;
+        color: var(--banner-secondary-text);
 
         .responsive-img {
           vertical-align: -0.125em;
@@ -164,7 +164,7 @@
       }
 
       .btn.btn-icon-text {
-        background: $secondary_text_color;
+        background: var(--banner-secondary-text);
       }
     }
   }

settings.yml

@@ -1,50 +1,50 @@
 show_for_members:
   type: bool
   default: true
-  description: 
+  description:
     en: 'Display the banner for users logged into the forum'
 show_for_anon:
   type: bool
   default: true
-  description: 
+  description:
     en: 'Display the banner for anonymous users'
 display_on_mobile:
   type: bool
   default: true
-  description: 
+  description:
     en: 'Display the banner on mobile devices'
 display_on_desktop:
   type: bool
   default: true
-  description: 
+  description:
     en: 'Display the banner on desktop computers'
 display_on_homepage:
   type: bool
   default: true
-  description: 
+  description:
     en: 'Display the banner on the homepage'
 url_must_contain:
   type: list
   list_type: simple
   default: /latest|/categories|/new|/unread|/top*|/tag/*|/tags/*|/c/*|/t/*
-  description: 
+  description:
     en: 'Enter paths that should display the banner. Add <code>*</code> to the end of the path as a wildcard'
 dismissible:
   type: bool
   default: false
-  description: 
+  description:
     en: 'Allow the banner to be closed by users'
 collapsible:
   type: bool
   default: false
-  description: 
+  description:
     en: 'Allow the banner to be expanded and collapsed by users'
 default_collapsed_state:
   type: enum
   default: collapsed
   choices:
     - expanded
-  description: 
+  description:
     en: 'Default collapsed state when collapsible setting is enabled'
 cookie_lifespan:
   type: enum
@@ -55,20 +55,20 @@ cookie_lifespan:
     - week
     - month
     - year
-  description: 
+  description:
     en: 'The lifespan of the cookie used to remember if the banner has been closed, expanded, or collapsed.
          If set to "none", NO cookies will be used with this component, and any previously created cookies 
          related to the banner will be deleted the next time a user performs a full page load. The values are 
          measured as a single unit, so setting "year" will be one year, "week" will be one week, etc.'
 cookie_name:
   type: string
   default: "v1"
-  description: 
+  description:
     en: 'When important changes are made to the banner, you must change the cookie name to ensure all your users see the changes.'
 full_width_banner:
   type: bool
   default: false
-  description: 
+  description:
     en: 'Display the banner at full browser width'
 swap_default_positioning:
   type: bool
@@ -78,30 +78,55 @@ swap_default_positioning:
 banner_background_image:
   type: string
   default: "https://i.imgur.com/k7SnZth.jpg"
-  description: 
+  description:
     en: 'The source url for your background image. Tip: You can upload an image to your main theme and use the url from that, 
          but make sure that you do not use "Uploads" section of this component. Any uploads added to this component will be 
          deleted whenever it is updated.'
+banner_background_image_dark:
+  type: string
+  default: ""
+  description:
+    en: 'The source url for your background image when system dark mode is detected.'
 background_color:
   type: string
   default: "#EED4A1"
-  description: 
+  description:
     en: 'Used in place of a background image'
+background_color_dark:
+  type: string
+  default: ""
+  description:
+    en: 'Used in place of a background image when system dark mode is detected.'
 primary_text_color:
   type: string
   default: "#000"
   description:
     en: 'The main text color of the banner'
+primary_text_color_dark:
+  type: string
+  default: ""
+  description:
+    en: 'The main text color of the banner when system dark mode is detected'
 secondary_text_color:
   type: string
   default: "#FF6C00"
   description:
     en: 'The text color of the icon and text headings, and the button background color.'
+secondary_text_color_dark:
+  type: string
+  default: ""
+  description:
+    en: 'The text color of the icon and text headings, and the button background color when system dark mode is detected.'
 link_text_color:
   type: string
   default: "#0f82af"
   description:
-    en: 'The text color links within the banner.
+    en: 'The text color of links within the banner.'
+link_text_color_dark:
+  type: string
+  default: ""
+  description:
+    en: 'The text color of links within the banner when system dark mode is detected.
         <br><br><br>
         <h2>Banner Content Customization</h2>
         Customize the content of the banner with HTML. If you need to style your custom content 
@@ -196,7 +221,7 @@ third_column_size:
 fourth_column_size:
   type: string
   default: ''
-  description: 
+  description:
     en: '<br><br>
         <h2>Column Icons</h2>
         Use font awesome or a link to an image for the icon at the top of the columns.