diff --git a/README.md b/README.md index ea8125cb..681deb37 100644 --- a/README.md +++ b/README.md @@ -114,9 +114,28 @@ Some env options are available for use this interface for **only one server**. - `SHOW_CATALOG_NB_TAGS`: Show number of tags per images on catalog page. This will produce + nb images requests, not recommended on large registries. (default: `false`). - `HISTORY_CUSTOM_LABELS`: Expose custom labels in history page, custom labels will be processed like maintainer label. - `USE_CONTROL_CACHE_HEADER`: Use `Control-Cache` header and set to `no-store, no-cache`. This will avoid some issues on multi-arch images (see [#260](https://github.com/Joxit/docker-registry-ui/issues/260)). This option requires registry configuration: `Access-Control-Allow-Headers` with `Cache-Control`. (default: `false`). +- `THEME`: Chose your default theme, could be `dark`, `light` or `auto`. (default: `auto`). Since 2.4.0 +- `THEME_*`: See table in [Theme options](#theme-options) section. Since 2.4.0 There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-standalone/). +### Theme options + +This featureswas added to version 2.4.0. See more about this in [#283](https://github.com/Joxit/docker-registry-ui/pull/283). + +| Environment variable | light theme value | dark theme value | +| --- | --- | --- | +| `THEME_PRIMARY_TEXT` | `#25313b` | `#8A9EBA` | +| `THEME_NEUTRAL_TEXT` | `#777777` | `#36527A` | +| `THEME_BACKGROUND` | `#ffffff` | `#22272e` | +| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#30404D` | +| `THEME_ACCENT_TEXT` | `#6680a1` | `#5684FF` | +| `THEME_HEADER_TEXT` | `#ffffff` | `#ffffff` | +| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333A45` | +| `THEME_FOOTER_TEXT` | `#ffffff` | `#ffffff` | +| `THEME_FOOTER_NEUTRAL_TEXT` | `#999999` | `#999999` | +| `THEME_FOOTER_BACKGROUND` | `#555555` | `#555555` | + ## Using CORS Your server should be configured to accept CORS. diff --git a/bin/90-docker-registry-ui.sh b/bin/90-docker-registry-ui.sh index 0f912062..155aff8c 100755 --- a/bin/90-docker-registry-ui.sh +++ b/bin/90-docker-registry-ui.sh @@ -12,6 +12,10 @@ sed -i "s~\${SHOW_CATALOG_NB_TAGS}~${SHOW_CATALOG_NB_TAGS}~" index.html sed -i "s~\${HISTORY_CUSTOM_LABELS}~${HISTORY_CUSTOM_LABELS}~" index.html sed -i "s~\${USE_CONTROL_CACHE_HEADER}~${USE_CONTROL_CACHE_HEADER}~" index.html +grep -o 'THEME[A-Z_]*' index.html | while read e; do + sed -i "s~\${$e}~$(printenv $e)~" index.html +done + if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then sed -i "s/\${DELETE_IMAGES}/false/" index.html else diff --git a/dist/images/docker-logo.svg b/dist/images/docker-logo.svg index c684065c..63dbf5d4 100644 --- a/dist/images/docker-logo.svg +++ b/dist/images/docker-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 5632c9c6..7c43c2fd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -26,4 +26,15 @@ show-catalog-nb-tags="${SHOW_CATALOG_NB_TAGS}" history-custom-labels="${HISTORY_CUSTOM_LABELS}" use-control-cache-header="${USE_CONTROL_CACHE_HEADER}" + theme="${THEME}" + theme-primary-text="${THEME_PRIMARY_TEXT}" + theme-neutral-text="${THEME_NEUTRAL_TEXT}" + theme-background="${THEME_BACKGROUND}" + theme-hover-background="${THEME_HOVER_BACKGROUND}" + theme-accent-text="${THEME_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-background="${THEME_FOOTER_BACKGROUND}" > \ No newline at end of file diff --git a/package.json b/package.json index 1335f22f..62a9d577 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@rollup/plugin-html": "^1.0.1", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.1", + "@rollup/plugin-terser": "^0.2.1", "core-js": "^3.27.1", "node-sass": "^8.0.0", "prettier": "^2.8.1", @@ -39,7 +40,6 @@ "rollup-plugin-copy": "^3.4.0", "rollup-plugin-riot": "^6.0.0", "rollup-plugin-scss": "^4.0.0", - "rollup-plugin-serve": "^2.0.2", - "@rollup/plugin-terser": "^0.2.1" + "rollup-plugin-serve": "^2.0.2" } } diff --git a/rollup.config.js b/rollup.config.js index 9ce92704..ac1d2a42 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -13,6 +13,7 @@ import copy from 'rollup-plugin-copy'; import copyTransform from './rollup/copy-transform.js'; import license from './rollup/license.js'; import checkOutput from './rollup/check-output.js'; +import importSVG from './rollup/import-svg.js'; const useServe = process.env.ROLLUP_SERVE === 'true'; const output = useServe ? '.serve' : 'dist'; @@ -20,6 +21,7 @@ const output = useServe ? '.serve' : 'dist'; const plugins = [ riot(), json(), + importSVG(), nodeResolve(), commonjs(), scss({ fileName: `docker-registry-ui.css`, outputStyle: 'compressed' }), diff --git a/rollup/import-svg.js b/rollup/import-svg.js new file mode 100644 index 00000000..4ffd9479 --- /dev/null +++ b/rollup/import-svg.js @@ -0,0 +1,28 @@ +import { extname } from 'path'; + +const injectNode = (svg) => ` +export default function() { + return (new DOMParser().parseFromString(${svg}, 'image/svg+xml')); +}; +`; + +/** + * @param options + * @param options.include + * @param options.exclude + * @param options.stringify - if true returns String, otherwise returns DOM Node + */ +export default function () { + return { + name: 'import-svg', + transform: (code, id) => { + if (extname(id) !== '.svg') return null; + const content = JSON.stringify(code); + + return { + code: injectNode(content), + map: { mappings: '' }, + }; + }, + }; +} diff --git a/src/components/dialogs/add-registry-url.riot b/src/components/dialogs/add-registry-url.riot index 5094cdfd..8bd16d9b 100644 --- a/src/components/dialogs/add-registry-url.riot +++ b/src/components/dialogs/add-registry-url.riot @@ -18,14 +18,33 @@
Add your Server ?
- + Write your URL without /v2
- + Add - + Cancel
@@ -56,8 +75,8 @@ setTimeout(() => router.updateUrlQueryParam(url), 100); }, registryUrlValidator(input) { - return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input) - } + return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input); + }, }; diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot index 3c1b770e..7d711db9 100644 --- a/src/components/dialogs/change-registry-url.riot +++ b/src/components/dialogs/change-registry-url.riot @@ -23,10 +23,22 @@
- + Change - + Cancel
@@ -65,11 +77,15 @@ font-size: 1em; line-height: 24px; height: 24px; - border-bottom: 1px solid #2f6975; + border-bottom: 1px solid var(--accent-text); appearance: none; -moz-appearance: none; -webkit-appearance: none; margin: 1.5em 0; + color: var(--primary-text); + } + :host select option { + background-color: var(--background); } diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot index fb5728d4..4aaa57ec 100644 --- a/src/components/dialogs/confirm-delete-image.riot +++ b/src/components/dialogs/confirm-delete-image.riot @@ -23,10 +23,22 @@
- + Delete - + Cancel
diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot index 067f3187..cfcee8a9 100644 --- a/src/components/dialogs/dialogs-menu.riot +++ b/src/components/dialogs/dialogs-menu.riot @@ -41,8 +41,8 @@ waves-center="true" waves-opacity="0.6" waves-duration="600" - color="rgba(0,0,0,0)" - text-color="#fff" + color="var(--header-background)" + text-color="var(--header-text)" icon > more_vert @@ -105,10 +105,19 @@ diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot index 35baadd3..a84b786f 100644 --- a/src/components/docker-registry-ui.riot +++ b/src/components/docker-registry-ui.riot @@ -41,7 +41,7 @@ along with this program. If not, see . filter-results="{ state.filter }" on-authentication="{ onAuthentication }" show-catalog-nb-tags="{ truthy(props.showCatalogNbTags) }" - /> + > .