diff --git a/assets/Assets.php b/assets/Assets.php
index baca557c..a47557a7 100644
--- a/assets/Assets.php
+++ b/assets/Assets.php
@@ -1,4 +1,9 @@
 <?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
 
 namespace humhub\modules\custom_pages\assets;
 
@@ -29,13 +34,10 @@ class Assets extends AssetBundle
             'custom-pages.css',
             'loader.gif',
             'module_image.png',
-        ]
+        ],
     ];
 
     public $css = [
-        'custom-pages.css'
+        'css/custom-pages.css',
     ];
-
-    public $js = [];
-
 }
diff --git a/assets/InlineStyleAssets.php b/assets/InlineStyleAssets.php
new file mode 100644
index 00000000..aa0fa157
--- /dev/null
+++ b/assets/InlineStyleAssets.php
@@ -0,0 +1,25 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\modules\custom_pages\assets;
+
+use humhub\components\assets\AssetBundle;
+
+class InlineStyleAssets extends AssetBundle
+{
+    /**
+     * @inheritdoc
+     */
+    public $sourcePath = '@custom_pages/resources';
+
+    /**
+     * @inheritdoc
+     */
+    public $css = [
+        'css/inline.css',
+    ];
+}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 7a3eb242..5823fea1 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,7 +3,8 @@ Changelog
 
 1.10.7 (Unreleased)
 -----------------------
-Enh #342: JS Dependency Updates
+- Enh #342: JS Dependency Updates
+- Enh #344: Replace theme variables with CSS variables
 
 1.10.6 (August 6, 2024)
 -----------------------
diff --git a/modules/template/widgets/views/templatePageEditButton.php b/modules/template/widgets/views/templatePageEditButton.php
index 57ed6f9e..5a950de9 100644
--- a/modules/template/widgets/views/templatePageEditButton.php
+++ b/modules/template/widgets/views/templatePageEditButton.php
@@ -38,8 +38,8 @@
     </div>
 
 <?php else: ?>
-    <a id="editPageButton" class="btn btn-primary btn-xs" data-ui-loader style="color:#000;" href="<?= Url::to(['view', 'id' => $pageId, 'editMode' => true, 'sguid' => $sguid]); ?>">
-        <i class="fa fa-pencil"></i>    
+    <a id="editPageButton" class="btn btn-primary btn-xs" data-ui-loader style="color:var(--text-color-highlight)" href="<?= Url::to(['view', 'id' => $pageId, 'editMode' => true, 'sguid' => $sguid]); ?>">
+        <i class="fa fa-pencil"></i>
         <?= Yii::t('CustomPagesModule.modules_template_widgets_views_templatePageEditButton', 'Edit Page') ?>
     </a>
-<?php endif; ?>
\ No newline at end of file
+<?php endif; ?>
diff --git a/resources/custom-pages.css b/resources/css/custom-pages.css
similarity index 100%
rename from resources/custom-pages.css
rename to resources/css/custom-pages.css
diff --git a/resources/css/inline.css b/resources/css/inline.css
new file mode 100644
index 00000000..13defbf0
--- /dev/null
+++ b/resources/css/inline.css
@@ -0,0 +1,7 @@
+.custom-pages-page a, .panel .panel-body p a {
+    color: var(--link);
+}
+.custom-pages-page a:hover, .panel .panel-body p a:hover {
+    color: var(--link);
+    text-decoration: underline;
+}
diff --git a/views/container/markdown.php b/views/container/markdown.php
index c702b146..a398f800 100644
--- a/views/container/markdown.php
+++ b/views/container/markdown.php
@@ -1,17 +1,25 @@
 <?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
 
 use humhub\modules\content\widgets\richtext\RichText;
+use humhub\modules\custom_pages\assets\InlineStyleAssets;
+use humhub\modules\custom_pages\models\Page;
 use humhub\modules\custom_pages\modules\template\widgets\PageConfigurationButton;
-use humhub\modules\custom_pages\widgets\CustomPageInlineStyle;
+use humhub\modules\ui\view\components\View;
 use yii\helpers\Html;
 
