v3.1.0 - Theme system, about page, and accessibility improvements

CSS variable architecture with 3 themes (dark, light, midnight) across
all 11 UI pages. Theme cycle button in popup, selector cards in settings.
Sync loader prevents flash of wrong theme on page load. About page with
project info and privacy statement. Improved button text contrast for
WCAG compliance.

Author: HxHippy

README.md

@@ -1,10 +1,12 @@
 # De-Slop
 
-![De-Slop Logo](De-Slop.png)
+<p align="center">
+  <img src="De-Slop.png" alt="De-Slop Logo" width="200">
+</p>
 
-![De-Slop Banner](assets/Deslop.jpeg)
+A Chrome extension that detects and removes AI-generated "slop" from web pages. 600+ patterns across 11 languages, 8 analysis tools, zero API calls. Runs entirely in your browser.
 
-A Chrome extension that automatically detects and removes AI-generated "slop" content from web pages. Runs entirely locally with no external API calls or data collection.
+---
 
 ## Features
 
@@ -16,7 +18,7 @@ A Chrome extension that automatically detects and removes AI-generated "slop" co
 - **Configurable sensitivity** (1-5 slider)
 - **Detection Only Mode** - highlight slop instead of removing it, with hover tooltips
 - **Custom pattern editor** - add your own slop patterns with custom weights
-- **Detection-only mode** - highlight slop without removing it
+- **Three themes** - Dark, Light, and Midnight (OLED true black), synced across all pages
 
 ### Analysis Tools
 - **Slop Checker** - paste text and see what gets flagged with real-time highlighting and suggestions
@@ -43,8 +45,6 @@ When on LinkedIn.com, additional features activate:
 - **Improvement suggestions** - better alternatives for sloppy phrases
 - **Export/import** custom pattern sets
 
-![Main Sidebar Interface](assets/Sidebar.png)
-
 ## Installation
 
 ### From Chrome Web Store
@@ -105,21 +105,23 @@ The widest net:
 3. Adjust sensitivity slider
 4. View blocked slop count
 
+<img src="assets/Sidebar.png" alt="Main Sidebar Interface" width="380">
+
 ### Interactive Checker
 1. Click `[ IS MY POST SLOP? ]`
 2. Paste your text
 3. See highlighted matches with explanations
 4. Toggle markdown rendering if needed
 
-![Slop Detector Tool](assets/Slop-Detector.png)
+<img src="assets/Slop-Detector.png" alt="Slop Detector Tool" width="600">
 
 ### Slop Machine
 1. Click `[ SLOP MACHINE ]`
 2. Spin for random slop/better alternatives
 3. Or browse the full searchable index
 4. Filter by category (AI, Corporate, Marketing, Stop Words)
 
-![Slop Machine Interface](assets/Slop-Machine.png)
+<img src="assets/Slop-Machine.png" alt="Slop Machine Interface" width="600">
 
 ### Pattern Customization
 1. Click `[ CUSTOMIZE PATTERNS ]`
@@ -128,7 +130,7 @@ The widest net:
 4. Export/import pattern sets
 5. Changes save automatically
 
-![Pattern Customization](assets/Patterns.png)
+<img src="assets/Patterns.png" alt="Pattern Customization" width="600">
 
 ### LinkedIn Fixer
 When on LinkedIn, additional toggles appear:
@@ -157,6 +159,8 @@ When on LinkedIn, additional toggles appear:
 DeSlop/
 ├── src/
 │   ├── manifest.json        # Extension configuration (Manifest V3)
+│   ├── theme.css            # CSS variable definitions (dark/light/midnight)
+│   ├── theme-loader.js      # Sync theme loader (prevents flash)
 │   ├── background.js        # Service worker
 │   ├── content.js           # Main detection engine
 │   ├── content.css          # Styles for hiding/highlighting slop
@@ -178,6 +182,7 @@ DeSlop/
 │   ├── slop-machine.*       # Gamified learning tool
 │   ├── test.*               # Multi-language pattern tester
 │   ├── settings.*           # Pattern customization UI
+│   ├── about.*              # Project info and attribution
 │   ├── linkedin-fixer.js    # LinkedIn-specific enhancements
 │   ├── rules.json           # Ad blocking rules
 │   └── icons/               # Extension icons
@@ -189,12 +194,11 @@ DeSlop/
 
 ## Privacy
 
