Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added dark mode functionality #124

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added dark mode functionality #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55f389a
Added dark mode functionality
amit-077 Oct 18, 2024
92aed4f
Added dark mode
amit-077 Oct 20, 2024
217db0b
Add dark mode support with OS preference detection and optional local…
amit-077 Oct 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
294 changes: 162 additions & 132 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<!-- Origin trial token needed for Web USB -->
<meta http-equiv="origin-trial" content="AsxscPRBb7U1KJIlQrsFrZ3ea0LHwRhNkbqBKsSuLP5y3sqIqnanjKbGk4oe5+/HkownaJhI2wP6m1S70Y8xkQsAAABUeyJvcmlnaW4iOiAiaHR0cHM6Ly9wZXJtaXNzaW9uLnNpdGU6NDQzIiwgImZlYXR1cmUiOiAiV2ViVVNCIiwgImV4cGlyeSI6IDE0NjUzODkxOTd9">
<title>permission.site</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="app-icon.png"/>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>

<noscript>
<div class="jswarning">
This site does not function without JavaScript!
</div>
</noscript>

<div class="before"></div>
<div class="content">

<div id="toggle-wrapper">
<a id="toggle" class="neutral" href="" title="Switch between HTTP and HTTPS.">
<span class="http">HTTP</span>
<div class="switch">
<div class="knob"></div>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.6" />
<!-- Origin trial token needed for Web USB -->
<meta
http-equiv="origin-trial"
content="AsxscPRBb7U1KJIlQrsFrZ3ea0LHwRhNkbqBKsSuLP5y3sqIqnanjKbGk4oe5+/HkownaJhI2wP6m1S70Y8xkQsAAABUeyJvcmlnaW4iOiAiaHR0cHM6Ly9wZXJtaXNzaW9uLnNpdGU6NDQzIiwgImZlYXR1cmUiOiAiV2ViVVNCIiwgImV4cGlyeSI6IDE0NjUzODkxOTd9"
/>
<title>permission.site</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="app-icon.png" />
<link rel="stylesheet" href="style.css" />
<script src="index.js"></script>
</head>
<body>
<noscript>
<div class="jswarning">
This site does not function without JavaScript!
</div>
</noscript>

<div class="darkMode">
<p id="darkModeText">Dark Mode</p>
<label class="switch1">
<input type="checkbox" id="darkmodeInput"/>
<span class="slider1 round"></span>
</label>
</div>
<span class="https">HTTPS</span>
</a>
</div>

<button id="notifications">Notifications</button>
<button id="location">Location</button>
<button id="camera">Camera</button>
<button id="microphone">Microphone</button>
<button id="camera+microphone">Camera + Microphone</button>
<button id="pan-tilt-zoom">Pan-Tilt-Zoom</button>
<button id="pan-tilt-zoom+microphone">Pan-Tilt-Zoom + Microphone</button>
<button id="screenshare">Screen Share</button>
<button id="midi">MIDI</button>
<button id="midi+sysex">MIDI + SysEx</button>
<button id="bluetooth">Bluetooth</button>
<button id="usb">USB</button>
<button id="serial">Serial</button>
<button id="hid">HID</button>
<button id="eme">Encrypted Media (EME)</button>
<button id="idle-detection">Idle Detection</button>
<button id="persistent-storage">Persistent Storage</button>
<button id="protocol-handler">Protocol Handler</button>
<button id="webauthn-attestation">WebAuthn Attestation</button>
<button id="nfc">NFC</button>
<button id="vr">Virtual Reality (VR)</button>
<button id="ar">Augmented Reality (AR)</button>
<button id="orientation">Device Orientation</button>
<button id="motion">Device Motion</button>

<button id="keygen">&lt;keygen&gt;</button>
<div id="keygen-container"></div>

<hr>

<button id="fullscreen">Fullscreen</button>
<button id="pointerlock">Pointer Lock</button>
<button id="keyboardlock">Keyboard Lock</button>

<hr>

<button id="copy">Copy</button>
<button id="download">Auto Download</button>
<button id="popup">Popup</button>
<button id="popup-delayed">Popup (delayed 5 seconds)</button>

<hr>

<p>Async Clipboard API</p>

<button id="read-text">Read text</button>
<button id="write-text">Write text</button>
<br>
<button id="read-text-delayed">Read text (delayed)</button>
<button id="write-text-delayed">Write text (delayed)</button>

