Commit f15580b

committed

favicon: Add dark mode support

Closes #2538 Works as expected on latest Firefox and Chromium.

1 parent fa2aed6 commit f15580bCopy full SHA for f15580b

File tree

+28

-3

lines changed

+28

-3

lines changed

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,24 @@ main() {`
`21`	`21`	`convert -quiet -background transparent -resize 512x512 pwa-icon.png pwa-icon-512.png`
`22`	`22`
`23`	`23`	`# We use -quiet above to avoid https://github.com/ImageMagick/ImageMagick/issues/884`
	`24`	`+`
	`25`	`+ # The following adds dark mode support for the favicon as favicon-dark-support.svg`
	`26`	`+ # There is no similar capability for pwas or .ico so we can only add support to the svg.`
	`27`	`+ favicon_dark_style="<style>`
	`28`	`+@media (prefers-color-scheme: dark) {`
	`29`	`+ * {`
	`30`	`+ fill: white;`
	`31`	`+ }`
	`32`	`+}`
	`33`	`+</style>"`
	`34`	`+ # See https://stackoverflow.com/a/22901380/4283659`
	`35`	`+ # This escapes all newlines so that sed will accept them.`
	`36`	`+ favicon_dark_style="$(printf "%s\n" "$favicon_dark_style" \| sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/\\n/g')"`
	`37`	`+ sed "$(`
	`38`	`+ cat -n << EOF`
	`39`	`+s%<rect id="favicon"%$favicon_dark_style<rect id="favicon"%`
	`40`	`+EOF`
	`41`	`+ )" favicon.svg > favicon-dark-support.svg`
`24`	`42`	`}`
`25`	`43`
`26`	`44`	`main "$@"`

Lines changed: 7 additions & 0 deletions

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"`
`12`	`12`	`/>`
`13`	`13`	`<title>{{ERROR_TITLE}} - code-server</title>`
`14`		`- <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />`
	`14`	`+ <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />`
`15`	`15`	`<link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />`
`16`	`16`	`<link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />`
`17`	`17`	`<link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"`
`12`	`12`	`/>`
`13`	`13`	`<title>code-server login</title>`
`14`		`- <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />`
	`14`	`+ <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />`
`15`	`15`	`<link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />`
`16`	`16`	`<link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />`
`17`	`17`	`<link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`<meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}" />`
`25`	`25`
`26`	`26`	`<!-- Workbench Icon/Manifest/CSS -->`
`27`		`- <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />`
	`27`	`+ <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />`
`28`	`28`	`<link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />`
`29`	`29`	`<link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />`
`30`	`30`	`<!-- PROD_ONLY`

Comments

(0)