Article viewer theming.

androidApp/src/main/java/bou/amine/apps/readerforselfossv2/android/fragments/ArticleFragment.kt

@@ -8,6 +8,7 @@ import android.graphics.Typeface
 import android.graphics.drawable.ColorDrawable
 import android.net.Uri
 import android.os.Bundle
+import android.util.TypedValue
 import android.view.*
 import android.webkit.WebResourceResponse
 import android.webkit.WebSettings
@@ -56,6 +57,7 @@ import java.net.URL
 import java.util.*
 import java.util.concurrent.ExecutionException
 
+
 class ArticleFragment : Fragment(), DIAware {
     private var fontSize: Int = 16
     private lateinit var item: SelfossModel.Item
@@ -333,7 +335,6 @@ class ArticleFragment : Fragment(), DIAware {
     }
 
     private fun htmlToWebview() {
-        val stringColor = String.format("#%06X", 0xFFFFFF and resources.getColor(R.color.colorAccent))
 
         val attrs: IntArray = intArrayOf(android.R.attr.fontFamily)
         val a: TypedArray = requireContext().obtainStyledAttributes(resId, attrs)
@@ -342,12 +343,11 @@ class ArticleFragment : Fragment(), DIAware {
         binding.webcontent.settings.standardFontFamily = a.getString(0)
         binding.webcontent.visibility = View.VISIBLE
 
-        // TODO: Set the color strings programmatically
+        val colorOnSurface = TypedValue()
-        val (stringTextColor, stringBackgroundColor) = if (appSettingsService.isDarkThemeEnabled()) {
+        requireContext().theme.resolveAttribute(R.attr.colorOnSurface, colorOnSurface, true)
-            Pair("#FFFFFF", "#303030")
+
-        } else {
+        val colorSurface = TypedValue()
-            Pair("#212121", "#FAFAFA")
+        requireContext().theme.resolveAttribute(R.attr.colorSurface, colorSurface, true)
-        }
 
         binding.webcontent.settings.useWideViewPort = true
         binding.webcontent.settings.loadWithOverviewMode = true
@@ -436,10 +436,10 @@ class ArticleFragment : Fragment(), DIAware {
                 |        max-width: 100%;
                 |      }
                 |      a {
-                |        color: $stringColor !important;
+                |        color: ${String.format("#%06X", 0xFFFFFF and resources.getColor(R.color.colorAccent))} !important;
                 |      }
                 |      *:not(a) {
-                |        color: $stringTextColor;
+                |        color: ${String.format("#%06X", 0xFFFFFF and colorOnSurface.data)};
                 |      }
                 |      * {
                 |        font-size: ${fontSize}px;
@@ -447,11 +447,11 @@ class ArticleFragment : Fragment(), DIAware {
                 |        word-break: break-word;
                 |        overflow:hidden;
                 |        line-height: 1.5em;
-                |        background-color: $stringBackgroundColor;
+                |        background-color: ${String.format("#%06X", 0xFFFFFF and colorSurface.data)};
                 |      }
                 |      body, html {
-                |        background-color: $stringBackgroundColor !important;
+                |        background-color: ${String.format("#%06X", 0xFFFFFF and colorSurface.data)} !important;
-                |        border-color: $stringBackgroundColor  !important;
+                |        border-color: ${String.format("#%06X", 0xFFFFFF and colorSurface.data)}  !important;
                 |        padding: 0 !important;
                 |        margin: 0 !important;
                 |      }
@@ -461,7 +461,7 @@ class ArticleFragment : Fragment(), DIAware {
                 |      pre, code {
                 |        white-space: pre-wrap;
                 |        width:100%;
-                |        background-color: $stringBackgroundColor;
+                |        background-color: ${String.format("#%06X", 0xFFFFFF and colorSurface.data)};
                 |      }
                 |   </style>
                 |   $fontLinkAndStyle

androidApp/src/main/res/layout/card_item.xml

@@ -16,8 +16,7 @@
     app:layout_constraintTop_toTopOf="parent"
     card_view:cardElevation="2dp"
     card_view:cardUseCompatPadding="true"
-    card_view:layout_constraintBottom_toBottomOf="parent"
+    card_view:layout_constraintBottom_toBottomOf="parent">
-    app:cardBackgroundColor="?cardBackgroundColor">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"

androidApp/src/main/res/layout/fragment_article.xml

@@ -66,7 +66,7 @@
                 android:layout_marginRight="16dp"
                 android:layout_marginTop="24dp"
                 android:paddingBottom="48dp"
-                android:background="?android:colorBackground"
+                android:background="?attr/webviewBackground"
                 app:layout_constraintHorizontal_bias="0.0"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent"

androidApp/src/main/res/values-night/styles.xml

@@ -4,10 +4,10 @@
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
         <item name="colorAccentDark">@color/colorAccentDark</item>
-        <item name="cardBackgroundColor">@color/white</item>
         <item name="preferenceTheme">@style/PreferenceStyle</item>
         <item name="android:statusBarColor">@color/dark</item>
         <item name="bottomBarBackground">@color/dark</item>
         <item name="toolbarPopupTheme">@style/ThemeOverlay.AppCompat.Dark</item>
+        <item name="webviewBackground">@color/dark</item>
     </style>
 </resources>

androidApp/src/main/res/values/attrs.xml

@@ -4,5 +4,6 @@
         <attr name="colorAccentDark" format="reference|color" />
         <attr name="bottomBarBackground" format="reference|color" />
         <attr name="toolbarPopupTheme" format="reference|color" />
+        <attr name="webviewBackground" format="reference|color" />
     </declare-styleable>
 </resources>

androidApp/src/main/res/values/styles.xml

@@ -9,11 +9,11 @@
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
         <item name="colorAccentDark">@color/colorAccentDark</item>
-        <item name="cardBackgroundColor">@color/white</item>
         <item name="preferenceTheme">@style/PreferenceStyle</item>
         <item name="android:statusBarColor">?attr/colorPrimary</item>
         <item name="bottomBarBackground">@color/white</item>
         <item name="toolbarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
+        <item name="webviewBackground">@color/white</item>
     </style>
 
     <!-- Preference Theme -->