Merge pull request #710 from toeverything/0111-style-fix

chore: adding code block background color, line number color, fixing landing page case sensitivity

packages/app/src/styles/theme.ts

@@ -20,6 +20,7 @@ export const getLightTheme = (
       popoverBackground: '#fff',
       tooltipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
+      codeBlockBackground: '#fafbfd',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
@@ -40,6 +41,7 @@ export const getLightTheme = (
       disableColor: '#C0C0C0',
       warningColor: '#906616',
       errorColor: '#EB4335',
+      lineNumberColor: '#888A9E',
     },
     font: {
       xs: '12px',
@@ -96,6 +98,7 @@ export const getDarkTheme = (
         editorMode === 'edgeless'
           ? lightTheme.colors.codeBackground
           : '#505662',
+      codeBlockBackground: '#36383D',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
@@ -117,6 +120,7 @@ export const getDarkTheme = (
       disableColor: '#4b4b4b',
       warningColor: '#906616',
       errorColor: '#EB4335',
+      lineNumberColor: '#888A9E',
     },
     shadow: {
       popover:
@@ -154,12 +158,14 @@ export const globalThemeVariables: (
     '--affine-popover-color': theme.colors.popoverColor,
     '--affine-input-color': theme.colors.inputColor,
     '--affine-code-color': theme.colors.codeColor,
+    '--affine-code-block-background': theme.colors.codeBlockBackground,
     '--affine-quote-color': theme.colors.quoteColor,
     '--affine-selected-color': theme.colors.selectedColor,
     '--affine-placeholder-color': theme.colors.placeHolderColor,
     '--affine-border-color': theme.colors.borderColor,
     '--affine-disable-color': theme.colors.disableColor,
     '--affine-tooltip-color': theme.colors.tooltipColor,
+    '--affine-line-number-color': theme.colors.lineNumberColor,
 
     '--affine-modal-shadow': theme.shadow.modal,
     '--affine-popover-shadow': theme.shadow.popover,

packages/app/src/styles/types.ts

@@ -25,6 +25,7 @@ export interface AffineTheme {
     hoverBackground: string;
     innerHoverBackground: string;
     codeBackground: string;
+    codeBlockBackground: string;
     warningBackground: string;
     errorBackground: string;
     // Use for the page`s text
@@ -47,6 +48,7 @@ export interface AffineTheme {
     disableColor: string;
     warningColor: string;
     errorColor: string;
+    lineNumberColor: string;
   };
   font: {
     xs: string; // tiny
@@ -90,6 +92,8 @@ export interface AffineThemeCSSVariables {
   '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
   '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
   '--affine-code-background': AffineTheme['colors']['codeBackground'];
+
+  '--affine-code-block-background': AffineTheme['colors']['codeBlockBackground'];
   '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
 
   '--affine-text-color': AffineTheme['colors']['textColor'];
@@ -107,6 +111,7 @@ export interface AffineThemeCSSVariables {
   '--affine-border-color': AffineTheme['colors']['borderColor'];
   '--affine-disable-color': AffineTheme['colors']['disableColor'];
   '--affine-tooltip-color': AffineTheme['colors']['tooltipColor'];
+  '--affine-line-number-color': AffineTheme['colors']['lineNumberColor'];
 
   '--affine-modal-shadow': AffineTheme['shadow']['modal'];
   '--affine-popover-shadow': AffineTheme['shadow']['popover'];

packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md

@@ -39,7 +39,7 @@ docker run -it --name affine -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/to
 
 [] What about a code block? `````
 
-```javascript
+```JavaScript
 console.log('Hello world');
 ```