// 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: #312e2b;
|
|
--lumo-shade-5pct: rgba(38, 33, 27, 0.05);
|
|
--lumo-shade-10pct: rgba(38, 33, 27, 0.1);
|
|
--lumo-shade-20pct: rgba(38, 33, 27, 0.2);
|
|
--lumo-shade-30pct: rgba(38, 33, 27, 0.3);
|
|
--lumo-shade-40pct: rgba(38, 33, 27, 0.4);
|
|
--lumo-shade-50pct: rgba(38, 33, 27, 0.5);
|
|
--lumo-shade-60pct: rgba(38, 33, 27, 0.6);
|
|
--lumo-shade-70pct: rgba(38, 33, 27, 0.7);
|
|
--lumo-shade-80pct: rgba(38, 33, 27, 0.8);
|
|
--lumo-shade-90pct: rgba(38, 33, 27, 0.9);
|
|
--lumo-shade: 26211b;
|
|
--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-error-text-color: rgb(179, 52, 48);
|
|
--lumo-error-color-50pct: rgba(179, 52, 48, 0.5);
|
|
--lumo-error-color-10pct: rgba(179, 52, 48, 0.1);
|
|
--lumo-error-color: #b33430;
|
|
--lumo-success-text-color: rgb(118, 150, 86);
|
|
--lumo-success-color-50pct: rgba(118, 150, 86, 0.5);
|
|
--lumo-success-color-10pct: rgba(118, 150, 86, 0.1);
|
|
--lumo-success-color: #769656;
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
|
|
|
|
`;
|
|
|
|
document.head.appendChild($_documentContainer.content);
|