Skip to content

Conversation

@arnostpleskot
Copy link
Contributor

@arnostpleskot arnostpleskot commented Apr 4, 2024

This PR adds the system option to the theme selector:

  • Main menu item ToggleTheme accepts new props:
  props:
    | {
        allowSystemTheme: true;
        theme: "light" | "dark" | "system";
        onSelect: (theme: "light" | "dark" | "system") => void;
      }
    | {
        allowSystemTheme?: false;
        onSelect?: (theme: "light" | "dark") => void;
      },

This should ensure that it works as it did until now, but it also allows the onSelect handler to be specified, which will reflect the change to the host app. Also, it adds an allowSystemTheme prop, which will change the button to a button set (similar to one used for selecting scale in the export dialog. In this case, passing the current host app theme prop is also necessary as the editor itself is unaware of the system theme.

  • The Excalidraw app now has a new reducer and useEffect to handle theme changes and a listener for changing the system theme.

  • The Excalidraw app is now grabbing keyboard shortcut for theme change and sends the change down to the editor.

  • Script in the HTML of the Excalidraw app now also reflects the system theme when selected and stored in localStorage

@vercel
Copy link

vercel bot commented Apr 4, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
excalidraw ✅ Ready (Inspect) Visit Preview Apr 8, 2024 2:43pm
excalidraw-package-example ✅ Ready (Inspect) Visit Preview Apr 8, 2024 2:43pm
excalidraw-package-example-with-nextjs ✅ Ready (Inspect) Visit Preview Apr 8, 2024 2:43pm
1 Ignored Deployment
Name Status Preview Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview Apr 8, 2024 2:43pm

@github-actions
Copy link

github-actions bot commented Apr 5, 2024

Coverage Report

Status Category Percentage Covered / Total
🔴 Lines 64.38% (🎯 70%) 48361 / 75116
🔴 Statements 64.38% (🎯 70%) 48361 / 75116
🔴 Functions 65.03% (🎯 68%) 1458 / 2242
🟢 Branches 80.15% (🎯 70%) 5818 / 7258
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
excalidraw-app/App.tsx 53.11% 61.11% 20% 53.11% 135-144, 189-224, 226-248, 251-282, 285-290, 293-294, 324, 355-356, 358-372, 376-379, 383-394, 397-409, 423-445, 453-511, 515-516, 519-528, 551-561, 585-608, 618-655, 658-668, 681-694, 703-709, 726-732, 755-775, 796, 822-828, 837-890, 894-896, 899-903, 912-923, 927-929, 947-951, 967-973, 992-993, 1010-1015, 1024-1029, 1049-1054, 1057-1062, 1072-1080, 1085-1088
excalidraw-app/useHandleAppTheme.ts 74.28% 71.42% 50% 74.28% 27-28, 31-32, 35-45, 61-63
excalidraw-app/components/AppMainMenu.tsx 100% 100% 0% 100%
packages/excalidraw/actions/actionCanvas.tsx 69.73% 65.95% 61.11% 69.73% 41-45, 47-51, 102, 141-142, 181-182, 197-212, 221-222, 230, 274-304, 367-376, 381-383, 392-401, 405-407, 417-424, 427-429, 435-438, 464-490, 502-529
packages/excalidraw/components/App.tsx 69.06% 75.74% 67.87% 69.06% 473-474, 580-589, 684-685, 703-704, 724-784, 787-793, 796-799, 802-878, 881-900, 903-908, 916-926, 928-929, 934-935, 939-941, 955, 962-1221, 1281-1282, 1293-1294, 1322-1324, 1334-1379, 1405, 1415, 1422-1425, 1434-1438, 1469-1470, 1554-1564, 1569-1584, 1588-1635, 1706-1711, 1740-1745, 1748-1778, 1786-1811, 1814-1823, 1826-1938, 1941-1949, 1958-1971, 1974-2000, 2003-2074, 2077-2117, 2163-2164, 2178-2179, 2216-2217, 2221-2222, 2238-2245, 2250-2263, 2269-2270, 2275-2283, 2285-2293, 2305, 2345-2346, 2368-2369, 2376, 2437-2439, 2442-2447, 2452-2453, 2490-2498, 2503-2512, 2550-2551, 2634-2635, 2639, 2642-2643, 2651-2654, 2663-2676, 2682-2685, 2688, 2690-2691, 2698-2699, 2705-2706, 2709-2710, 2718-2719, 2722-2723, 2726-2729, 2740-2748, 2753-2754, 2803-2804, 2818-2824, 2830-2838, 2842-2850, 2854-2855, 2858-2891, 2894-2906, 2917-2918, 2929-2930, 2947-2951, 2955-2958, 2965-2967, 2985-2992, 2995, 2997-3002, 3006-3008, 3029-3030, 3037-3039, 3041-3064, 3090, 3096, 3152-3153, 3170-3172, 3194-3195, 3201-3204, 3210-3291, 3363-3364, 3423, 3433-3451, 3454-3460, 3463-3464, 3470-3483, 3569-3570, 3572-3573, 3578-3580, 3588-3589, 3612-3626, 3631-3650, 3673-3674, 3746, 3755-3756, 3758-3765, 3780-3784, 3795-3796, 3799-3803, 3805-3806, 3808-3811, 3836-3837, 3846-3848, 3850, 3928-3931, 3953-3955, 3965-3966, 3968-3988, 3991-3997, 4014-4017, 4023-4026, 4036-4043, 4047-4048, 4054, 4082-4086, 4090, 4095-4096, 4101-4105, 4133-4134, 4137-4138, 4141-4142, 4150-4154, 4159-4160, 4166-4176, 4181-4208, 4213-4224, 4291, 4317-4318, 4383-4388, 4488, 4514-4516, 4583-4584, 4599-4600, 4770-4771, 4774-4775, 4783, 4831-4835, 4886-4893, 4899-4969, 5013, 5062, 5089, 5096-5097, 5106-5109, 5140, 5188-5191, 5194-5200, 5202-5205, 5220-5229, 5232-5233, 5315-5316, 5319, 5321-5326, 5332-5334, 5336, 5345, 5367-5372, 5374-5377, 5381-5382, 5392-5492, 5496-5497, 5512-5513, 5546-5547, 5574-5575, 5608-5634, 5641-5642, 5664-5665, 5684, 5686-5729, 5734-5735, 5737-5738, 5754-5755, 5761-5762, 5766-5769, 5772-5773, 5788-5815, 5823-5824, 5828-5831, 5833-5837, 5855-5859, 5905-5910, 5912-5914, 5930, 5932-5945, 5970-5973, 6017, 6034-6035, 6037-6060, 6075-6076, 6187-6215, 6284-6288, 6312-6313, 6333-6334, 6428, 6434-6435, 6458-6477, 6492, 6620, 6642-6680, 6684-6734, 6749, 6758, 6792-6798, 6813-6815, 6957-6960, 6984-7015, 7028, 7030-7038, 7052, 7054-7062, 7069-7072, 7080-7085, 7112-7113, 7118-7120, 7123-7124, 7149-7150, 7181-7182, 7265-7266, 7315-7328, 7389-7392, 7418-7419, 7455-7456, 7469, 7487-7493, 7500-7503, 7526-7532, 7604, 7610, 7625-7632, 7635-7642, 7698, 7775-7776, 7797-7799, 7802, 7816-7840, 7943-7967, 7977-8016, 8029-8030, 8039-8046, 8060-8073, 8086-8091, 8145-8171, 8173-8174, 8248-8249, 8256, 8258-8294, 8323, 8384, 8409-8411, 8436-8441, 8443-8444, 8449-8451, 8454-8474, 8488-8489, 8495-8504, 8509, 8513-8517, 8526-8530, 8533-8538, 8542-8549, 8579, 8581-8585, 8587-8597, 8613-8615, 8626-8634, 8638-8682, 8685-8756, 8764, 8782-8789, 8791-8807, 8822-8844, 8863-8865, 8910-8911, 8941-8942, 8961, 9038-9042, 9044-9060, 9062-9066, 9078-9079, 9089-9105, 9123-9142, 9144-9145, 9166-9167, 9171-9172, 9182, 9184-9187, 9189-9190, 9230, 9251-9252, 9278, 9281, 9322, 9336-9344, 9361-9362, 9394-9397, 9486-9493, 9519-9520, 9561-9615, 9663-9664, 9673-9676, 9681-9682, 9703-9705, 9707-9711, 9749
packages/excalidraw/components/DarkModeToggle.tsx 55.76% 100% 0% 55.76% 11-33
packages/excalidraw/components/RadioGroup.tsx 100% 100% 50% 100%
packages/excalidraw/components/icons.tsx 95.32% 86.66% 100% 95.32% 1190-1202, 1321-1331, 1336-1347, 1352-1362, 1367-1377, 1382-1395, 1400-1412, 1417-1429
packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx 94.11% 33.33% 100% 94.11% 41-43
packages/excalidraw/components/main-menu/DefaultItems.tsx 90.76% 93.75% 65% 90.76% 55-72, 95-105, 245-247, 304-305
packages/excalidraw/data/magic.ts 36.19% 100% 0% 36.19% 39-105
packages/excalidraw/hooks/useCreatePortalContainer.ts 93.61% 62.5% 100% 93.61% 28, 32-33
packages/excalidraw/renderer/helpers.ts 94.66% 77.77% 100% 94.66% 53-54, 64-65
packages/excalidraw/renderer/renderElement.ts 83.86% 76.15% 100% 83.86% 84-86, 108-109, 167-168, 172-173, 231-232, 281, 327-328, 341-358, 369-372, 386, 409-410, 412-413, 434, 595, 597-610, 671-673, 701-711, 752-760, 766-767, 771-834, 839-841, 894-896, 918, 921, 948-949
packages/excalidraw/renderer/renderSnaps.ts 18.42% 14.28% 16.66% 18.42% 17-24, 34-58, 61-75, 78-86, 89-107, 110-118, 121-190
packages/excalidraw/scene/export.ts 86.17% 78.43% 77.77% 86.17% 51-76, 96-97, 106, 158-159, 183-187, 319-320, 342-352, 429-433, 454-463
Generated in workflow #2237

# Conflicts:
#	excalidraw-app/App.tsx
Copy link
Member

@dwelle dwelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks @arnostpleskot! 🚀

I've made a few tweaks, notably:

  • for now, defaulting to light theme on init for new users
  • move app theme logic into its own hook to clean up, and also remove the reducer in favor of separate state and effects. IMO it simplifies the state mgmt (YMMV), but also removes side effects from the reducer function. Also makes it more obvious what value the host various handlers are setting and why (there's now less hidden assumptions).

@dwelle dwelle merged commit cd50aa7 into master Apr 8, 2024
@dwelle dwelle deleted the arnost/system-dark-mode branch April 8, 2024 14:46
dwelle added a commit that referenced this pull request Apr 8, 2024
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants