✨ Custom theme color

README.md

@@ -30,4 +30,25 @@ Every commit in this branch will be built and tested automatically by Github Act
   }
   </script>
   ```
+  The above is required content, if you need more custom configuration, please skip to [Configuration](#Configuration).
 * Activate the theme.
+
+### Configuration
+
+The Moegi theme is configured by declaring a `config` object in `Site Header`, for example:
+```js
+<script>
+const config = {
+  api: {
+    url: 'Your API URL',
+    contentKey: 'Your Content API Key',
+  },
+  primaryColor: '#86B81B'
+}
+</script>
+```
+
+| Name | Description |
+| ------ | ------ |
+| `api` | required |
+| `primaryColor` | Optional. Custom theme color, default is '#86B81B' (* Only HEX format supported) |

README_zh.md

@@ -28,4 +28,25 @@
   }
   </script>
   ```
-* 设置完成，启用主题
+  以上为必填内容，如需更多自定义配置请跳转[配置项](#配置项)。
+* 设置完成，启用主题
+
+### 配置项
+
+Moegi 主题的配置方式为在 `Site Header`中声明`config`对象，例如：
+```js
+<script>
+const config = {
+  api: {
+    url: 'Your API URL',
+    contentKey: 'Your Content API Key',
+  },
+  primaryColor: '#86B81B'
+}
+</script>
+```
+
+| 配置项名称 | 说明 |
+| ------ | ------ |
+| `api` | 必填 |
+| `primaryColor` | 可选。自定义主题颜色，默认为 '#86B81B'（* 仅支持HEX格式） |

src/App.svelte

@@ -13,13 +13,28 @@
   let loaded = false;
   let customHeaderClass = '';
 
+  loadCustomConfig();
+
   onMount(async () => {
 		const info = await api.settings.browse();
     siteInfo.set(info);
     console.log($siteInfo);
   });
+
+  function loadCustomConfig () {
+    if (config.primaryColor) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(config.primaryColor);
+      const rgbColor = result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      } : {};
+      document.documentElement.style.setProperty('--color-primary', config.primaryColor);
+      document.documentElement.style.setProperty('--color-primary-rgb', `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`);
+    }
+  }
   
-  function handleMessage(event) {
+  function handleMessage (event) {
     const eventDetail = event.detail
     switch (eventDetail.func) {
       case 'setLoadStatus':

src/components/FeedItem.svelte

@@ -5,7 +5,6 @@
 </script>
 
 <style lang="scss">
-  @import "../css/variables";
   @import "../css/mixins";
 
   .feed-item-content {

src/components/Header.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <style lang="scss">
-  @import "../css/variables";
   @import "../css/mixins";
 
   .gh-head {

src/components/Hero.svelte

@@ -4,7 +4,6 @@
 </script>
 
 <style lang="scss">
-  @import "../css/variables";
   @import "../css/mixins";
 
   .moegi-hero {

src/components/PostContent.svelte

@@ -8,7 +8,6 @@
 </script>
 
 <style lang="scss" global>
-  @import "../css/variables";
   @import "../css/mixins";
   @import "../css/prism-theme";
 

src/css/_mixins.scss → src/css/mixins.scss

@@ -2,6 +2,13 @@
 /// @access public
 /// @param {String} $breakpoint - Breakpoint
 /// @requires $breakpoints
+
+$breakpoints: (
+  'sm': 'only screen and (max-width: 768px)',
+  'md': 'only screen and (min-width: 769px)',
+  'lg': 'only screen and (min-width: 1200px)',
+) !default;
+
 @mixin respond-to($breakpoint) {
   $raw-query: map-get($breakpoints, $breakpoint);
 

src/css/variables.scss

@@ -0,0 +1,9 @@
+@function hexToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+  --color-primary: #86B81B;
+  --color-primary-rgb: #{hexToRGB(#86B81B)};
+  --color-background: #ffffff;
+}

src/routes/Index.svelte

@@ -44,7 +44,7 @@
     align-items: center;
     font-size: 0.9em;
     padding: 8px 12px;
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: rgba(var(--color-primary-rgb), 0.06);
     border-radius: 4px;
     .iconfont {
       font-size: 1.1em;
@@ -81,7 +81,7 @@
         <FeedItem data={postItem} index={getPostIndex(i)} showIndex={!tagSlug && !authorSlug} />
       {/each}
     </div>
-    {#if paginationData.pagination}
+    {#if paginationData}
       <Pagination {paginationData} />
     {/if}
   </div>

src/routes/Post.svelte

@@ -92,7 +92,6 @@
 </script>
 
 <style lang="scss">
-  @import "../css/variables";
   @import "../css/mixins";
 
   header {