Customizing Bedrock with SASS Overrides

https://documentation.concretecms.org/9-x/developers/working-themes/sass-overrides

themes/theme_boilerplate/page_theme.php

@@ -3,6 +3,8 @@
 namespace Concrete\Package\V9PackageBoilerplate\Theme\ThemeBoilerplate;
 
 use Concrete\Core\Page\Theme\BedrockThemeTrait;
+use Concrete\Core\Page\Theme\Color\Color;
+use Concrete\Core\Page\Theme\Color\ColorCollection;
 use Concrete\Core\Page\Theme\Theme;
 
 class PageTheme extends Theme
@@ -20,4 +22,13 @@ public function getThemeDescription()
     {
         return t('A Concrete CMS Theme.');
     }
+
+    public function getColorCollection(): ?ColorCollection
+    {
+        $defaultBedrockColors = $this->getBedrockColorCollection();
+        $defaultBedrockColors->add(new Color('fun', t('Fun')));
+        $defaultBedrockColors->remove('dark');
+
+        return $defaultBedrockColors;
+    }
 }

themes/theme_boilerplate/theme_bedrock_documentation/assets/scss/_variables.scss

@@ -0,0 +1,29 @@
+@import url(//fonts.googleapis.com/css?family=Fredoka+One);
+@import url(//fonts.googleapis.com/css2?family=Bellota+Text:wght@400;700&display=swap);
+
+$primary: #375d84;
+$secondary: #eb7724;
+$light: #fff;
+$body-bg: #ffd89f;
+$fun: #ec008c;
+$light-blue: #8bb2ff;
+
+$theme-colors: (
+        'primary': $primary,
+        'secondary': $secondary,
+        'light': $light,
+);
+
+$custom-colors: (
+        'fun': $fun,
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+$headings-font-family: "Fredoka One";
+$headings-color: $light-blue;
+$headings-font-weight: 400;
+
+$font-family-base: "Bellota Text";
+$font-weight-base: 500;
+$font-size-root: 20px;

themes/theme_boilerplate/theme_bedrock_documentation/assets/scss/main.scss

@@ -1 +1,2 @@
+@import "variables";
 @import "@concretecms/bedrock/assets/bedrock/scss/frontend";