initial commit

2025-09-04 00:40:40 +00:00 · 2020-01-06 23:17:34 +01:00
parent 4f7354c78e
commit c9c90ae5d2
11 changed files with 294 additions and 0 deletions
--- a/test/index.html
+++ b/test/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link href="./index.styl" rel="stylesheet" />
+</head>
+
+<body>
+    <h2>CSS</h2>
+
+    <table>
+        <tr>
+            <th>Light</th>
+            <th>Default</th>
+            <th>Dark</th>
+        </tr>
+        <tr class="up">
+            <td class="light">Up</td>
+            <td>Up</td>
+            <td class="dark">Up</td>
+        </tr>
+        <tr class="down">
+            <td class="light">Down</td>
+            <td>Down</td>
+            <td class="dark">Down</td>
+        </tr>
+    </table>
+
+    <h2>React</h2>
+    <div id="root">
+
+    </div>
+    <script src="./index.tsx"></script>
+</body>
+
+</html>
--- a/test/index.styl
+++ b/test/index.styl
@@ -0,0 +1,38 @@
+$white = #ffffff
+$light = #dddddd
+$dark = #444444
+$black = #000000
+
+table
+    text-align: center
+
+    .up
+        background: $light
+        color: $black
+        
+        @media (prefers-color-scheme: dark)
+            .dark
+                background:  $dark
+                color: $white
+        @media (prefers-color-scheme: light)
+            .light
+                background: $white
+                color:  $black
+    
+    .down
+        background: $dark
+        color: $white
+        
+        @media (prefers-color-scheme: dark)
+            .dark
+                background: $black
+                color: $white
+        @media (prefers-color-scheme: light)
+            .light
+                background: $light
+                color: $black
+
+    td,th
+        padding: 1em 2em
+        border: 1px solid blue
+
--- a/test/index.tsx
+++ b/test/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Mode, useLightSwitch, modeSelector, useModeSelector } from '../'
+
+
+const Simple: React.FC = () => {
+    const mode = useLightSwitch()
+
+    let color = 'green'
+    let name = 'Light'
+    if (mode === Mode.Dark) {
+        color = 'red'
+        name = 'Dark'
+    }
+
+    return <div>
+        <h3>Simple</h3>
+        <div style={{
+            padding: '1em 2em',
+            backgroundColor: color
+        }}>
+            {name}
+        </div>
+    </div>
+}
+
+const WithSelector: React.FC = () => {
+    const selected = useModeSelector({
+        light: { color: 'green', name: 'Light' },
+        dark: { color: 'red', name: 'Dark' },
+        unset: { color: 'blue', name: 'Unset' },
+    })
+
+    return <div>
+        <h3>Selector</h3>
+        <div style={{
+            padding: '1em 2em',
+            backgroundColor: selected.color
+        }}>
+            {selected.name}
+        </div>
+    </div>
+}
+
+const App: React.FC = () => {
+    return <div>
+        <Simple />
+        <WithSelector />
+    </div>
+}
+
+ReactDOM.render(<App />, window.document.getElementById('root'))