Add white/black Folio icon variants and theme-aware in-app icon
- Recolor the in-app glyph (Design B) to a solid white master and generate a black variant; the desktop/app icon set (build/icons) is now the white master at all sizes (verified bundled white in the AppImage/deb) - In-app icon switches with the existing data-theme: black in Light mode (visible on the light panel) and white in Dark mode (visible on the near-black panel); the desktop/application icon stays white
This commit is contained in:
parent
beaf8715d8
commit
3052e335a3
13 changed files with 23 additions and 7 deletions
|
|
@ -323,11 +323,21 @@ html, body {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* The brand logo is a dark glyph; on the near-black dark theme it would be
|
||||
invisible. Render it white there (light theme keeps the dark logo). */
|
||||
:root[data-theme="dark-mode"] .brand-icon,
|
||||
:root[data-theme="dark-mode"] .welcome-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
/* The brand icon ships as two color variants of the same glyph: a black one
|
||||
for Light mode (visible on the light panel) and a white one for Dark mode
|
||||
(visible on the near-black panel). Toggle them with the existing data-theme
|
||||
attribute so the switch is automatic and the shape never changes. */
|
||||
.brand-icon-dark,
|
||||
.welcome-brand-dark {
|
||||
display: none;
|
||||
}
|
||||
:root[data-theme="dark-mode"] .brand-icon-light,
|
||||
:root[data-theme="dark-mode"] .welcome-brand-light {
|
||||
display: none;
|
||||
}
|
||||
:root[data-theme="dark-mode"] .brand-icon-dark,
|
||||
:root[data-theme="dark-mode"] .welcome-brand-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---- welcome ---- */
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-brand">
|
||||
<img class="brand-icon" src="./brand-icon.png" alt="Folio" draggable="false" />
|
||||
<img class="brand-icon brand-icon-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
|
||||
<img class="brand-icon brand-icon-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
|
||||
<span class="sidebar-title">Chapters</span>
|
||||
</div>
|
||||
<button class="icon-button" id="addChapterBtn" title="Add chapter">+</button>
|
||||
|
|
@ -40,7 +41,8 @@
|
|||
</aside>
|
||||
<main class="editor" id="editor">
|
||||
<div class="welcome" id="welcome">
|
||||
<img class="welcome-brand" src="./brand-icon.png" alt="Folio" draggable="false" />
|
||||
<img class="welcome-brand welcome-brand-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
|
||||
<img class="welcome-brand welcome-brand-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
|
||||
<h1 class="app-name">Folio</h1>
|
||||
<p class="app-tagline">Your stories, in folders you choose.</p>
|
||||
<div class="welcome-actions">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue