Add Dracula/Alucard System Theme#17
Conversation
📝 WalkthroughWalkthroughAdds a new Firefox WebExtension manifest at Addon/system/manifest.json defining a “Dracula/Alucard System Theme” (manifest_version 2). Specifies Gecko strict_min_version 142.0.1 and provides two theme configurations: theme (light) and dark_theme, each with detailed colors and properties for browser UI surfaces. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
Addon/system/manifest.json (1)
3-5: Add description and use semantic versioning.Small metadata polish for AMO listing and future releases.
"manifest_version": 2, - "version": "1.0", + "version": "1.0.0", "name": "Dracula/Alucard System Theme", "short_name": "Dracula/Alucard", + "description": "A system-aware Dracula (light) / Alucard (dark) theme that switches with your OS preference.",Optionally add
browser_specific_settings.gecko.idif you plan self-hosting or side-loading.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
Addon/system/manifest.json(1 hunks)
🔇 Additional comments (7)
Addon/system/manifest.json (7)
13-58: Light theme looks coherent overall.Color token coverage is thorough and consistent with Firefox static theme schema.
60-105: Correct use of dark_theme for system-driven switching.Defining both theme and dark_theme enables automatic switching with system preference. Nicely done.
1-11: Confirm the tested Firefox version.PR text says “tested on Firefox 142.0.1 (Fedora)”. As of 2025-09-06, that version seems ahead of stable cadence; please confirm the exact version/build you tested.
2-2: No action needed: Manifest V2 is still supported for static themes on AMO, and no deprecation timeline has been announced.
7-11: Could you confirm if by “dark_theme” you meant thetheme.properties.color_schemeproperty (e.g."color_scheme": "dark") in static theme manifests rather than a separatedark_themekey? Once that’s clear, I’ll gather the exact Firefox version support and per-token minimums.
1-106: Run web-ext lint in Addon/system
Install or enable web-ext (e.g.npm install -g web-extor usenpx web-ext lint --verbose), then executeweb-ext lint --verbosefrom the Addon/system directory to validatemanifest.jsonagainst the Firefox schema and surface any typos or unsupported keys.
21-21: Your script will compute the contrast ratio for the proposed color.
| "properties": { | ||
| "color_scheme": "light", | ||
| "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)", | ||
| "panel_active": "color-mix(in srgb, currentColor 14%, transparent)", | ||
| "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)", | ||
| "toolbar_field_icon_opacity": "1", | ||
| "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Non-standard theme properties will be ignored without a theme_experiment.
panel_hover, panel_active, panel_active_darker, toolbar_field_icon_opacity, and zap_gradient aren’t part of the public theme schema and will not apply unless you declare a theme_experiment (which AMO typically does not allow for public themes). Recommend removing.
- "properties": {
- "color_scheme": "light",
- "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
- "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
- "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
- "toolbar_field_icon_opacity": "1",
- "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
- }
+ "properties": {
+ "color_scheme": "light"
+ }🌐 Web query:
Are custom theme properties like panel_hover and zap_gradient supported in Firefox static themes without theme_experiment? Is theme_experiment allowed on AMO for third-party themes?
💡 Result:
Short answer: No — only the standard theme keys documented by MDN are supported in regular static themes. Custom UI CSS via theme_experiment (which is how things like extra CSS-driven variables/gradients are exposed in Mozilla’s built‑in themes) is an experimental mechanism and not usable for third‑party themes on AMO. Themes that rely on theme_experiment cannot be signed/submitted for distribution on AMO (theme experiments are used for Mozilla‑vetted/built‑in experiments only).
Sources: MDN theme/theme_experiment docs [1][2], Firefox built‑in theme manifest showing zap_gradient used with theme_experiment [3], community/AMO notes that theme_experiment themes can’t be submitted/signed for AMO distribution [4].
References
- MDN — theme (manifest.json).
- MDN — theme_experiment (manifest.json).
- Firefox built‑in Dark theme manifest (shows zap_gradient & theme_experiment).
- Community/AMO discussion (theme_experiment not allowed for third‑party AMO themes).
Remove non-standard theme properties from manifest.json
Custom keys (panel_hover, panel_active, panel_active_darker, toolbar_field_icon_opacity, zap_gradient) aren’t part of MDN’s static theme schema and require a theme_experiment, which third-party AMO themes cannot use—these entries will be ignored and must be removed.
🤖 Prompt for AI Agents
In Addon/system/manifest.json around lines 50 to 57, remove the non-standard
theme properties (panel_hover, panel_active, panel_active_darker,
toolbar_field_icon_opacity, zap_gradient) because they are not part of MDN’s
static theme schema and require a theme_experiment which third-party AMO themes
cannot use; delete these custom keys from the "properties" block and keep only
standard theme fields (e.g., color_scheme) so the manifest validates against the
static theme schema, or if you must retain those visuals document them elsewhere
and implement via an approved extension experiment rather than in this manifest.
| "properties": { | ||
| "color_scheme": "dark", | ||
| "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)", | ||
| "panel_active": "color-mix(in srgb, currentColor 14%, transparent)", | ||
| "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)", | ||
| "toolbar_field_icon_opacity": "1", | ||
| "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Repeat: remove unsupported dark properties.
Mirror the light-side change; keep only color_scheme: "dark" to avoid ignored fields.
- "properties": {
- "color_scheme": "dark",
- "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
- "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
- "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
- "toolbar_field_icon_opacity": "1",
- "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
- }
+ "properties": {
+ "color_scheme": "dark"
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "properties": { | |
| "color_scheme": "dark", | |
| "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)", | |
| "panel_active": "color-mix(in srgb, currentColor 14%, transparent)", | |
| "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)", | |
| "toolbar_field_icon_opacity": "1", | |
| "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" | |
| } | |
| "properties": { | |
| "color_scheme": "dark" | |
| } |
🤖 Prompt for AI Agents
In Addon/system/manifest.json around lines 97 to 104, the manifest includes
unsupported dark theme properties that will be ignored; remove all entries
inside "properties" except keep "color_scheme": "dark" (i.e., delete
panel_hover, panel_active, panel_active_darker, toolbar_field_icon_opacity,
zap_gradient) so the properties object only contains the single supported
color_scheme key.
1 participant
This PR adds a new Firefox theme: "Dracula/Alucard System Theme."