// eagerly import theme styles so as we can override them
|
|
import '@vaadin/vaadin-lumo-styles/all-imports';
|
|
|
|
const $_documentContainer = document.createElement('template');
|
|
|
|
$_documentContainer.innerHTML = `
|
|
<custom-style>
|
|
<style include='lumo-badge'>
|
|
html {
|
|
--lumo-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
|
|
|
}
|
|
|
|
[theme~="dark"] {
|
|
--lumo-base-color: #22201e;
|
|
--lumo-shade-5pct: rgba(27, 25, 23, 0.05);
|
|
--lumo-shade-10pct: rgba(27, 25, 23, 0.1);
|
|
--lumo-shade-20pct: rgba(27, 25, 23, 0.2);
|
|
--lumo-shade-30pct: rgba(27, 25, 23, 0.3);
|
|
--lumo-shade-40pct: rgba(27, 25, 23, 0.4);
|
|
--lumo-shade-50pct: rgba(27, 25, 23, 0.5);
|
|
--lumo-shade-60pct: rgba(27, 25, 23, 0.6);
|
|
--lumo-shade-70pct: rgba(27, 25, 23, 0.7);
|
|
--lumo-shade-80pct: rgba(27, 25, 23, 0.8);
|
|
--lumo-shade-90pct: rgba(27, 25, 23, 0.9);
|
|
--lumo-shade: #1b1917;
|
|
--lumo-tint-5pct: rgba(177, 177, 177, 0.05);
|
|
--lumo-tint-10pct: rgba(177, 177, 177, 0.1);
|
|
--lumo-tint-20pct: rgba(177, 177, 177, 0.2);
|
|
--lumo-tint-30pct: rgba(177, 177, 177, 0.3);
|
|
--lumo-tint-40pct: rgba(177, 177, 177, 0.4);
|
|
--lumo-tint-50pct: rgba(177, 177, 177, 0.5);
|
|
--lumo-tint-60pct: rgba(177, 177, 177, 0.6);
|
|
--lumo-tint-70pct: rgba(177, 177, 177, 0.7);
|
|
--lumo-tint-80pct: rgba(177, 177, 177, 0.8);
|
|
--lumo-tint-90pct: rgba(177, 177, 177, 0.9);
|
|
--lumo-tint: #b1b1b1;
|
|
--lumo-primary-text-color: #7fa650;
|
|
--lumo-primary-color-50pct: rgba(127, 166, 80, 0.5);
|
|
--lumo-primary-color-10pct: rgba(127, 166, 80, 0.1);
|
|
--lumo-primary-color: #7fa650;
|
|
--lumo-success-color-50pct: rgba(108, 157, 65, 0.5);
|
|
--lumo-success-color-10pct: rgba(108, 157, 65, 0.1);
|
|
--lumo-success-color: #6c9d41;
|
|
--lumo-success-text-color: #6c9d41;
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
`;
|
|
|
|
document.head.appendChild($_documentContainer.content);
|