<br><br><br>
<p>Notes:</p>
<table>
<tr>
<td>Augmented Reality (AR)</td>
<td>Implemented behind the experimental flag <code>chrome://flags/#enable-experimental-web-platform-features</code>.</td>
</tr>
<tr><td>Encrypted Media (EME)</td>
<td>May succeed without permission depending on the implementation.<br>
Attempts to use known key systems. (See the source for the list of supported key systems.)
<!-- Clear Key is not supported because it is not expected to require permissions. -->
</td>
</tr>
<tr>
<td>Async Clipboard</td>
<td>
These buttons test the new <a href="https://w3c.github.io/clipboard-apis/">Async Clipboard API</a>.
<br>
Note that these tests are different from the "Copy" button on this page, which uses the old
(synchronous) <code>execCommand</code> method to write to the clipboard.
<br>
This feature is implemented behind the experimental flag <code>chrome://flags/#enable-experimental-web-platform-features</code>.
<br>
To enable the Content Settings UX for setting clipboard permission, you'll also need to enable
<code>chrome://flags/#clipboard-content-setting</code>
<br>
Note: Only available for secure connections (https).
</td>
</tr>
<tr>
<td>WebAuthn Attestation</td>
<td>
After pressing the button, you may need to touch your security key before you can see an attestation prompt.
</td>
</tr>
<tr>
<td>Device Orientation/Motion</td>
<td>
May succeed without permission request depending on the implementation.
</td>
</tr>
</table>

</div>
<div class="after"></div>
<div class="before"></div>
<div class="content">
<div id="toggle-wrapper">
<a
id="toggle"
class="neutral"
href=""
title="Switch between HTTP and HTTPS."
>
<span class="http">HTTP</span>
<div class="switch">
<div class="knob"></div>
</div>
<span class="https">HTTPS</span>
</a>
</div>

<button id="notifications">Notifications</button>
<button id="location">Location</button>
<button id="camera">Camera</button>
<button id="microphone">Microphone</button>
<button id="camera+microphone">Camera + Microphone</button>
<button id="pan-tilt-zoom">Pan-Tilt-Zoom</button>
<button id="pan-tilt-zoom+microphone">Pan-Tilt-Zoom + Microphone</button>
<button id="screenshare">Screen Share</button>
<button id="midi">MIDI</button>
<button id="midi+sysex">MIDI + SysEx</button>
<button id="bluetooth">Bluetooth</button>
<button id="usb">USB</button>
<button id="serial">Serial</button>
<button id="hid">HID</button>
<button id="eme">Encrypted Media (EME)</button>
<button id="idle-detection">Idle Detection</button>
<button id="persistent-storage">Persistent Storage</button>
<button id="protocol-handler">Protocol Handler</button>
<button id="webauthn-attestation">WebAuthn Attestation</button>
<button id="nfc">NFC</button>
<button id="vr">Virtual Reality (VR)</button>
<button id="ar">Augmented Reality (AR)</button>
<button id="orientation">Device Orientation</button>
<button id="motion">Device Motion</button>

<button id="keygen">&lt;keygen&gt;</button>
<div id="keygen-container"></div>

<hr />

<button id="fullscreen">Fullscreen</button>
<button id="pointerlock">Pointer Lock</button>
<button id="keyboardlock">Keyboard Lock</button>

<hr />

<button id="copy">Copy</button>
<button id="download">Auto Download</button>
<button id="popup">Popup</button>
<button id="popup-delayed">Popup (delayed 5 seconds)</button>

<hr />

<p class="AsyncClipAPI">Async Clipboard API</p>

<button id="read-text">Read text</button>
<button id="write-text">Write text</button>
<br />
<button id="read-text-delayed">Read text (delayed)</button>
<button id="write-text-delayed">Write text (delayed)</button>

<br /><br /><br />
<p class="notes">Notes:</p>
<table id="tableNotes">
<tr>
<td>Augmented Reality (AR)</td>
<td>
Implemented behind the experimental flag
<code
>chrome://flags/#enable-experimental-web-platform-features</code
>.
</td>
</tr>
<tr>
<td>Encrypted Media (EME)</td>
<td>
May succeed without permission depending on the implementation.<br />
Attempts to use known key systems. (See the source for the list of
supported key systems.)
<!-- Clear Key is not supported because it is not expected to require permissions. -->
</td>
</tr>
<tr>
<td>Async Clipboard</td>
<td>
These buttons test the new
<a href="https://w3c.github.io/clipboard-apis/"
>Async Clipboard API</a
>.
<br />
Note that these tests are different from the "Copy" button on this
page, which uses the old (synchronous)
<code>execCommand</code> method to write to the clipboard.
<br />
This feature is implemented behind the experimental flag
<code
>chrome://flags/#enable-experimental-web-platform-features</code
>.
<br />
To enable the Content Settings UX for setting clipboard permission,
you'll also need to enable
<code>chrome://flags/#clipboard-content-setting</code>
<br />
Note: Only available for secure connections (https).
</td>
</tr>
<tr>
<td>WebAuthn Attestation</td>
<td>
After pressing the button, you may need to touch your security key
before you can see an attestation prompt.
</td>
</tr>
<tr>
<td>Device Orientation/Motion</td>
<td>
May succeed without permission request depending on the
implementation.
</td>
</tr>
</table>
</div>
<div class="after"></div>

<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/chromium/permission.site">On GitHub</a>
</div>
</div>
</div>
<link rel="stylesheet" href="third_party/github.css">

</body>
<link rel="stylesheet" href="third_party/github.css" />
</body>
</html>
Loading