[gnome-characters/wip/cdavis/hdy-style-manager] Use HdyStyleManager and opt in to dark style preference

[Christopher Davis <christopherdavis src gnome org>]

commit 57b8703effa7b1e504392fcccc0f61c56bdc21fb
Author: Christopher Davis <christopherdavis gnome org>
Date:   Fri Sep 24 18:28:35 2021 -0700

    Use HdyStyleManager and opt in to dark style preference
    
    We needed to make some changes to how characters are
    render in order for this to work.

 src/characterList.js | 26 ++++++++++++++++++--------
 src/main.js          |  3 +++
 2 files changed, 21 insertions(+), 8 deletions(-)
---
diff --git a/src/characterList.js b/src/characterList.js
index 123ab22..beb2e8b 100644
--- a/src/characterList.js
+++ b/src/characterList.js
@@ -17,7 +17,7 @@
 // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 
 const Params = imports.params;
-const {Gc, Gdk, GLib, Gio,GObject,Gtk, Pango, PangoCairo} = imports.gi;
+const {Gc, Gdk, GLib, Gio,GObject,Gtk, Pango, PangoCairo, Handy} = imports.gi;
 
 const Cairo = imports.cairo;
 
@@ -47,20 +47,24 @@ const CharacterListRow = GObject.registerClass({
         this._characters = filtered.characters;
         this._fontDescription = filtered.fontDescription;
         this._overlayFontDescription = filtered.overlayFontDescription;
+        this._styleManager = Handy.StyleManager.get_default();
     }
 
-    draw(cr, x, y, width, height) {
+    draw(cr, x, y, width, height, styleContext) {
         let layout = PangoCairo.create_layout(cr);
         layout.set_font_description(this._fontDescription);
 
+        this._styleContext = styleContext;
+
         // Draw baseline.
         // FIXME: Pick the baseline color from CSS.
+        let fg_color = this._styleContext.get_color(Gtk.StateFlags.NORMAL);
         cr.setSourceRGBA(114.0 / 255.0, 159.0 / 255.0, 207.0 / 255.0, 1.0);
         cr.setLineWidth(0.5);
         cr.moveTo(x, y + BASELINE_OFFSET * height);
         cr.relLineTo(width, 0);
         cr.stroke();
-        cr.setSourceRGBA(0.0, 0.0, 0.0, 1.0);
+        cr.setSourceRGBA(fg_color.red, fg_color.green, fg_color.blue, fg_color.alpha);
 
         // Draw characters.  Do centering and attach to the baseline.
         let cellSize = getCellSize(this._fontDescription);
@@ -104,9 +108,9 @@ const CharacterListRow = GObject.registerClass({
         } else {
             // If the character cannot be rendered with the current
             // font settings, show a rectangle calculated from the
-            // base glyph ('A').
+            // base glyphs ('AA').
             if (this._baseGlyphRect == null) {
-                layout.set_text('A', -1);
+                layout.set_text('AA', -1);
                 let [baseLogicalRect, baseInkRect] = layout.get_extents();
                 this._baseGlyphLayoutBaseline = layout.get_baseline();
                 this._baseGlyphRect = baseInkRect;
@@ -173,7 +177,13 @@ const CharacterListRow = GObject.registerClass({
                   (cellRect.width - logicalRect.width / Pango.SCALE) / 2,
                   cellRect.y - logicalRect.y / Pango.SCALE +
                   (cellRect.height - logicalRect.height / Pango.SCALE) / 2);
-        cr.setSourceRGBA(0.0, 0.0, 0.0, 1.0);
+        let text_color;
+        if (!this._styleManager.dark) {
+            text_color = this._styleContext.get_color(Gtk.StateFlags.NORMAL);
+        } else {
+            text_color = this._styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+        }
+        cr.setSourceRGBA(text_color.red, text_color.green, text_color.blue, text_color.alpha);
         PangoCairo.show_layout(cr, layout);
 
         cr.restore();
@@ -219,7 +229,7 @@ const CharacterListWidget = GObject.registerClass({
         cr.paint();
         cr.setSourceRGBA(0.0, 0.0, 0.0, 1.0);
         let row = this._createCharacterListRow([this._character]);
-        row.draw(cr, 0, 0, cellSize, cellSize);
+        row.draw(cr, 0, 0, cellSize, cellSize, this.get_style_context());
         Gtk.drag_set_icon_surface(context, this._dragSurface, 0, 0);
     }
 
@@ -346,7 +356,7 @@ const CharacterListWidget = GObject.registerClass({
         let end = Math.min(this._rows.length, Math.ceil(y2 / cellSize));
         for (let index = start; index < end; index++) {
             this._rows[index].draw(cr, 0, index * cellSize,
-                                   allocation.width, cellSize);
+                                   allocation.width, cellSize, context);
         }
     }
 });
diff --git a/src/main.js b/src/main.js
index 66a0d96..117b53d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -76,6 +76,9 @@ var MyApplication = GObject.registerClass({
 
         Util.loadStyleSheet('/org/gnome/Characters/application.css');
 
+        let styleManager = Handy.StyleManager.get_default();
+        styleManager.set_color_scheme(Handy.ColorScheme.PREFER_LIGHT);
+
         Util.initActions(this,
                          [{ name: 'quit',
                             activate: this._onQuit },