Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[mobile] adapt skeleton for dark theme

Browse source
This commit is contained in:
Maxim Kadushkin 2021-11-24 15:19:07 +03:00
parent 07af4cd5fd
commit bd89e046e7
5 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/mobile/utils/htmlutils.js Normal file
View file

@ -0,0 +1,10 @@
let obj = !localStorage ? {id: 'theme-light', type: 'light'} : JSON.parse(localStorage.getItem("ui-theme"));
if ( !obj ) {
if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
obj = {id: 'theme-dark', type: 'dark'};
localStorage && localStorage.setItem("ui-theme", JSON.stringify(obj));
}
}
document.body.classList.add(`theme-type-${obj.type}`);

12
apps/documenteditor/mobile/src/index_dev.html
View file

@ -32,17 +32,11 @@
<!-- built styles file will be auto injected -->
</head>
<body>
<% if ( htmlWebpackPlugin.options.skeleton.htmlscript ) { %>
<script>
let obj = !localStorage ? {id: 'theme-light', type: 'light'} : JSON.parse(localStorage.getItem("ui-theme"));
if ( !obj ) {
if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
obj = {id: 'theme-dark', type: 'dark'};
localStorage && localStorage.setItem("ui-theme", JSON.stringify(obj));
}
}
document.body.classList.add(`theme-type-${obj.type}`);
<%= htmlWebpackPlugin.options.skeleton.htmlscript %>
</script>
<% } %>
<section class="skl-container">
<div class="skl-navbar skl-navbar--word"></div>
<div class="skl-lines">

5
apps/presentationeditor/mobile/src/index_dev.html
View file

@ -32,6 +32,11 @@
<!-- built styles file will be auto injected -->
</head>
<body>
<% if ( htmlWebpackPlugin.options.skeleton.htmlscript ) { %>
<script>
<%= htmlWebpackPlugin.options.skeleton.htmlscript %>
</script>
<% } %>
<section class="skl-container">
<div class="skl-navbar skl-navbar--slide"></div>
</section>

5
apps/spreadsheeteditor/mobile/src/index_dev.html
View file

@ -32,6 +32,11 @@
<!-- built styles file will be auto injected -->
</head>
<body>
<% if ( htmlWebpackPlugin.options.skeleton.htmlscript ) { %>
<script>
<%= htmlWebpackPlugin.options.skeleton.htmlscript %>
</script>
<% } %>
<section class="skl-container ">
<div class="skl-navbar skl-navbar--cell"></div>
</section>

1
vendor/framework7-react/build/webpack.config.js vendored
View file

@ -211,6 +211,7 @@ module.exports = {
} : false,
skeleton: {
stylesheet: env === 'development' ? undefined : fs.readFileSync(`../../apps/common/mobile/resources/css/skeleton.css`),
htmlscript: fs.readFileSync(`../../apps/common/mobile/utils/htmlutils.js`),
},
system: {
env: {