diff --git a/app/models/stylesheet.rb b/app/models/stylesheet.rb
index f2939f1ca..8a4a620b7 100644
--- a/app/models/stylesheet.rb
+++ b/app/models/stylesheet.rb
@@ -4,12 +4,11 @@
 # a picture for the background of the user's profile.
 # There's only one stylesheet record in the database, which is updated on each colour change.
 class Stylesheet < ApplicationRecord
-
   # brightness limits to change the font color to black or white
   BRIGHTNESS_HIGH_LIMIT = 160
   BRIGHTNESS_LOW_LIMIT = 40
 
-  validates_presence_of :contents
+  validates :contents, presence: true
 
   ## ===== COMMON =====
 
@@ -41,6 +40,10 @@ class Stylesheet < ApplicationRecord
     Setting.get('secondary_color')
   end
 
+  def self.primary_lightest
+    Stylesheet.primary_light.paint.lighten(60)
+  end
+
   def self.primary_light
     Stylesheet.primary.paint.lighten(10)
   end
@@ -49,6 +52,14 @@ class Stylesheet < ApplicationRecord
     Stylesheet.primary.paint.darken(20)
   end
 
+  def self.primary_darkest
+    Stylesheet.primary_dark.paint.darken(20)
+  end
+
+  def self.secondary_lightest
+    Stylesheet.secondary_light.paint.lighten(60)
+  end
+
   def self.secondary_light
     Stylesheet.secondary.paint.lighten(10)
   end
@@ -57,6 +68,10 @@ class Stylesheet < ApplicationRecord
     Stylesheet.secondary.paint.darken(20)
   end
 
+  def self.secondary_darkest
+    Stylesheet.secondary_dark.paint.darken(20)
+  end
+
   def self.primary_with_alpha(alpha)
     Stylesheet.primary.paint.to_rgb.insert(3, 'a').insert(-2, ", #{alpha}")
   end
diff --git a/app/themes/casemate/style.scss.erb b/app/themes/casemate/style.scss.erb
index 8ea3c0eb9..1db096e48 100644
--- a/app/themes/casemate/style.scss.erb
+++ b/app/themes/casemate/style.scss.erb
@@ -13,17 +13,17 @@ $secondary-text-color: <%= Stylesheet.secondary_text_color %> !default;
 $primary-decoration-color: <%= Stylesheet.primary_decoration_color %> !default;
 
 :root {
-  --main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%) !important;
+  --main-lightest: <%= Stylesheet.primary_lightest %> !important;
   --main-light: <%= Stylesheet.primary_light %> !important;
   --main: <%= Stylesheet.primary %> !important;
   --main-dark: <%= Stylesheet.primary_dark %> !important;
-  --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%) !important;
+  --main-darkest: <%= Stylesheet.primary_darkest %> !important;
 
-  --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%) !important;
+  --secondary-lightest: <%= Stylesheet.secondary_lightest %> !important;
   --secondary-light: <%= Stylesheet.secondary_light %> !important;
   --secondary: <%= Stylesheet.secondary %> !important;
   --secondary-dark: <%= Stylesheet.secondary_dark %> !important;
-  --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%) !important;
+  --secondary-darkest: <%= Stylesheet.secondary_darkest %> !important;
 
   --main-text-color: <%= Stylesheet.primary_text_color %> !important;
   --secondary-text-color: <%= Stylesheet.secondary_text_color %> !important;