diff --git a/app/assets/javascripts/darkswarm/directives/darker_background.js.coffee b/app/assets/javascripts/darkswarm/directives/darker_background.js.coffee
deleted file mode 100644
index b41541fab1..0000000000
--- a/app/assets/javascripts/darkswarm/directives/darker_background.js.coffee
+++ /dev/null
@@ -1,11 +0,0 @@
-angular.module('Darkswarm').directive "darkerBackground", ->
-  restrict: "A"
-  link: (scope, elm, attr)->
-    toggleClass = (value) ->
-      elm.closest('.page-view').toggleClass("with-darker-background", value)
-
-    toggleClass(true)
-
-    # if an OrderCycle is selected, disable darker background
-    scope.$watch 'order_cycle.order_cycle_id', (newvalue, oldvalue) ->
-      toggleClass(false) if newvalue
diff --git a/app/helpers/shop_helper.rb b/app/helpers/shop_helper.rb
index fa248c8047..5fcdedc0d9 100644
--- a/app/helpers/shop_helper.rb
+++ b/app/helpers/shop_helper.rb
@@ -62,6 +62,12 @@ module ShopHelper
     true
   end
 
+  def shop_tab_class(tab)
+    return unless (tab == "home" && show_home_tab?) || current_order(false)&.order_cycle.nil?
+
+    "with-darker-background"
+  end
+
   private
 
   def show_groups_tabs?
diff --git a/app/views/shop/messages/_closed_shop.html.haml b/app/views/shop/messages/_closed_shop.html.haml
index 7c65eeaef4..185306b6b3 100644
--- a/app/views/shop/messages/_closed_shop.html.haml
+++ b/app/views/shop/messages/_closed_shop.html.haml
@@ -1,7 +1,7 @@
 .closed-shop-header
   .row
     .small-12.columns
-      .content{ "darker-background" => true }
+      .content
         %h4
           .warning-sign
             .rectangle
diff --git a/app/views/shop/messages/_customer_required.html.haml b/app/views/shop/messages/_customer_required.html.haml
index 844621ce28..9b358f1e6e 100644
--- a/app/views/shop/messages/_customer_required.html.haml
+++ b/app/views/shop/messages/_customer_required.html.haml
@@ -1,4 +1,4 @@
-.content{ "darker-background" => true }
+.content
   .row.footer-pad
     .small-12.columns{ "data-controller": "login-modal" }
       %strong
diff --git a/app/views/shop/messages/_select_oc.html.haml b/app/views/shop/messages/_select_oc.html.haml
index 6256789d32..74376d178e 100644
--- a/app/views/shop/messages/_select_oc.html.haml
+++ b/app/views/shop/messages/_select_oc.html.haml
@@ -1,4 +1,4 @@
-.content.footer-pad{ "darker-background" => true, "ng-show" => "order_cycle.order_cycle_id == null" }
+.content.footer-pad{ "ng-show" => "order_cycle.order_cycle_id == null" }
   .row
     .small-12.columns
       .select-oc-message
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 92d288a9f9..31870b7b38 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -10,8 +10,8 @@
         .columns.large-4.show-for-large-up
           = render partial: "shopping_shared/order_cycles"
     - shop_tabs.each do |tab|
-      %div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:default]} #{'shop' if tab[:shop]}" } 
-        .page-view
+      %div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:default]} #{'shop' if tab[:shop]}" }
+        .page-view{ class: shop_tab_class(tab[:name]) }
           - if tab[:custom]
             = render "shopping_shared/tabs/custom"
           - else
diff --git a/app/webpacker/css/darkswarm/_shop-product-rows.scss b/app/webpacker/css/darkswarm/_shop-product-rows.scss
index ddf25d6d51..edbe9fb00a 100644
--- a/app/webpacker/css/darkswarm/_shop-product-rows.scss
+++ b/app/webpacker/css/darkswarm/_shop-product-rows.scss
@@ -1,5 +1,7 @@
 .darkswarm {
   products {
+    background-color: white;
+
     product {
       @import "shop_partials/shop-product-rows";
     }