Skip to content

Commit fc1ebda

Browse files
stevej2608stevej2608
committed
Testing dark mode
1 parent b1ca729 commit fc1ebda

File tree

5 files changed

+154
-3
lines changed

5 files changed

+154
-3
lines changed

‎.vscode/launch.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"justMyCode": false,
2020
"serverReadyAction": {
2121
"pattern": "Uvicorn running on\\s+(https?://\\S+)",
22-
"uriFormat": "%s/not-found",
22+
"uriFormat": "%s/",
2323
"action": "debugWithChrome",
2424
"killOnServerStop": true
2525
}

‎fast_server.py

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
from utils.var_name import var_name
1313

1414
from modules.assets import assets_api
15-
from modules.css_links import TAILWIND_CDN, TAILWIND_CSS_335
15+
from modules.css_links import TAILWIND_CDN, TAILWIND_CSS_335, INDEX_CSS
1616

1717
app = FastAPI(description="ReactPy", version="0.1.0")
1818

@@ -60,6 +60,51 @@
6060
# Use this for development
6161
html.script({'src': 'https://cdn.tailwindcss.com'}),
6262

63+
# https://tailwindcss.com/docs/installation/play-cdn
64+
65+
html.script(
66+
"""
67+
tailwind.config = {
68+
darkMode: 'class',
69+
theme: {
70+
extend: {
71+
fontFamily: {
72+
'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
73+
'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
74+
'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
75+
},
76+
transitionProperty: {
77+
'width': 'width'
78+
},
79+
minWidth: {
80+
'20': '20rem'
81+
},
82+
colors: {
83+
cyan: {
84+
50: '#ECFEFF',
85+
100: '#CFFAFE',
86+
200: '#A5F3FC',
87+
300: '#67E8F9',
88+
400: '#22D3EE',
89+
500: '#06B6D4',
90+
600: '#0891B2',
91+
700: '#0E7490',
92+
800: '#155E75',
93+
900: '#164E63'
94+
},
95+
96+
bg_gray_100: '#f3f4f6',
97+
bg_gray_800: '#1f2937',
98+
bg_gray_900: '#111827',
99+
bg_gray_950: '#030712',
100+
101+
}
102+
},
103+
},
104+
}
105+
"""),
106+
107+
html.link(INDEX_CSS),
63108
html.title(PAGE_HEADER_TITLE),
64109
)
65110
)

‎modules/css_links.py

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,9 @@
5353
'href': 'https://cdn.skypack.dev/twind/shim',
5454
'crossorigin': 'anonymous'
5555
}
56+
57+
INDEX_CSS = {
58+
'rel': 'stylesheet',
59+
'href': '/static/css/index.css',
60+
'crossorigin': 'anonymous'
61+
}

‎pages/components/dark_mode_provider.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22

33
@component
44
def DarkModeProvider(provider, children):
5-
return html.div({'class_name': 'light'}, children)
5+
return html.div({'class_name': 'dark'}, children)

‎static/css/index.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* Fix problem with CSS in src/forms/PasswordInput.tsx shadow was being applied to
6+
7+
<input type="password" ... />
8+
9+
See https://stackoverflow.com/a/72364881
10+
*/
11+
12+
input {
13+
--tw-ring-shadow: 0 0 #000 !important;
14+
}
15+
16+
/* Avoid the need to define dark variants for background, text and boarder
17+
* colours etc in the markup classes. We define all dark variants
18+
* here and invoke them when 'dark' in enabled.
19+
*
20+
* All colors taken from Tailwind standard palette
21+
*
22+
* https://tailwindcss.com/docs/customizing-colors
23+
*
24+
*/
25+
26+
:root {
27+
28+
/* These tailwind colors are used in dark mode */
29+
30+
--cyan-300: #67e8f9;
31+
--cyan-400: #22D3EE;
32+
--cyan-700: #0e7490;
33+
34+
--gray-100: #f3f4f6;
35+
--gray-200: #e5e7eb;
36+
--gray-400: #9ca3af;
37+
--gray-500: #6b7280;
38+
--gray-600: #4b5563;
39+
--gray-700: #374151;
40+
--gray-800: #1f2937;
41+
--gray-900: #111827;
42+
--gray-950: #030712;
43+
44+
--green-500: #22c55e;
45+
--green-600: #16a34a;
46+
47+
--red-200: #fecaca;
48+
--red-300: #fca5a5;
49+
--red-400: #f87171;
50+
--red-700: #b91c1c;
51+
52+
--teal-500: #14b8a6;
53+
54+
}
55+
56+
/* These dark mode variants are the inverse of the light mode */
57+
58+
.dark {
59+
.bg-white { background-color: var(--gray-900)}
60+
61+
.bg-gray-50 { background-color: var(--gray-950)}
62+
.bg-gray-100 { background-color:var(--gray-900)}
63+
.bg-gray-200 { background-color:var(--gray-800)}
64+
.bg-gray-900 { background-color: var(--gray-100)}
65+
.bg-cyan-600 { background-color: var(--cyan-400)}
66+
.bg-cyan-700 { background-color: var(--cyan-300)}
67+
.bg-red-600 { background-color: var(--red-400)}
68+
.bg-red-700 { background-color: var(--red-300)}
69+
.bg-red-800 { background-color: var(--red-200)}
70+
.bg-green-400 { background-color: var(--green-600)}
71+
72+
.hover\:bg-gray-100:hover { background-color:var(--gray-600)}
73+
74+
.border-gray-200 { border-color:var(--gray-800)}
75+
.border-gray-300 { border-color:var(--gray-700)}
76+
.border-cyan-600 { border-color:var(--cyan-400)}
77+
78+
.divide-gray-100>:not([hidden])~:not([hidden]) { border-color: var(--gray-900);}
79+
.divide-gray-200>:not([hidden])~:not([hidden]) { border-color: var(--gray-800);}
80+
81+
.focus\:ring-gray-100:focus { --tw-ring-color: var(--gray-900);}
82+
.focus\:ring-gray-200:focus { --tw-ring-color: var(--gray-800);}
83+
.focus\:ring-cyan-200:focus { --tw-ring-color: var(--cyan-700);}
84+
.focus\:ring-cyan-600:focus { --tw-ring-color: var(--cyan-400);}
85+
.focus\:ring-red-300:focus { --tw-ring-color: var(--red-700);}
86+
87+
.text-white { color: var(--gray-900);}
88+
.text-gray-400 { color: var(--gray-600);}
89+
.text-gray-500 { color: var(--gray-500);}
90+
.text-gray-600 { color: var(--gray-400);}
91+
.text-gray-700 { color: var(--gray-400);}
92+
.text-gray-800 { color: var(--gray-200);}
93+
.text-gray-900 { color: var(--gray-100);}
94+
95+
.text-cyan-600 { color: var(--cyan-400);}
96+
.text-green-500 { color: var(--green-500);}
97+
.text-red-600 { color: var(--red-400);}
98+
.text-teal-600 { color: var(--teal-500);}
99+
100+
}

0 commit comments

Comments
 (0)