feat: add github theme

README.md

@@ -112,7 +112,13 @@ Checkout [renderers](./src/renderers/) for the default implementations. To ensur
 
 ## Supported Themes
 
-Themes are pre-defined style collections that provide consistent visual styling for markdown content. Currently, we support two built-in themes: 1. default, and 2. serif. To use a theme, you can follow this pattern:
+Themes are pre-defined style collections that provide consistent visual styling for markdown content. Currently, we support two built-in themes: 
+
+1. default
+2. serif
+3. github
+
+To use a theme, you can follow this pattern:
 
 ```js
 import { themes } from "react-native-remark"

example/App.tsx

@@ -20,7 +20,7 @@ import {
   useColorScheme,
 } from "react-native";
 
-const { defaultTheme } = themes;
+const { defaultTheme, githubTheme, serifTheme } = themes;
 
 const BASE_URL =
   "https://raw.githubusercontent.com/imwithye/react-native-remark/refs/heads/main/markdown";
@@ -32,6 +32,7 @@ const HomeScreen = () => {
   const { showActionSheetWithOptions } = useActionSheet();
   const [url, setUrl] = useState(URL);
   const [markdown, setMarkdown] = useState("");
+  const [theme, setTheme] = useState(defaultTheme);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -40,6 +41,42 @@ const HomeScreen = () => {
       headerStyle: {
         backgroundColor: colorScheme === "dark" ? "black" : "white",
       },
+      headerLeft: () => (
+        <Button
+          title="Theme"
+          onPress={() => {
+            const options = [
+              {
+                title: "Cancel",
+                theme: null,
+              },
+              {
+                title: "Default",
+                theme: defaultTheme,
+              },
+              {
+                title: "GitHub",
+                theme: githubTheme,
+              },
+              {
+                title: "Serif",
+                theme: serifTheme,
+              },
+            ];
+            const cancelButtonIndex = 0;
+            showActionSheetWithOptions(
+              {
+                options: options.map((option) => option.title),
+                cancelButtonIndex,
+              },
+              (idx?: number) => {
+                if (!idx || idx === cancelButtonIndex) return;
+                setTheme(options[idx].theme ?? defaultTheme);
+              },
+            );
+          }}
+        />
+      ),
       headerRight: () => (
         <Button
           title="Load"
@@ -91,7 +128,7 @@ const HomeScreen = () => {
         />
       ),
     });
-  }, [colorScheme, navigation, showActionSheetWithOptions, setUrl]);
+  }, [colorScheme, navigation, showActionSheetWithOptions, setTheme, setUrl]);
 
   useEffect(() => {
     setLoading(true);
@@ -115,7 +152,7 @@ const HomeScreen = () => {
       ) : (
         <Markdown
           markdown={markdown}
-          theme={defaultTheme}
+          theme={theme}
           onLinkPress={(url) => Linking.openURL(url)}
         />
       )}

src/index.tsx

@@ -1,10 +1,11 @@
 import { useMarkdownContext } from "./context";
 import { Markdown } from "./markdown";
 import { RenderFunc, RendererArgs, Renderers } from "./renderers";
-import { Theme, defaultTheme, serifTheme } from "./themes";
+import { Theme, defaultTheme, githubTheme, serifTheme } from "./themes";
 
 export const themes = {
   defaultTheme,
+  githubTheme,
   serifTheme,
 };
 

src/markdown.tsx

@@ -42,9 +42,14 @@ export const Markdown = ({
 }: MarkdownProps) => {
   const tree = useMemo(() => parser.parse(markdown), [markdown]);
 
+  const activeTheme = theme ?? defaultTheme;
   const renderers = useMemo(
-    () => ({ ...defaultRenderers, ...customRenderers }),
-    [customRenderers],
+    () => ({
+      ...defaultRenderers,
+      ...activeTheme.renderers,
+      ...customRenderers,
+    }),
+    [activeTheme.renderers, customRenderers],
   );
   const definitions = useMemo(() => extractDefinitions(tree), [tree]);
 
@@ -59,7 +64,7 @@ export const Markdown = ({
 
   const colorScheme = useColorScheme();
   const mode = colorScheme === "dark" ? "dark" : "light";
-  const activeTheme = theme ?? defaultTheme;
+
   const mergedStyles = mergeStyles(
     activeTheme.global,
     activeTheme[mode],

src/themes/default.tsx → src/themes/default/index.tsx

@@ -1,6 +1,6 @@
 import { ColorValue, Platform, TextStyle } from "react-native";
 
-import { Theme } from "./themes";
+import { Theme } from "../themes";
 
 const monospaceFontFamily = Platform.select({
   ios: "Menlo",

src/themes/github/heading.tsx

@@ -0,0 +1,31 @@
+import { Heading } from "mdast";
+import { ReactNode } from "react";
+import { Text, View } from "react-native";
+
+import { useMarkdownContext } from "../../context";
+import { RendererArgs } from "../../renderers";
+
+export const HeadingRenderer = ({ node }: RendererArgs<Heading>): ReactNode => {
+  const { renderers, styles } = useMarkdownContext();
+  const { PhrasingContentRenderer } = renderers;
+
+  return (
+    <View
+      style={{
+        borderBottomWidth: node.depth <= 3 ? 1 : 0,
+        borderColor: styles.borderColor,
+      }}
+    >
+      <Text style={styles.heading?.(node.depth)}>
+        {node.children.map((child, idx) => (
+          <PhrasingContentRenderer
+            node={child}
+            key={idx}
+            index={idx}
+            parent={node}
+          />
+        ))}
+      </Text>
+    </View>
+  );
+};

src/themes/github/index.tsx

@@ -0,0 +1,164 @@
+import { ColorValue, Platform, TextStyle } from "react-native";
+
+import { Theme } from "../themes";
+import { HeadingRenderer } from "./heading";
+import { TableCellRenderer, TableRenderer, TableRowRenderer } from "./table";
+
+const monospaceFontFamily = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+});
+
+const light = {
+  primaryColor: "#000000",
+  darkColor: "#d1d9e0",
+  linkColor: "#007AFF",
+  borderColor: "#eeeeee",
+  bgColorLight: "#f9f9f9",
+  bgColorHeavy: "#f5f5f5",
+};
+const dark = {
+  primaryColor: "#ffffff",
+  darkColor: "#bbbbbb",
+  linkColor: "#007AFF",
+  borderColor: "#3d444d",
+  bgColorLight: "#151b23",
+  bgColorHeavy: "#0b0b0b",
+};
+
+const headingHandler = (color: ColorValue) => {
+  return (level: number): TextStyle => {
+    const fontSize = 32 - level * 2;
+    const fontWeight = level <= 3 ? "bold" : "500";
+    const marginVertical = level <= 3 ? 4 : 2;
+    return { fontSize, fontWeight, marginVertical, color };
+  };
+};
+
+export const githubTheme: Theme = {
+  global: {
+    blockquote: {
+      borderLeftWidth: 3,
+      borderLeftColor: light.darkColor,
+      paddingTop: 5,
+      paddingBottom: 5,
+      paddingLeft: 10,
+      paddingRight: 5,
+      gap: 5,
+    },
+    borderColor: light.borderColor,
+    break: {},
+    codeBlock: {
+      headerBackgroundColor: light.bgColorHeavy,
+      contentBackgroundColor: light.bgColorLight,
+      headerTextStyle: {
+        fontSize: 14,
+      },
+      contentTextStyle: {
+        fontFamily: monospaceFontFamily,
+        fontSize: 14,
+      },
+    },
+    container: {
+      gap: 10,
+    },
+    delete: {
+      textDecorationLine: "line-through",
+    },
+    emphasis: {
+      fontStyle: "italic",
+    },
+    footnoteReference: {
+      fontStyle: "italic",
+      fontSize: 10,
+      color: light.darkColor,
+    },
+    heading: headingHandler(light.primaryColor),
+    image: {
+      borderRadius: 5,
+    },
+    inlineCode: {
+      fontFamily: monospaceFontFamily,
+      backgroundColor: light.bgColorLight,
+    },
+    link: {
+      color: light.linkColor,
+    },
+    linkReference: {
+      color: light.linkColor,
+    },
+    list: {
+      gap: 5,
+    },
+    listItem: {
+      flex: 1,
+      gap: 5,
+    },
+    paragraph: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: light.primaryColor,
+    },
+    strong: {
+      fontWeight: "bold",
+    },
+    tableCell: {
+      fontSize: 14,
+      lineHeight: 20,
+      backgroundColor: light.bgColorLight,
+    },
+    text: {},
+    thematicBreak: {
+      marginVertical: 10,
+      height: 5,
+      backgroundColor: light.borderColor,
+    },
+  },
+  light: {},
+  dark: {
+    blockquote: {
+      borderLeftColor: dark.darkColor,
+      backgroundColor: dark.bgColorHeavy,
+    },
+    borderColor: dark.borderColor,
+    codeBlock: {
+      headerBackgroundColor: dark.bgColorHeavy,
+      contentBackgroundColor: dark.bgColorLight,
+      headerTextStyle: {
+        color: dark.primaryColor,
+      },
+      contentTextStyle: {
+        color: dark.primaryColor,
+      },
+    },
+    footnoteReference: {
+      color: dark.darkColor,
+    },
+    heading: headingHandler(dark.primaryColor),
+    inlineCode: {
+      backgroundColor: dark.bgColorLight,
+    },
+    link: {
+      color: dark.linkColor,
+    },
+    linkReference: {
+      color: dark.linkColor,
+    },
+    paragraph: {
+      color: dark.primaryColor,
+    },
+    tableCell: {
+      color: dark.primaryColor,
+      backgroundColor: dark.bgColorLight,
+    },
+    thematicBreak: {
+      backgroundColor: dark.borderColor,
+    },
+  },
+  renderers: {
+    HeadingRenderer,
+    TableRenderer,
+    TableRowRenderer,
+    TableCellRenderer,
+  },
+};