CMMS embedding: follow the CMMS light/dark theme
window.CMMS_SCAD_CONFIG.dark (set by edit.php from theme_is_dark()) now
drives: the primereact theme (runtime <link> to a bundled
primereact-theme-{light,dark}.css instead of a static light import), the
Monaco editor theme (vs-dark / light), and a body.cmms-dark class that
overrides the light-hardcoded bits in public/index.html. Standalone use
is unchanged (light).
This commit is contained in:
parent
1c7f05f404
commit
0e80cde156
5 changed files with 14174 additions and 1 deletions
|
|
@ -118,6 +118,15 @@
|
|||
}
|
||||
|
||||
.github-fork-ribbon:before { background-color: #333; }
|
||||
|
||||
/* CMMS embedding hook (patch): when loaded dark inside the CMMS, the
|
||||
body gets .cmms-dark (src/index.tsx). Override the light-hardcoded
|
||||
bits above; the primereact theme and Monaco theme are switched
|
||||
separately. */
|
||||
body.cmms-dark { background-color: #1e1e1e; color: #e6e6e6; }
|
||||
body.cmms-dark .p-fieldset-legend { background-color: rgba(0,0,0,0.4) !important; }
|
||||
body.cmms-dark .monaco-editor,
|
||||
body.cmms-dark .openscad-editor { background-color: rgba(30,30,30,0.5) !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
7078
public/primereact-theme-dark.css
Normal file
7078
public/primereact-theme-dark.css
Normal file
File diff suppressed because it is too large
Load diff
7068
public/primereact-theme-light.css
Normal file
7068
public/primereact-theme-light.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -170,6 +170,8 @@ export default function EditorPanel({className, style}: {className?: string, sty
|
|||
defaultLanguage="openscad"
|
||||
path={state.params.activePath}
|
||||
value={model.source}
|
||||
/* CMMS embedding hook (patch): follow the CMMS light/dark theme. */
|
||||
theme={(window as any).CMMS_SCAD_CONFIG?.dark ? 'vs-dark' : 'light'}
|
||||
onChange={s => model.source = s ?? ''}
|
||||
onMount={onMount} // TODO: This looks a bit silly, does it trigger a re-render??
|
||||
options={{
|
||||
|
|
|
|||
|
|
@ -15,11 +15,26 @@ import { isInStandaloneMode, registerCustomAppHeightCSSProperty } from './utils.
|
|||
import { State, StatePersister } from './state/app-state.ts';
|
||||
import { writeStateInFragment } from "./state/fragment-state.ts";
|
||||
|
||||
import "primereact/resources/themes/lara-light-indigo/theme.css";
|
||||
// primereact base + icons + flex are theme-agnostic; the actual light/dark
|
||||
// theme is a runtime <link> (see below) so a CMMS-embedded session can follow
|
||||
// the CMMS user's active light/dark palette. Standalone use gets the light one.
|
||||
import "primereact/resources/primereact.min.css";
|
||||
import "primeicons/primeicons.css";
|
||||
import "primeflex/primeflex.min.css";
|
||||
|
||||
// CMMS embedding hook (patch, not upstream): window.CMMS_SCAD_CONFIG.dark is
|
||||
// set by public/vendor/openscad-playground/edit.php from theme_is_dark().
|
||||
const cmmsScadDark = !!(window as any).CMMS_SCAD_CONFIG?.dark;
|
||||
{
|
||||
const themeLink = document.createElement('link');
|
||||
themeLink.rel = 'stylesheet';
|
||||
themeLink.href = cmmsScadDark ? './primereact-theme-dark.css' : './primereact-theme-light.css';
|
||||
document.head.appendChild(themeLink);
|
||||
if (cmmsScadDark && document.body) {
|
||||
document.body.classList.add('cmms-dark');
|
||||
}
|
||||
}
|
||||
|
||||
const log = debug('app:log');
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
|
|
@ -46,6 +61,7 @@ interface CmmsScadConfig {
|
|||
jobId: string;
|
||||
csrfToken: string;
|
||||
originalName: string;
|
||||
dark?: boolean;
|
||||
}
|
||||
declare global {
|
||||
interface Window { CMMS_SCAD_CONFIG?: CmmsScadConfig; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue