| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Community Apps Dependencies | Show |
| Lines of code | 1560 |
| Technical Name |
sc_react_theme_pro_studio |
| License | OPL-1 |
| Website | https://shachain.dev |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Community Apps Dependencies | Show |
| Lines of code | 1560 |
| Technical Name |
sc_react_theme_pro_studio |
| License | OPL-1 |
| Website | https://shachain.dev |
SC React Theme Studio
Visual OKLCH theme configurator for Odoo 19
A React-powered design studio that lives inside Odoo. Drag OKLCH sliders to build a custom color palette, check APCA contrast scores in real time, extract a brand palette from any image, and export to four industry-standard token formats — all without leaving the browser.
What it does
Theme Studio pairs with SC React Theme Pro to give designers and admins a professional color-engineering environment. Build a palette from scratch, pull colors from a brand image, verify every combination meets WCAG APCA standards, then export to the token format used by your design system or frontend stack. Changes apply live to your Odoo instance via Theme Pro.
Features
OKLCH color sliders
Edit every token in the perceptually uniform OKLCH color space. Unlike HSL or HEX, OKLCH keeps perceived lightness constant as you shift hue — your brand color at 40% lightness looks the same brightness regardless of hue. Three independent sliders (Lightness, Chroma, Hue) give precise, intuitive control over 12 configurable color tokens.
APCA contrast dashboard
- Calculates APCA (Advanced Perceptual Contrast Algorithm) Lc scores for every foreground / background token pair.
- Color-coded badges show pass / warn / fail for body text, UI components, and large headings separately.
- Scores update in real time as you drag the sliders — no manual calculation.
- Complements WCAG 2.x requirements with a more accurate perceptual model.
Image-to-palette extraction
- Drop any image (logo, product photo, brand asset) into the studio to extract its dominant colors.
- Click an extracted swatch to instantly assign it to any token slot.
- Works fully in-browser — no image is uploaded to an external service.
12 presets as starting points
Load any of the 12 Theme Pro presets (Zinc, Linear, Vercel, Notion, Stripe, Apple, Forest, Ocean, Sunset, Midnight, High Contrast, Brand) as a starting point, then customize further with the sliders. Jump between presets without losing your edits — each token diff is tracked separately.
4-format token export
Export your finished palette as a ready-to-use token file in any of four industry standard formats:
- DTCG JSON — W3C Design Token Community Group format, compatible with Style Dictionary, Tokens Studio and Figma Variables.
- CSS custom properties — paste directly into any web project stylesheet.
- Mantine theme — a
MantineThemeobject for React projects using Mantine v8. - shadcn/ui — a
globals.cssblock ready for shadcn and Tailwind CSS projects.
Live preview & apply
- The studio center column shows a live preview of your token edits against a representative Odoo UI mock.
- Hit "Apply" to push the current token set to Theme Pro — your entire Odoo backend updates instantly, no page reload.
- Undo at any time by reverting to a saved preset.
Requirements
Requires SC React Theme Pro (the standalone theme engine)
and odoo_react_bridge (the React runtime).
Frontend built with React 19 + Mantine 8 inside Odoo 19.
Color science powered by culori (OKLCH) and
apca-w3 (APCA Lc contrast).
Odoo 19 · depends: sc_react_theme_pro_core, odoo_react_bridge ·
OPL-1 license · business@shachain.dev · WhatsApp: wa.me/message/DGKBE5GWQWAJA1
Odoo Proprietary License v1.0 This software and associated files (the "Software") may only be used (executed, modified, executed after modifications) if you have purchased a valid license from the authors, typically via Odoo Apps, or if you have received a written agreement from the authors of the Software (see the COPYRIGHT file). You may develop Odoo modules that use the Software as a library (typically by depending on it, importing it and using its resources), but without copying any source code or material from the Software. You may distribute those modules under the license of your choice, provided that this license is compatible with the terms of the Odoo Proprietary License (For example: LGPL, MIT, or proprietary licenses similar to this one). It is forbidden to publish, distribute, sublicense, or sell copies of the Software or modified copies of the Software. The above copyright notice and this permission notice must be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Please log in to comment on this module