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

[DE mobile] support dark theme in start skeleton

Browse source
This commit is contained in:
Maxim Kadushkin 2021-11-24 00:40:26 +03:00
parent bb24234ac3
commit 07af4cd5fd
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/mobile/resources/css/skeleton.css vendored
View file

@ -2,6 +2,13 @@ body {
margin: 0; margin: 0;
} }
body.theme-type-dark {
--background-navbar-ios: #232323;
--background-navbar-word: #232323;
--background-navbar-cell: #232323;
--background-navbar-slide: #232323;
}
.skl-navbar { .skl-navbar {
--box-logo-height: 26px; --box-logo-height: 26px;
--skl-navbar-height: 44px; --skl-navbar-height: 44px;
@ -27,19 +34,19 @@ body {
} }
.skl-navbar.skl-navbar--ios { .skl-navbar.skl-navbar--ios {
background-color: #f7f7f8; background-color: var(--background-navbar-ios, #f7f7f8);
} }
.skl-navbar.skl-navbar--word.skl-navbar--md { .skl-navbar.skl-navbar--word.skl-navbar--md {
background-color: #446995; background-color: var(--background-navbar-word, #446995);
} }
.skl-navbar.skl-navbar--cell.skl-navbar--md { .skl-navbar.skl-navbar--cell.skl-navbar--md {
background-color: #40865c; background-color: var(--background-navbar-cell, #40865c);
} }
.skl-navbar.skl-navbar--slide.skl-navbar--md { .skl-navbar.skl-navbar--slide.skl-navbar--md {
background-color: #aa5252; background-color: var(--background-navbar-slide, #aa5252);
} }
.skl-navbar::before { .skl-navbar::before {

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

@ -32,6 +32,17 @@
<!-- built styles file will be auto injected --> <!-- built styles file will be auto injected -->
</head> </head>
<body> <body>
<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}`);
</script>
<section class="skl-container"> <section class="skl-container">
<div class="skl-navbar skl-navbar--word"></div> <div class="skl-navbar skl-navbar--word"></div>
<div class="skl-lines"> <div class="skl-lines">