feat(theme): Add background image option to createTheme() (#575)

Author: ethan-vanderheijden

core/README.md

@@ -288,6 +288,7 @@ const myTheme = createTheme({
   theme: 'light',
   settings: {
     background: '#ffffff',
+    backgroundImage: '',
     foreground: '#75baff',
     caret: '#5d00ff',
     selection: '#036dd626',

themes/theme/README.md

@@ -23,6 +23,7 @@ const myTheme = createTheme({
   theme: 'light',
   settings: {
     background: '#ffffff',
+    backgroundImage: '',
     foreground: '#75baff',
     caret: '#5d00ff',
     selection: '#036dd626',
@@ -70,6 +71,7 @@ const myTheme = createTheme({
   theme: 'light',
   settings: {
     background: '#ffffff',
+    backgroundImage: '',
     foreground: '#75baff',
     caret: '#5d00ff',
     selection: '#036dd626',
@@ -297,8 +299,10 @@ export interface CreateThemeOptions {
 }
 declare type Theme = 'light' | 'dark';
 export interface Settings {
-  /** Editor background. */
+  /** Editor background color. */
   background: string;
+  /** Editor background image. */
+  backgroundImage?: string;
   /** Default text color. */
   foreground: string;
   /** Caret color. */

themes/theme/src/index.tsx

@@ -19,8 +19,10 @@ export interface CreateThemeOptions {
 type Theme = 'light' | 'dark';
 
 export interface Settings {
-  /** Editor background. */
+  /** Editor background color. */
   background?: string;
+  /** Editor background image. */
+  backgroundImage?: string;
   /** Default text color. */
   foreground?: string;
   /** Caret color. */
@@ -51,6 +53,9 @@ export const createTheme = ({ theme, settings = {}, styles = [] }: CreateThemeOp
   if (settings.background) {
     baseStyle.backgroundColor = settings.background;
   }
+  if (settings.backgroundImage) {
+    baseStyle.backgroundImage = settings.backgroundImage;
+  }
   if (settings.foreground) {
     baseStyle.color = settings.foreground;
   }

www/src/pages/theme/editor/themeCode.ts

@@ -202,6 +202,7 @@ const myTheme = createTheme({
   dark: '${styles.dark}',
   settings: {
     background: '${styles.background}',
+    backgroundImage: '',
     foreground: '${styles.foreground}',
     caret: '${styles.caret}',
     selection: '${styles.selection}',