Add remaining Material3 colors to the markdown template

MateriiApps · Jan 18, 2025 · 8314594 · 8314594
1 parent 598cd20
commit 8314594
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 5 deletions.
diff --git a/shared/src/commonMain/moko-resources/assets/markdown/template.html b/shared/src/commonMain/moko-resources/assets/markdown/template.html
@@ -14,11 +14,48 @@
             /* Colors are injected in order to sync with device theming */
             * {
                 --primary: $primary$;
+                --onPrimary: $onPrimary$;
+                --primaryContainer: $primaryContainer$;
+                --onPrimaryContainer: $onPrimaryContainer$;
+                --inversePrimary: $inversePrimary$;
+
+                --secondary: $secondary$;
+                --onSecondary: $onSecondary$;
+                --secondaryContainer: $secondaryContainer$;
+                --onSecondaryContainer: $onSecondaryContainer$;
+
+                --tertiary: $tertiary$;
+                --onTertiary: $onTertiary$;
+                --tertiaryContainer: $tertiaryContainer$;
+                --onTertiaryContainer: $onTertiaryContainer$;
+
+                --background: $background$;
+                --onBackground: $onBackground$;
+
+                --surface: $surface$;
                 --onSurface: $onSurface$;
+                --surfaceVariant: $surfaceVariant$;
                 --onSurfaceVariant: $onSurfaceVariant$;
-                --surfaceContainer: $surfaceContainer$;
-                --scrim: $scrim$;
+                --surfaceTint: $surfaceTint$;
+                --inverseSurface: $inverseSurface$;
+                --inverseOnSurface: $inverseOnSurface$;
+
+                --error: $error$;
+                --onError: $onError$;
+                --errorContainer: $errorContainer$;
+                --onErrorContainer: $onErrorContainer$;
+
                 --outline: $outline$;
+                --outlineVariant: $outlineVariant$;
+                --scrim: $scrim$;
+
+                --surfaceBright: $surfaceBright$;
+                --surfaceDim: $surfaceDim$;
+                --surfaceContainer: $surfaceContainer$;
+                --surfaceContainerHigh: $surfaceContainerHigh$;
+                --surfaceContainerHighest: $surfaceContainerHighest$;
+                --surfaceContainerLow: $surfaceContainerLow$;
+                --surfaceContainerLowest: $surfaceContainerLowest$;
             }
         </style>
     </head>

diff --git a/ui/src/commonMain/kotlin/dev/materii/gloom/ui/util/markdown/MarkdownUtil.kt b/ui/src/commonMain/kotlin/dev/materii/gloom/ui/util/markdown/MarkdownUtil.kt
@@ -14,19 +14,56 @@ object MarkdownUtil {
      * @param isLight Whether or not the theme is designed to be light.
      * @param colorScheme The Material3 color scheme used to theme markdown elements
      */
-    // TODO: Add all m3 colors
     fun injectAppTheme(
         markdownTemplate: String,
         isLight: Boolean,
         colorScheme: ColorScheme
     ): String {
         return markdownTemplate // Insert theme colors
             .replace("\$primary$", "#" + colorScheme.primary.hexCode)
+            .replace("\$onPrimary$", "#" + colorScheme.onPrimary.hexCode)
+            .replace("\$primaryContainer$", "#" + colorScheme.primaryContainer.hexCode)
+            .replace("\$onPrimaryContainer$", "#" + colorScheme.onPrimaryContainer.hexCode)
+            .replace("\$inversePrimary$", "#" + colorScheme.inversePrimary.hexCode)
+
+            .replace("\$secondary$", "#" + colorScheme.secondary.hexCode)
+            .replace("\$onSecondary$", "#" + colorScheme.onSecondary.hexCode)
+            .replace("\$secondaryContainer$", "#" + colorScheme.secondaryContainer.hexCode)
+            .replace("\$onSecondaryContainer$", "#" + colorScheme.onSecondaryContainer.hexCode)
+
+            .replace("\$tertiary$", "#" + colorScheme.tertiary.hexCode)
+            .replace("\$onTertiary$", "#" + colorScheme.onTertiary.hexCode)
+            .replace("\$tertiaryContainer$", "#" + colorScheme.tertiaryContainer.hexCode)
+            .replace("\$onTertiaryContainer$", "#" + colorScheme.onTertiaryContainer.hexCode)
+
+            .replace("\$background$", "#" + colorScheme.background.hexCode)
+            .replace("\$onBackground$", "#" + colorScheme.onBackground.hexCode)
+
+            .replace("\$surface$", "#" + colorScheme.surface.hexCode)
             .replace("\$onSurface$", "#" + colorScheme.onSurface.hexCode)
+            .replace("\$surfaceVariant$", "#" + colorScheme.surfaceVariant.hexCode)
             .replace("\$onSurfaceVariant$", "#" + colorScheme.onSurfaceVariant.hexCode)
-            .replace("\$surfaceContainer$", "#" + colorScheme.surfaceContainer.hexCode)
-            .replace("\$scrim$", "#" + colorScheme.scrim.hexCode)
+            .replace("\$surfaceTint$", "#" + colorScheme.surfaceTint.hexCode)
+            .replace("\$inverseSurface$", "#" + colorScheme.inverseSurface.hexCode)
+            .replace("\$inverseOnSurface$", "#" + colorScheme.inverseOnSurface.hexCode)
+
+            .replace("\$error$", "#" + colorScheme.error.hexCode)
+            .replace("\$onError$", "#" + colorScheme.onError.hexCode)
+            .replace("\$errorContainer$", "#" + colorScheme.errorContainer.hexCode)
+            .replace("\$onErrorContainer$", "#" + colorScheme.onErrorContainer.hexCode)
+
             .replace("\$outline$", "#" + colorScheme.outline.hexCode)
+            .replace("\$outlineVariant$", "#" + colorScheme.outlineVariant.hexCode)
+            .replace("\$scrim$", "#" + colorScheme.scrim.hexCode)
+
+            .replace("\$surfaceBright$", "#" + colorScheme.surfaceBright.hexCode)
+            .replace("\$surfaceDim$", "#" + colorScheme.surfaceDim.hexCode)
+            .replace("\$surfaceContainer$", "#" + colorScheme.surfaceContainer.hexCode)
+            .replace("\$surfaceContainerHigh$", "#" + colorScheme.surfaceContainerHigh.hexCode)
+            .replace("\$surfaceContainerHighest$", "#" + colorScheme.surfaceContainerHighest.hexCode)
+            .replace("\$surfaceContainerLow$", "#" + colorScheme.surfaceContainerLow.hexCode)
+            .replace("\$surfaceContainerLowest$", "#" + colorScheme.surfaceContainerLowest.hexCode)
+
             .replace("\$theme$", if (isLight) "light" else "dark") // Support the old way of theming images
     }