mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-23 00:46:30 +00:00
Code Issues Projects Releases Wiki Activity

Use Woodpecker theme colors on Safari Tab Bar / Header Bar (#632)

Browse source 
Add theme-color <meta> tag and dynamically change the theme-color when
switching into / out of dark mode.

It use the same colours as in the nav-bar component, but I don't think it's possible to access the Windi CSS colour definitions, so I had to hard core the hex values.

The theme-colour <meta> tag needs to be present in the HTML, otherwise `querySelector` returns null.
This commit is contained in:
ktprograms 2021-12-21 09:26:42 +08:00 committed by GitHub
parent 0aefdc9978
commit d0da1a104e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/index.html
View file

@ -5,6 +5,7 @@
<link rel="alternate icon" type="image/png" href="/favicons/favicon-light-default.png" id="favicon-png" /> <link rel="alternate icon" type="image/png" href="/favicons/favicon-light-default.png" id="favicon-png" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon-light-default.svg" id="favicon-svg" /> <link rel="icon" type="image/svg+xml" href="/favicons/favicon-light-default.svg" id="favicon-svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#65a30d" />
<title>Woodpecker</title> <title>Woodpecker</title>
<script type="" src="/web-config.js"></script> <script type="" src="/web-config.js"></script>
</head> </head>

2
web/src/compositions/useDarkMode.ts
View file

@ -7,9 +7,11 @@ watch(isDarkModeActive, (isActive) => {
if (isActive) { if (isActive) {
document.documentElement.classList.remove('light'); document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2e323e'); // dark-gray-900 (see windi.config.ts)
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light'); document.documentElement.classList.add('light');
document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#65a30d'); // lime-600
} }
}); });