Model graph: toolbar on Archify's rules

- Archify's theme toggle: pill track, sliding knob, masked sun/moon icon
- buttons as quiet 0.5rem pills inside 0.5625rem controls, pressed state like Archify's, Export PNG as the filled 0.6875rem primary
- Model | Graph switch styled as the 2D | 3D switch's twin

src/graph/index.ts

@@ -226,11 +226,13 @@ class GraphPage {
     sw.setAttribute('aria-label', 'Graph view on; switch to the model page');
     sw.append(el('span', 'ag-seg', 'Model'), el('span', 'ag-seg on', 'Graph'));
     sw.addEventListener('click', () => this.host.post({ type: 'showModel' }));
-    const exportButton = el('button', 'ag-button', 'Export PNG');
+    const exportButton = el('button', 'ag-button ag-primary', 'Export PNG');
     exportButton.type = 'button';
     exportButton.title = 'Save the graph as it is on screen, as a PNG';
     exportButton.addEventListener('click', () => this.exportPng());
     this.themeButton.type = 'button';
+    this.themeButton.setAttribute('role', 'switch');
+    this.themeButton.append(el('span', 'ag-theme-icon'), el('span', 'ag-sr', 'Dark theme'));
     this.themeButton.addEventListener('click', () => this.setTheme(currentTheme() === 'dark' ? 'light' : 'dark'));
     this.syncThemeButton();
     actions.append(sw, this.themeButton, exportButton);
@@ -451,8 +453,9 @@ class GraphPage {
 
   private syncThemeButton(): void {
     const dark = currentTheme() === 'dark';
-    this.themeButton.textContent = dark ? '\u263e' : '\u2600';
-    this.themeButton.title = dark ? 'Switch to the light theme' : 'Switch to the dark theme';
+    this.themeButton.dataset.on = dark ? 'dark' : 'light';
+    this.themeButton.setAttribute('aria-checked', String(dark));
+    this.themeButton.title = dark ? 'Dark theme on; switch to light' : 'Light theme on; switch to dark';
     this.themeButton.setAttribute('aria-label', this.themeButton.title);
   }