-/** @var $page \humhub\modules\custom_pages\models\Page */
+/* @var $this View */
+/* @var $page Page */
+/* @var $md string */
 
 $cssClass = ($page->hasAttribute('cssClass') && !empty($page->cssClass)) ? $page->cssClass : 'custom-pages-page';
-?>
-
-<?= CustomPageInlineStyle::widget(['theme' => $this->theme]); ?>
 
+InlineStyleAssets::register($this);
+?>
 <?= PageConfigurationButton::widget() ?>
 <div class="panel panel-default <?= Html::encode($cssClass) ?>">
     <div class="panel-body">
diff --git a/views/global/html.php b/views/global/html.php
index d17223c4..87aef499 100644
--- a/views/global/html.php
+++ b/views/global/html.php
@@ -1,16 +1,23 @@
 <?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
 
-use humhub\modules\custom_pages\widgets\CustomPageInlineStyle;
+use humhub\modules\custom_pages\assets\InlineStyleAssets;
+use humhub\modules\custom_pages\models\Page;
+use humhub\modules\ui\view\components\View;
 use yii\helpers\Html;
 
-/** @var $page \humhub\modules\custom_pages\models\Page */
-/** @var $html string */
+/* @var $this View */
+/* @var $page Page */
+/* @var $html string */
 
 $cssClass = ($page->hasAttribute('cssClass') && !empty($page->cssClass)) ? $page->cssClass : 'custom-pages-page';
-?>
-
-<?= CustomPageInlineStyle::widget(['theme' => $this->theme]); ?>
 
+InlineStyleAssets::register($this);
+?>
 <div class="container <?= Html::encode($cssClass) ?>">
     <div class="row">
         <div class="col-md-12">
diff --git a/views/global/markdown.php b/views/global/markdown.php
index 2451b348..7a266b3f 100644
--- a/views/global/markdown.php
+++ b/views/global/markdown.php
@@ -1,18 +1,24 @@
 <?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
 
 use humhub\libs\Html;
 use humhub\modules\content\widgets\richtext\RichText;
+use humhub\modules\custom_pages\assets\InlineStyleAssets;
 use humhub\modules\custom_pages\models\Page;
 use humhub\modules\custom_pages\modules\template\widgets\PageConfigurationButton;
-use humhub\modules\custom_pages\widgets\CustomPageInlineStyle;
+use humhub\modules\ui\view\components\View;
 
+/* @var $this View */
 /* @var $page Page */
 
 $cssClass = ($page->hasAttribute('cssClass') && !empty($page->cssClass)) ? $page->cssClass : 'custom-pages-page';
-?>
-
-<?= CustomPageInlineStyle::widget(['theme' => $this->theme]); ?>
 
+InlineStyleAssets::register($this);
+?>
 <?php if ($page->hasTarget(Page::NAV_CLASS_ACCOUNTNAV)): ?>
     <div class="panel panel-default <?= Html::encode($cssClass) ?>">
         <div class="panel-body">
diff --git a/widgets/CustomPageInlineStyle.php b/widgets/CustomPageInlineStyle.php
deleted file mode 100644
index 4a076f2c..00000000
--- a/widgets/CustomPageInlineStyle.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-
-
-namespace humhub\modules\custom_pages\widgets;
-
-use humhub\components\Widget;
-use humhub\modules\ui\view\components\Theme;
-
-/**
- * Class CustomPageInlineStyle for custom pages inline styling
- * @package modules\custom_pages\widgets
- */
-class CustomPageInlineStyle extends Widget
-{
-    /**
-     * @var Theme
-     */
-    public $theme;
-
-    public function run()
-    {
-        $linkColor = $this->theme->variable('link', $this->theme->variable('info'));
-        return $this->render('inline-style', [
-            'linkColor' => $linkColor,
-        ]);
-    }
-
-}
diff --git a/widgets/views/inline-style.php b/widgets/views/inline-style.php
deleted file mode 100644
index cdd0e48b..00000000
--- a/widgets/views/inline-style.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php
-/* @var $linkColor string */
-?>
-
-<style>
-    .custom-pages-page a, .panel .panel-body p a {
-        color: <?= $linkColor ?>;
-    }
-
-    .custom-pages-page a:hover, .panel .panel-body p a:hover {
-        color: <?= $linkColor ?>;
-        text-decoration: underline;
-    }
-</style>
-