mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-04-26 15:09:53 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(theme): contrast changes for light and dark themes (#361)

Browse source
This commit is contained in:
Lukas Engelter 2024-03-12 22:35:45 +01:00 • committed by GitHub
parent dc9bdcbedd
commit cfbc6e76a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 37 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -128,16 +128,17 @@ This featureswas added to version 2.4.0. See more about this in [#283](https://g
| Environment variable | light theme value | dark theme value |
| --- | --- | --- |
| `THEME_PRIMARY_TEXT` | `#25313b` | `#8A9EBA` |
| `THEME_NEUTRAL_TEXT` | `#777777` | `#36527A` |
| `THEME_PRIMARY_TEXT` | `#25313b` | `#98a8bd` |
| `THEME_NEUTRAL_TEXT` | `#777777` | `#6d7fab` |
| `THEME_BACKGROUND` | `#ffffff` | `#22272e` |
| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#30404D` |
| `THEME_ACCENT_TEXT` | `#6680a1` | `#5684FF` |
| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#343a4b` |
| `THEME_ACCENT_TEXT` | `#5f7796` | `#5c88ff` |
| `THEME_HEADER_TEXT` | `#ffffff` | `#ffffff` |
| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333A45` |
| `THEME_HEADER_ACCENT_TEXT` | `#7b9ac2` | `#7ea1ff` |
| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333a45` |
| `THEME_FOOTER_TEXT` | `#ffffff` | `#ffffff` |
| `THEME_FOOTER_NEUTRAL_TEXT` | `#999999` | `#999999` |
| `THEME_FOOTER_BACKGROUND` | `#555555` | `#555555` |
| `THEME_FOOTER_NEUTRAL_TEXT` | `#adbacd` | `#98afcf` |
| `THEME_FOOTER_BACKGROUND` | `#344251` | `#344251` |
## Recommended Docker Registry Usage

4
src/components/search-bar.riot
View file

@ -2,8 +2,8 @@
<material-input
label="Search in page"
text-color="var(--header-text)"
label-color="var(--neutral-text)"
color="var(--accent-text)"
label-color="var(--header-accent-text)"
color="var(--header-accent-text)"
></material-input>
<script>
import { router } from '@riotjs/route';

3
src/components/tag-history/tag-history.riot
View file

@ -287,5 +287,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
flex-direction: row;
align-items: center;
}
h2 .material-icons {
margin-left: .25em;
}
</style>
</tag-history>

8
src/index.html
View file

@ -58,10 +58,11 @@
theme-background="${THEME_BACKGROUND}"
theme-hover-background="${THEME_HOVER_BACKGROUND}"
theme-accent-text="${THEME_ACCENT_TEXT}"
theme-header-accent-text="${THEME_HEADER_ACCENT_TEXT}"
theme-header-text="${THEME_HEADER_TEXT}"
theme-header-background="${THEME_HEADER_BACKGROUND}"
theme-footer-text="${THEME_FOOTER_TEXT}"
theme-footer-neutra-text="${THEME_FOOTER_NEUTRAL_TEXT}"
theme-footer-neutral-text="${THEME_FOOTER_NEUTRAL_TEXT}"
theme-footer-background="${THEME_FOOTER_BACKGROUND}"
tags-per-page="${TAGLIST_PAGE_SIZE}"
>
@ -70,7 +71,7 @@
<!-- build:keep developement -->
<docker-registry-ui
registry-url=""
name="Developement Registry"
name="Development Registry"
pull-url=""
show-content-digest="true"
is-image-remove-activated="true"
@ -90,10 +91,11 @@
theme-background=""
theme-hover-background=""
theme-accent-text=""
theme-header-accent-text=""
theme-header-text=""
theme-header-background=""
theme-footer-text=""
theme-footer-neutra-text=""
theme-footer-neutral-text=""
theme-footer-background=""
tags-per-page=""
>

36
src/scripts/theme.js
View file

@ -1,26 +1,28 @@
const LIGHT_THEME = {
'primary-text': '#25313b',
'neutral-text': '#777',
'background': '#fff',
'hover-background': '#eee',
'accent-text': '#6680a1',
'header-text': '#fff',
'neutral-text': '#777777',
'background': '#ffffff',
'hover-background': '#eeeeee',
'accent-text': '#5f7796',
'header-text': '#ffffff',
'header-accent-text': '#7b9ac2',
'header-background': '#25313b',
'footer-text': '#fff',
'footer-neutral-text': '#999',
'footer-background': '#555',
'footer-text': '#ffffff',
'footer-neutral-text': '#adbacd',
'footer-background': '#344251',
};
const DARK_THEME = {
'primary-text': '#8A9EBA',
'neutral-text': '#36527A',
'primary-text': '#98a8bd',
'neutral-text': '#6d7fab',
'background': '#22272e',
'hover-background': '#30404D',
'accent-text': '#5684FF',
'header-text': '#fff',
'header-background': '#333A45',
'footer-text': '#fff',
'footer-neutral-text': '#999',
'footer-background': '#555',
'hover-background': '#343a4b',
'accent-text': '#5c88ff',
'header-text': '#ffffff',
'header-accent-text': '#7ea1ff',
'header-background': '#333a45',
'footer-text': '#ffffff',
'footer-neutral-text': '#98afcf',
'footer-background': '#344251',
};
const LOCAL_STORAGE_THEME = 'registryUiTheme';