-De-Slop:
-- ✓ Runs entirely locally - no data sent to servers
-- ✓ Stores settings in Chrome sync storage
-- ✓ No analytics or tracking
-- ✓ No external API calls
-- ✓ Open source - inspect the code
+- Runs entirely locally - no data sent to servers
+- Stores settings in Chrome sync storage
+- No analytics or tracking
+- No external API calls
+- Open source - inspect the code
 
 ## Permissions
 
@@ -214,6 +218,16 @@ De-Slop:
 
 ## Version History
 
+**v3.1.0** - Theme System & About Page
+- Three-theme system: Dark (default), Light, and Midnight (OLED true black)
+- CSS variable architecture across all 11 UI pages (~35 design tokens)
+- Theme cycle button in popup header, theme selector cards in settings
+- Sync theme loader prevents flash of wrong theme on page load
+- Theme persists across pages and browser restarts via chrome.storage.sync
+- About page with project info, feature summary, and privacy statement
+- Improved button contrast for WCAG accessibility
+- Removed stale release files
+
 **v3.0.0** - Multi-language & Tools Suite
 - 11-language pattern system (en, es, fr, de, it, pt, sv, pl, ja, ko, zh)
 - Full i18n with localized UI
@@ -253,5 +267,4 @@ See LICENSE file for full license text.
 
 ## Credits
 
-Made by Kief Studio (https://kief.studio)
-Developed by HxHippy
+Made by [Kief Studio](https://kief.studio) | Developed by HxHippy

src/about.css

@@ -0,0 +1,240 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Courier New', 'Courier', monospace, 'Noto Sans CJK SC', 'Microsoft YaHei', 'Meiryo', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
+  background: var(--bg-body);
+  color: var(--text-primary);
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  background: var(--bg-surface);
+  border: 2px solid var(--border-default);
+  border-radius: 4px;
+  padding: 40px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 2px solid var(--border-strong);
+}
+
+h1 {
+  font-size: 42px;
+  color: var(--text-heading);
+  margin-bottom: 8px;
+  font-weight: normal;
+  letter-spacing: 6px;
+}
+
+.tagline {
+  font-size: 14px;
+  color: var(--text-tertiary);
+  letter-spacing: 2px;
+  margin-bottom: 4px;
+}
+
+.subtitle {
+  font-size: 12px;
+  color: var(--text-disabled);
+  letter-spacing: 1px;
+  margin-top: 8px;
+}
+
+/* Sections */
+.about-section {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--border-muted);
+}
+
+.about-section:last-of-type {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.about-section h2 {
+  font-size: 14px;
+  color: var(--accent-primary);
+  letter-spacing: 2px;
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+
+.about-section p {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.8;
+  margin-bottom: 12px;
+}
+
+.about-section p:last-child {
+  margin-bottom: 0;
+}
+
+/* Stat Grid */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.stat-box {
+  background: var(--bg-container);
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  padding: 20px 16px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: bold;
+  color: var(--accent-primary);
+  font-family: 'Courier New', monospace;
+}
+
+.stat-desc {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  letter-spacing: 1px;
+}
+
+/* Feature Grid */
+.feature-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.feature-item {
+  background: var(--bg-container);
+  border: 1px solid var(--border-muted);
+  border-radius: 4px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.feature-name {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.feature-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+/* Privacy List */
+.privacy-list {
+  list-style: none;
+  padding: 0;
+}
+
+.privacy-list li {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  line-height: 1.6;
+}
+
+.privacy-list li:last-child {
+  border-bottom: none;
+}
+
+.privacy-ok {
+  color: var(--accent-success);
+  font-weight: bold;
+  margin-right: 8px;
+  font-size: 12px;
+}
+
+/* Credit */
+.about-credit p {
+  font-size: 14px;
+}
+
+.about-credit a {
+  color: var(--accent-primary);
+  text-decoration: none;
+  letter-spacing: 1px;
+}
+
+.about-credit a:hover {
+  text-decoration: underline;
+}
+
+/* Buttons */
+.btn {
+  padding: 12px 24px;
+  border: 1px solid var(--border-strong);
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 1px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-link {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border-default);
+  padding: 8px 16px;
+  font-size: 11px;
+}
+
+.btn-link:hover {
+  color: var(--text-secondary);
+  border-color: var(--border-strong);
+}
+
+/* Footer */
+footer {
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-default);
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.version {
+  font-size: 10px;
+  color: var(--text-disabled);
+  letter-spacing: 1px;
+}
+
+@media (max-width: 700px) {
+  .stat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .container {
+    padding: 24px;
+  }
+}