diff --git a/h5p/classes/file_storage.php b/h5p/classes/file_storage.php
index 9ae0606c47d..5a0d858aa36 100644
--- a/h5p/classes/file_storage.php
+++ b/h5p/classes/file_storage.php
@@ -50,6 +50,8 @@ class file_storage implements H5PFileStorage {
     public const CACHED_ASSETS_FILEAREA = 'cachedassets';
     /** The export file area */
     public const EXPORT_FILEAREA = 'export';
+    /** The export css file area */
+    public const CSS_FILEAREA = 'css';
     /** The icon filename */
     public const ICON_FILENAME = 'icon.svg';
 
diff --git a/h5p/classes/output/renderer.php b/h5p/classes/output/renderer.php
index 0d25f2a92e2..6c0f51ccab0 100644
--- a/h5p/classes/output/renderer.php
+++ b/h5p/classes/output/renderer.php
@@ -14,18 +14,8 @@
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
-/**
- * Renderer.
- *
- * @package    core_h5p
- * @copyright  2020 Victor Deniz {victor@moodle.com}
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
-
 namespace core_h5p\output;
 
-defined('MOODLE_INTERNAL') || die();
-
 use plugin_renderer_base;
 
 /**
@@ -41,11 +31,75 @@ class renderer extends plugin_renderer_base {
      * Alter which stylesheets are loaded for H5P.
      * This is useful for adding custom styles or replacing existing ones.
      *
-     * @param array|object $scripts List of stylesheets that will be loaded
+     * This method can be overridden by other themes if the styles must be loaded from
+     * a different place than the "Raw initial SCSS" and "Raw SCSS" theme settings.
+     *
+     * @param \stdClass[] $styles List of stylesheets that will be loaded
      * @param array $libraries Array of libraries indexed by the library's machineName
      * @param string $embedtype Possible values: div, iframe, external, editor
      */
-    public function h5p_alter_styles(&$scripts, array $libraries, string $embedtype) {
+    public function h5p_alter_styles(&$styles, array $libraries, string $embedtype) {
+        global $CFG, $DB;
+
+        $record = [
+            'contextid' => \context_system::instance()->id,
+            'component' => \core_h5p\file_storage::COMPONENT,
+            'filearea' => \core_h5p\file_storage::CSS_FILEAREA,
+            'itemid' => 0,
+            'filepath' => '/',
+            'filename' => $CFG->theme . '_h5p.css',
+        ];
+        $fs = get_file_storage();
+        // Check if the CSS file for the current theme needs to be updated (because the SCSS settings have changed recently).
+        if ($cssfile = $fs->get_file(
+                $record['contextid'],
+                $record['component'],
+                $record['filearea'],
+                $record['itemid'],
+                $record['filepath'],
+                $record['filename'])) {
+            // Get the last time when the SCSS and CSSPRE settings were updated for the current theme and compare it with the
+            // time modified of the H5P CSS file, to determine whether it needs to be updated.
+            $sql = "SELECT MAX(timemodified) as timemodified
+                      FROM {config_log}
+                     WHERE plugin = :theme AND (name = 'scss' OR name = 'scsspre')";
+            $params = ['theme' => 'theme_' . $CFG->theme];
+            $setting = $DB->get_record_sql($sql, $params);
+            if ($setting && $setting->timemodified > $cssfile->get_timemodified()) {
+                // The CSS file needs to be updated. First, delete it to recreate it later with the current CSS.
+                $cssfile->delete();
+                $cssfile = null;
+            }
+        }
+
+        $theme = \theme_config::load($CFG->theme);
+        // When 'Raw initial SCSS' and 'Raw SCSS' theme settings are empty, the file doesn't need to be created.
+        if (empty($theme->settings->scsspre) && empty($theme->settings->scss)) {
+            return;
+        }
+
+        // If the CSS file doesn't exist, create it with the styles defined in 'Raw initial SCSS' and 'Raw SCSS' theme settings.
+        // As these scss and scsspre settings might have dependencies on the theme, the whole CSS theme content will be used and
+        // passed to the H5P player.
+        if (!$cssfile) {
+            $css = $theme->get_css_content();
+            $cssfile = $fs->create_file_from_string($record, $css);
+        }
+
+        $cssurl = \moodle_url::make_pluginfile_url(
+            $record['contextid'],
+            $record['component'],
+            $record['filearea'],
+            null,
+            $record['filepath'],
+            $record['filename']
+        );
+
+        // Add the CSS file to the styles array, to load it from the H5P player.
+        $styles[] = (object) [
+            'path' => $cssurl->out(),
+            'version' => '?ver='.$cssfile->get_timemodified(),
+        ];
     }
 
     /**
diff --git a/h5p/lib.php b/h5p/lib.php
index b640925fde9..21f9f96bb08 100644
--- a/h5p/lib.php
+++ b/h5p/lib.php
@@ -96,6 +96,7 @@ function core_h5p_pluginfile($course, $cm, $context, string $filearea, array $ar
             break;
         case \core_h5p\file_storage::CACHED_ASSETS_FILEAREA:
         case \core_h5p\file_storage::EXPORT_FILEAREA:
+        case \core_h5p\file_storage::CSS_FILEAREA:
             $itemid = 0;
             break;
     }