From 783feef19c073e40064983823d13b0c65eb3bb3a Mon Sep 17 00:00:00 2001
From: MrTango <md@derico.de>
Date: Wed, 25 Sep 2024 14:07:23 +0200
Subject: [PATCH] Add chapter: theming a base theme

---
 docs/source/theming/index.md                |  1 +
 docs/source/theming/theming-a-base-theme.md | 36 +++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 docs/source/theming/theming-a-base-theme.md

diff --git a/docs/source/theming/index.md b/docs/source/theming/index.md
index dd0743403d..fe401772f3 100644
--- a/docs/source/theming/index.md
+++ b/docs/source/theming/index.md
@@ -19,4 +19,5 @@ theming-engine
 theming-strategy
 custom-styling
 using-third-party-themes
+theming-a-base-theme
 ```
diff --git a/docs/source/theming/theming-a-base-theme.md b/docs/source/theming/theming-a-base-theme.md
new file mode 100644
index 0000000000..0f089758a2
--- /dev/null
+++ b/docs/source/theming/theming-a-base-theme.md
@@ -0,0 +1,36 @@
+---
+html_meta:
+  "description": "Customize a base theme like `Volto Light Theme` via SCSS."
+  "property=og:description": "Customize a base theme like `Volto Light Theme` via SCSS."
+  "property=og:title": "Theming a base theme like `Volto Light Theme`"
+  "keywords": "Volto, Plone, frontend, React, themes, Volto Light Theme"
+---
+
+# Theming a base theme like `Volto Light Theme`
+
+In your Volto addon, create a `theme` folder with the follwing two empty files:
+
+```
+src/
+├── components
+├── index.js
+└── theme
+    ├── _main.scss
+    └── _variables.scss
+```
+
+## Variables
+`_variables.scss`
+
+This is the place to override SCSS variables of the base theme.
+
+```
+$text-color: #000;
+$font-size: 18px;
+$line-height: 24px;
+```
+
+## Main
+`_main.scss`
+
+All custom styles should done here. You can also include other SCSS or CSS files here.
\ No newline at end of file