color scheme selector · jollywhoppers.com/witchsky.app@674f260

+33 -3

src/alf/index.tsx

··· 1 import React from 'react' 2 import {type Theme, type ThemeName} from '@bsky.app/alf' 3 4 import { 5 computeFontScaleMultiplier, 6 getFontFamily, ··· 8 setFontFamily as persistFontFamily, 9 setFontScale as persistFontScale, 10 } from '#/alf/fonts' 11 - import {themes} from '#/alf/themes' 12 import {type Device} from '#/storage' 13 14 export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf' ··· 56 }) 57 Context.displayName = 'AlfContext' 58 59 export function ThemeProvider({ 60 children, 61 theme: themeName, 62 }: React.PropsWithChildren<{theme: ThemeName}>) { 63 const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() => 64 getFontScale(), 65 ) ··· 91 92 const value = React.useMemo<Alf>( 93 () => ({ 94 - themes, 95 themeName: themeName, 96 - theme: themes[themeName], 97 fonts: { 98 scale: fontScale, 99 scaleMultiplier: fontScaleMultiplier, ··· 104 flags: {}, 105 }), 106 [ 107 themeName, 108 fontScale, 109 setFontScaleAndPersist,

··· 1 import React from 'react' 2 import {type Theme, type ThemeName} from '@bsky.app/alf' 3 4 + import {useThemePrefs} from '#/state/shell/color-mode' 5 import { 6 computeFontScaleMultiplier, 7 getFontFamily, ··· 9 setFontFamily as persistFontFamily, 10 setFontScale as persistFontScale, 11 } from '#/alf/fonts' 12 + import { 13 + blackskyscheme, 14 + blueskyscheme, 15 + deerscheme, 16 + themes, 17 + witchskyscheme, 18 + zeppelinscheme, 19 + } from '#/alf/themes' 20 import {type Device} from '#/storage' 21 22 export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf' ··· 64 }) 65 Context.displayName = 'AlfContext' 66 67 + export type SchemeType = typeof themes 68 + 69 + export function selectScheme(colorScheme: string | undefined): SchemeType { 70 + switch (colorScheme) { 71 + case 'witchsky': 72 + return witchskyscheme 73 + case 'bluesky': 74 + return blueskyscheme 75 + case 'blacksky': 76 + return blackskyscheme 77 + case 'deer': 78 + return deerscheme 79 + case 'zeppelin': 80 + return zeppelinscheme 81 + default: 82 + return themes 83 + } 84 + } 85 + 86 export function ThemeProvider({ 87 children, 88 theme: themeName, 89 }: React.PropsWithChildren<{theme: ThemeName}>) { 90 + const {colorScheme} = useThemePrefs() 91 + const currentScheme = selectScheme(colorScheme) 92 const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() => 93 getFontScale(), 94 ) ··· 120 121 const value = React.useMemo<Alf>( 122 () => ({ 123 + themes: currentScheme, 124 themeName: themeName, 125 + theme: currentScheme[themeName], 126 fonts: { 127 scale: fontScale, 128 scaleMultiplier: fontScaleMultiplier, ··· 133 flags: {}, 134 }), 135 [ 136 + currentScheme, 137 themeName, 138 fontScale, 139 setFontScaleAndPersist,

+712

src/alf/themes.ts

··· 5 // DEFAULT_SUBDUED_PALETTE, 6 } from '@bsky.app/alf' 7 8 export type Palette = { 9 white: string 10 black: string ··· 275 light: DEFAULT_THEMES.light, 276 dark: DEFAULT_THEMES.dark, 277 dim: DEFAULT_THEMES.dim, 278 } 279 280 /**

··· 5 // DEFAULT_SUBDUED_PALETTE, 6 } from '@bsky.app/alf' 7 8 + import { 9 + BLUE_HUE as BLACKSKY_BLUE_HUE, 10 + // defaultScale as BLACKSKY_defaultScale, 11 + dimScale as BLACKSKY_dimScale, 12 + GREEN_HUE as BLACKSKY_GREEN_HUE, 13 + RED_HUE as BLACKSKY_RED_HUE, 14 + } from '#/alf/util/blackskyColorGeneration' 15 + import { 16 + BLUE_HUE as ZEPPELIN_BLUE_HUE, 17 + defaultScale as ZEPPELIN_defaultScale, 18 + dimScale as ZEPPELIN_dimScale, 19 + GREEN_HUE as ZEPPELIN_GREEN_HUE, 20 + RED_HUE as ZEPPELIN_RED_HUE, 21 + } from '#/alf/util/blackskyColorGeneration' 22 + import { 23 + BLUE_HUE as DEER_BLUE_HUE, 24 + defaultScale as DEER_defaultScale, 25 + // dimScale as DEER_dimScale, 26 + GREEN_HUE as DEER_GREEN_HUE, 27 + RED_HUE as DEER_RED_HUE, 28 + } from '#/alf/util/deerColorGeneration' 29 + 30 export type Palette = { 31 white: string 32 black: string ··· 297 light: DEFAULT_THEMES.light, 298 dark: DEFAULT_THEMES.dark, 299 dim: DEFAULT_THEMES.dim, 300 + } 301 + 302 + export const witchskyscheme = themes 303 + 304 + // const BLUESKY_THEMES = createThemes({ 305 + // defaultPalette: BLUESKY_PALETTE, 306 + // subduedPalette: BLUESKY_SUBDUED_PALETTE, 307 + // }) 308 + 309 + // export const blueskyscheme = { 310 + // lightPalette: BLUESKY_THEMES.light.palette, 311 + // darkPalette: BLUESKY_THEMES.dark.palette, 312 + // dimPalette: BLUESKY_THEMES.dim.palette, 313 + // light: BLUESKY_THEMES.light, 314 + // dark: BLUESKY_THEMES.dark, 315 + // dim: BLUESKY_THEMES.dim, 316 + // } 317 + // export const YELLOW_PALETTE: Palette = { 318 + // white: '#FEFBFB', 319 + // black: '#000000', 320 + // like: '#dd5e8f', 321 + 322 + // contrast_0: '#FEFBFB', 323 + // contrast_25: '#F8F6EB', 324 + // contrast_50: '#F2EDD8', 325 + // contrast_100: '#E9E3C1', 326 + // contrast_200: '#E0D9AA', 327 + // contrast_300: '#D6CF94', 328 + // contrast_400: '#CBC47F', 329 + // contrast_500: '#C0B96B', 330 + // contrast_600: '#A49D59', 331 + // contrast_700: '#888249', 332 + // contrast_800: '#6D683A', 333 + // contrast_900: '#544F2C', 334 + // contrast_950: '#3E391F', 335 + // contrast_975: '#262413', 336 + // contrast_1000: '#000000', 337 + 338 + // primary_25: `hsl(50, 70%, 97%)`, 339 + // primary_50: `hsl(50, 70%, 94%)`, 340 + // primary_100: `hsl(50, 70%, 88%)`, 341 + // primary_200: `hsl(50, 75%, 78%)`, 342 + // primary_300: `hsl(50, 78%, 68%)`, 343 + // primary_400: `hsl(50, 82%, 58%)`, 344 + // primary_500: `hsl(50, 85%, 52%)`, 345 + // primary_600: `hsl(50, 80%, 46%)`, 346 + // primary_700: `hsl(50, 60%, 33%)`, 347 + // primary_800: `hsl(50, 48%, 26%)`, 348 + // primary_900: `hsl(50, 45%, 18%)`, 349 + // primary_950: `hsl(50, 40%, 10%)`, 350 + // primary_975: `hsl(50, 38%, 7%)`, 351 + 352 + // positive_25: '#F3FCEB', 353 + // positive_50: '#E8F9D5', 354 + // positive_100: '#D4F4AE', 355 + // positive_200: '#BEED81', 356 + // positive_300: '#A4E34D', 357 + // positive_400: '#8FD61E', 358 + // positive_500: '#7AB815', 359 + // positive_600: '#629412', 360 + // positive_700: '#4E720F', 361 + // positive_800: '#3C560C', 362 + // positive_900: '#2D4109', 363 + // positive_950: '#203006', 364 + // positive_975: '#162204', 365 + 366 + // negative_25: '#FFF7EB', 367 + // negative_50: '#FEEBD3', 368 + // negative_100: '#FDDBB3', 369 + // negative_200: '#FBC68B', 370 + // negative_300: '#F7A44E', 371 + // negative_400: '#EF8217', 372 + // negative_500: '#D86E0F', 373 + // negative_600: '#B55B0D', 374 + // negative_700: '#8E480A', 375 + // negative_800: '#6C3708', 376 + // negative_900: '#4F2906', 377 + // negative_950: '#371D04', 378 + // negative_975: '#261403', 379 + // } 380 + 381 + // export const YELLOW_SUBDUED_PALETTE: Palette = { 382 + // white: '#FEFBFB', 383 + // black: '#383434', 384 + // like: '#dd5e8f', 385 + 386 + // contrast_0: '#FEFBFB', 387 + // contrast_25: '#F8F6EB', 388 + // contrast_50: '#F2EDD8', 389 + // contrast_100: '#E9E3C1', 390 + // contrast_200: '#E0D9AA', 391 + // contrast_300: '#D6CF94', 392 + // contrast_400: '#CBC47F', 393 + // contrast_500: '#C0B96B', 394 + // contrast_600: '#A49D59', 395 + // contrast_700: '#888249', 396 + // contrast_800: '#6D683A', 397 + // contrast_900: '#544F2C', 398 + // contrast_950: '#3E391F', 399 + // contrast_975: '#312F1A', 400 + // contrast_1000: '#262414', 401 + 402 + // primary_25: `hsl(50, 70%, 97%)`, 403 + // primary_50: `hsl(50, 70%, 94%)`, 404 + // primary_100: `hsl(50, 70%, 88%)`, 405 + // primary_200: `hsl(50, 75%, 78%)`, 406 + // primary_300: `hsl(50, 78%, 68%)`, 407 + // primary_400: `hsl(50, 78%, 62%)`, 408 + // primary_500: `hsl(50, 75%, 52%)`, 409 + // primary_600: `hsl(50, 70%, 46%)`, 410 + // primary_700: `hsl(50, 58%, 40%)`, 411 + // primary_800: `hsl(50, 48%, 26%)`, 412 + // primary_900: `hsl(50, 45%, 18%)`, 413 + // primary_950: `hsl(50, 40%, 10%)`, 414 + // primary_975: `hsl(50, 38%, 7%)`, 415 + 416 + // positive_25: '#F3FCEB', 417 + // positive_50: '#EAF9DA', 418 + // positive_100: '#D6F4B3', 419 + // positive_200: '#C0ED87', 420 + // positive_300: '#A8E45A', 421 + // positive_400: '#94D93B', 422 + // positive_500: '#7FBE2E', 423 + // positive_600: '#659C25', 424 + // positive_700: '#517B1D', 425 + // positive_800: '#405F17', 426 + // positive_900: '#314812', 427 + // positive_950: '#23350C', 428 + // positive_975: '#1A2709', 429 + 430 + // negative_25: '#FFF7EB', 431 + // negative_50: '#FEEFE0', 432 + // negative_100: '#FDE2C6', 433 + // negative_200: '#FBCDA1', 434 + // negative_300: '#F7AD68', 435 + // negative_400: '#EF9140', 436 + // negative_500: '#E0761F', 437 + // negative_600: '#C06319', 438 + // negative_700: '#995012', 439 + // negative_800: '#75400E', 440 + // negative_900: '#58300A', 441 + // negative_950: '#3E2107', 442 + // negative_975: '#2D1805', 443 + // } 444 + 445 + // const YELLOW_THEMES = createThemes({ 446 + // defaultPalette: YELLOW_PALETTE, 447 + // subduedPalette: YELLOW_SUBDUED_PALETTE, 448 + // }) 449 + 450 + // export const yellowscheme = { 451 + // lightPalette: YELLOW_THEMES.light.palette, 452 + // darkPalette: YELLOW_THEMES.dark.palette, 453 + // dimPalette: YELLOW_THEMES.dim.palette, 454 + // light: YELLOW_THEMES.light, 455 + // dark: YELLOW_THEMES.dark, 456 + // dim: YELLOW_THEMES.dim, 457 + // } 458 + export const BLACKSKY_BRAND = { 459 + /* Neutrals */ 460 + black: '#070C0C', 461 + white: '#F8FAF9', 462 + twilight: '#161E27', 463 + gray300: '#C8CAC9', 464 + gray400: '#9C9E9E', 465 + gray600: '#6A6A6A', 466 + 467 + /* Primary / “Indigo‑violet” */ 468 + primaryLight: '#6060E9', 469 + primaryLightTint: '#EAEBFC', 470 + primaryDark: '#8686FF', 471 + primaryDarkTint: '#464985', 472 + 473 + /* Accent / Lime‑green (“success”) */ 474 + secondary: '#D2FC51', 475 + secondaryTint: '#F1FECB', 476 + 477 + /* Negative / Brand red */ 478 + negative: '#F40B42', 479 + } as const 480 + 481 + const scaleLight = (idx: number) => BLACKSKY_dimScale[idx] 482 + 483 + export const BLACKSKY_PALETTE: Palette = { 484 + white: BLACKSKY_BRAND.white, 485 + black: BLACKSKY_BRAND.black, 486 + like: '#EC4899', 487 + 488 + // neutrals 489 + contrast_0: BLACKSKY_BRAND.white, 490 + contrast_25: BLACKSKY_BRAND.white, // Very Light 491 + contrast_50: '#F0F2F2', 492 + contrast_100: '#E6E8E8', 493 + contrast_200: '#D1D3D3', 494 + contrast_300: '#B6B8B8', 495 + contrast_400: '#9C9E9E', 496 + contrast_500: '#818383', 497 + contrast_600: '#6A6A6A', 498 + contrast_700: '#4F5050', 499 + contrast_800: '#353636', 500 + contrast_900: '#1F2020', 501 + contrast_950: '#121313', 502 + contrast_975: '#0B0C0C', 503 + contrast_1000: BLACKSKY_BRAND.black, 504 + 505 + // primary (light scheme) 506 + // Tuned to ensure _975 isn't too saturated so the inverted Dark Mode background is clean. 507 + primary_25: BLACKSKY_BRAND.primaryLightTint, 508 + primary_50: '#DCDDFA', 509 + primary_100: '#C6C8F5', 510 + primary_200: '#B0B3F0', 511 + primary_300: '#989CED', 512 + primary_400: '#8286E7', 513 + primary_500: BLACKSKY_BRAND.primaryLight, 514 + primary_600: '#5252C3', 515 + primary_700: '#4545A8', 516 + primary_800: '#38388D', 517 + primary_900: '#2B2B71', 518 + primary_950: '#151540', // Deepened and desaturated slightly 519 + primary_975: '#0B0B24', // Almost black-blue, ensures Dark Mode BG isn't "muddy blue" 520 + 521 + // success 522 + positive_25: BLACKSKY_BRAND.secondaryTint, 523 + positive_50: '#EAFDD1', 524 + positive_100: '#DAFCAB', 525 + positive_200: '#C8FC80', 526 + positive_300: '#BBFB66', 527 + positive_400: '#AEFA59', 528 + positive_500: BLACKSKY_BRAND.secondary, 529 + positive_600: '#A0EC46', 530 + positive_700: '#82C838', 531 + positive_800: '#66942A', 532 + positive_900: '#4A601C', 533 + positive_950: '#2E3B0E', 534 + positive_975: '#181F07', 535 + 536 + // error 537 + negative_25: '#FFE5EC', 538 + negative_50: '#FFD9E3', 539 + negative_100: '#FFC1D1', 540 + negative_200: '#FF9AB3', 541 + negative_300: '#FF7396', 542 + negative_400: '#FF4B78', 543 + negative_500: BLACKSKY_BRAND.negative, 544 + negative_600: '#C00A32', 545 + negative_700: '#920826', 546 + negative_800: '#630619', 547 + negative_900: '#35030D', 548 + negative_950: '#1B0206', 549 + negative_975: '#0E0103', 550 + } as const 551 + 552 + // The Subdued palette must be defined as a LIGHT palette. 553 + // createThemes will then INVERT this to create the Dim (Dark Blue) theme. 554 + // We map _25 to High Lightness and _975 to Low Lightness. 555 + export const BLACKSKY_SUBDUED_PALETTE: Palette = { 556 + ...BLACKSKY_PALETTE, 557 + 558 + // Override black to a softer twilight for the text in Light mode (optional) 559 + // or primarily for the background color in the inverted Dim mode. 560 + black: '#161E27', 561 + 562 + // Neutral / Contrast Scale (Blue-Tinted Grays) 563 + // We utilize the dimScale in reverse: [14] is lightest, [1] is darkest. 564 + contrast_0: '#FFFFFF', 565 + contrast_25: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(14)}%)`, // Lightest 566 + contrast_50: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(13)}%)`, 567 + contrast_100: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(12)}%)`, 568 + contrast_200: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(11)}%)`, 569 + contrast_300: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(10)}%)`, 570 + contrast_400: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(9)}%)`, 571 + contrast_500: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(8)}%)`, 572 + contrast_600: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(7)}%)`, 573 + contrast_700: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(5)}%)`, 574 + contrast_800: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(4)}%)`, 575 + contrast_900: `hsl(${BLACKSKY_BLUE_HUE}, 24%, ${scaleLight(3)}%)`, 576 + contrast_950: `hsl(${BLACKSKY_BLUE_HUE}, 28%, ${scaleLight(2)}%)`, 577 + contrast_975: `hsl(${BLACKSKY_BLUE_HUE}, 30%, ${scaleLight(1)}%)`, // Darkest 578 + contrast_1000: `hsl(${BLACKSKY_BLUE_HUE}, 30%, 8%)`, // Absolute Darkest 579 + 580 + // Subdued Primary 581 + // Less saturation than the main palette to fit the "Subdued" vibe 582 + primary_25: `hsl(240, 60%, 97%)`, 583 + primary_50: `hsl(240, 60%, 95%)`, 584 + primary_100: `hsl(240, 55%, 90%)`, 585 + primary_200: `hsl(240, 50%, 80%)`, 586 + primary_300: `hsl(240, 45%, 70%)`, 587 + primary_400: `hsl(240, 40%, 60%)`, 588 + primary_500: `hsl(240, 35%, 50%)`, // Midpoint 589 + primary_600: `hsl(240, 40%, 45%)`, 590 + primary_700: `hsl(240, 45%, 35%)`, 591 + primary_800: `hsl(240, 50%, 25%)`, 592 + primary_900: `hsl(240, 50%, 15%)`, 593 + primary_950: `hsl(240, 50%, 10%)`, 594 + primary_975: `hsl(240, 50%, 6%)`, 595 + 596 + // Subdued Success 597 + positive_25: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 96%)`, 598 + positive_50: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 93%)`, 599 + positive_100: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 88%)`, 600 + positive_200: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 80%)`, 601 + positive_300: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 70%)`, 602 + positive_400: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 60%)`, 603 + positive_500: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 50%)`, 604 + positive_600: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 40%)`, 605 + positive_700: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 30%)`, 606 + positive_800: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 20%)`, 607 + positive_900: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 15%)`, 608 + positive_950: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 10%)`, 609 + positive_975: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 5%)`, 610 + 611 + // Subdued Negative 612 + negative_25: `hsl(${BLACKSKY_RED_HUE}, 70%, 97%)`, 613 + negative_50: `hsl(${BLACKSKY_RED_HUE}, 70%, 95%)`, 614 + negative_100: `hsl(${BLACKSKY_RED_HUE}, 65%, 90%)`, 615 + negative_200: `hsl(${BLACKSKY_RED_HUE}, 60%, 80%)`, 616 + negative_300: `hsl(${BLACKSKY_RED_HUE}, 55%, 70%)`, 617 + negative_400: `hsl(${BLACKSKY_RED_HUE}, 55%, 60%)`, 618 + negative_500: `hsl(${BLACKSKY_RED_HUE}, 60%, 50%)`, 619 + negative_600: `hsl(${BLACKSKY_RED_HUE}, 60%, 45%)`, 620 + negative_700: `hsl(${BLACKSKY_RED_HUE}, 65%, 35%)`, 621 + negative_800: `hsl(${BLACKSKY_RED_HUE}, 65%, 25%)`, 622 + negative_900: `hsl(${BLACKSKY_RED_HUE}, 70%, 15%)`, 623 + negative_950: `hsl(${BLACKSKY_RED_HUE}, 70%, 10%)`, 624 + negative_975: `hsl(${BLACKSKY_RED_HUE}, 70%, 5%)`, 625 + } as const 626 + 627 + const BLACKSKY_THEMES = createThemes({ 628 + defaultPalette: BLACKSKY_PALETTE, 629 + subduedPalette: BLACKSKY_SUBDUED_PALETTE, 630 + }) 631 + 632 + export const blackskyscheme = { 633 + lightPalette: BLACKSKY_THEMES.light.palette, 634 + darkPalette: BLACKSKY_THEMES.dark.palette, 635 + dimPalette: BLACKSKY_THEMES.dim.palette, 636 + light: BLACKSKY_THEMES.light, 637 + dark: BLACKSKY_THEMES.dark, 638 + dim: BLACKSKY_THEMES.dim, 639 + } 640 + 641 + export const BLUESKY_PALETTE: Palette = { 642 + white: '#FFFFFF', 643 + black: '#000000', 644 + like: '#EC4899', 645 + 646 + contrast_0: '#FFFFFF', 647 + contrast_25: '#F9FAFB', 648 + contrast_50: '#EFF2F6', 649 + contrast_100: '#DCE2EA', 650 + contrast_200: '#C0CAD8', 651 + contrast_300: '#A5B2C5', 652 + contrast_400: '#8798B0', 653 + contrast_500: '#667B99', 654 + contrast_600: '#526580', 655 + contrast_700: '#405168', 656 + contrast_800: '#313F54', 657 + contrast_900: '#232E3E', 658 + contrast_950: '#19222E', 659 + contrast_975: '#111822', 660 + contrast_1000: '#000000', 661 + 662 + primary_25: '#F5F9FF', 663 + primary_50: '#E5F0FF', 664 + primary_100: '#CCE1FF', 665 + primary_200: '#A8CCFF', 666 + primary_300: '#75AFFF', 667 + primary_400: '#4291FF', 668 + primary_500: '#006AFF', 669 + primary_600: '#0059D6', 670 + primary_700: '#0048AD', 671 + primary_800: '#00398A', 672 + primary_900: '#002861', 673 + primary_950: '#001E47', 674 + primary_975: '#001533', 675 + 676 + positive_25: '#ECFEF5', 677 + positive_50: '#D3FDE8', 678 + positive_100: '#A3FACF', 679 + positive_200: '#6AF6B0', 680 + positive_300: '#2CF28F', 681 + positive_400: '#0DD370', 682 + positive_500: '#09B35E', 683 + positive_600: '#04904A', 684 + positive_700: '#036D38', 685 + positive_800: '#04522B', 686 + positive_900: '#033F21', 687 + positive_950: '#032A17', 688 + positive_975: '#021D0F', 689 + 690 + negative_25: '#FFF5F7', 691 + negative_50: '#FEE7EC', 692 + negative_100: '#FDD3DD', 693 + negative_200: '#FBBBCA', 694 + negative_300: '#F891A9', 695 + negative_400: '#F65A7F', 696 + negative_500: '#E91646', 697 + negative_600: '#CA123D', 698 + negative_700: '#A71134', 699 + negative_800: '#7F0B26', 700 + negative_900: '#5F071C', 701 + negative_950: '#430413', 702 + negative_975: '#30030D', 703 + } 704 + 705 + export const BLUESKY_SUBDUED_PALETTE: Palette = { 706 + white: '#FFFFFF', 707 + black: '#000000', 708 + like: '#EC4899', 709 + 710 + contrast_0: '#FFFFFF', 711 + contrast_25: '#F9FAFB', 712 + contrast_50: '#F2F4F8', 713 + contrast_100: '#E2E7EE', 714 + contrast_200: '#C3CDDA', 715 + contrast_300: '#ABB8C9', 716 + contrast_400: '#8D9DB4', 717 + contrast_500: '#6F839F', 718 + contrast_600: '#586C89', 719 + contrast_700: '#485B75', 720 + contrast_800: '#394960', 721 + contrast_900: '#2C3A4E', 722 + contrast_950: '#222E3F', 723 + contrast_975: '#1C2736', 724 + contrast_1000: '#151D28', 725 + 726 + primary_25: '#F5F9FF', 727 + primary_50: '#EBF3FF', 728 + primary_100: '#D6E7FF', 729 + primary_200: '#ADCFFF', 730 + primary_300: '#80B5FF', 731 + primary_400: '#4D97FF', 732 + primary_500: '#0F73FF', 733 + primary_600: '#0661E0', 734 + primary_700: '#0A52B8', 735 + primary_800: '#0E4490', 736 + primary_900: '#123464', 737 + primary_950: '#122949', 738 + primary_975: '#122136', 739 + 740 + positive_25: '#ECFEF5', 741 + positive_50: '#D8FDEB', 742 + positive_100: '#A8FAD1', 743 + positive_200: '#6FF6B3', 744 + positive_300: '#31F291', 745 + positive_400: '#0EDD75', 746 + positive_500: '#0AC266', 747 + positive_600: '#049F52', 748 + positive_700: '#038142', 749 + positive_800: '#056636', 750 + positive_900: '#04522B', 751 + positive_950: '#053D21', 752 + positive_975: '#052917', 753 + 754 + negative_25: '#FFF5F7', 755 + negative_50: '#FEEBEF', 756 + negative_100: '#FDD8E1', 757 + negative_200: '#FCC0CE', 758 + negative_300: '#F99AB0', 759 + negative_400: '#F76486', 760 + negative_500: '#EB2452', 761 + negative_600: '#D81341', 762 + negative_700: '#BA1239', 763 + negative_800: '#910D2C', 764 + negative_900: '#6F0B22', 765 + negative_950: '#500B1C', 766 + negative_975: '#3E0915', 767 + } 768 + 769 + const BLUESKY_THEMES = createThemes({ 770 + defaultPalette: BLUESKY_PALETTE, 771 + subduedPalette: BLUESKY_SUBDUED_PALETTE, 772 + }) 773 + 774 + export const blueskyscheme = { 775 + lightPalette: BLUESKY_THEMES.light.palette, 776 + darkPalette: BLUESKY_THEMES.dark.palette, 777 + dimPalette: BLUESKY_THEMES.dim.palette, 778 + light: BLUESKY_THEMES.light, 779 + dark: BLUESKY_THEMES.dark, 780 + dim: BLUESKY_THEMES.dim, 781 + } 782 + 783 + export const DEER_PALETTE: Palette = { 784 + white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`, 785 + black: '#000000', 786 + like: '#ec4899', 787 + 788 + contrast_0: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`, 789 + contrast_25: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[13]}%)`, 790 + contrast_50: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[12]}%)`, 791 + contrast_100: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[11]}%)`, 792 + contrast_200: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[10]}%)`, 793 + contrast_300: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[9]}%)`, 794 + contrast_400: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[8]}%)`, 795 + contrast_500: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[7]}%)`, 796 + contrast_600: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[6]}%)`, 797 + contrast_700: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[5]}%)`, 798 + contrast_800: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[4]}%)`, 799 + contrast_900: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[3]}%)`, 800 + contrast_950: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[2]}%)`, 801 + contrast_975: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[1]}%)`, 802 + contrast_1000: '#000000', 803 + 804 + primary_25: `hsl(145, 30%, 97%)`, 805 + primary_50: `hsl(145, 30%, 95%)`, 806 + primary_100: `hsl(145, 30%, 90%)`, 807 + primary_200: `hsl(145, 32%, 80%)`, 808 + primary_300: `hsl(145, 34%, 70%)`, 809 + primary_400: `hsl(145, 35%, 58%)`, 810 + primary_500: `hsl(145, 35%, 45%)`, 811 + primary_600: `hsl(145, 38%, 38%)`, 812 + primary_700: `hsl(145, 40%, 32%)`, 813 + primary_800: `hsl(145, 42%, 25%)`, 814 + primary_900: `hsl(145, 45%, 18%)`, 815 + primary_950: `hsl(145, 48%, 10%)`, 816 + primary_975: `hsl(145, 50%, 7%)`, 817 + 818 + positive_25: `hsl(${DEER_GREEN_HUE}, 82%, 97%)`, 819 + positive_50: `hsl(${DEER_GREEN_HUE}, 82%, 95%)`, 820 + positive_100: `hsl(${DEER_GREEN_HUE}, 82%, 90%)`, 821 + positive_200: `hsl(${DEER_GREEN_HUE}, 82%, 80%)`, 822 + positive_300: `hsl(${DEER_GREEN_HUE}, 82%, 70%)`, 823 + positive_400: `hsl(${DEER_GREEN_HUE}, 82%, 60%)`, 824 + positive_500: `hsl(${DEER_GREEN_HUE}, 82%, 50%)`, 825 + positive_600: `hsl(${DEER_GREEN_HUE}, 82%, 42%)`, 826 + positive_700: `hsl(${DEER_GREEN_HUE}, 82%, 34%)`, 827 + positive_800: `hsl(${DEER_GREEN_HUE}, 82%, 26%)`, 828 + positive_900: `hsl(${DEER_GREEN_HUE}, 82%, 18%)`, 829 + positive_950: `hsl(${DEER_GREEN_HUE}, 82%, 10%)`, 830 + positive_975: `hsl(${DEER_GREEN_HUE}, 82%, 7%)`, 831 + 832 + negative_25: `hsl(${DEER_RED_HUE}, 91%, 97%)`, 833 + negative_50: `hsl(${DEER_RED_HUE}, 91%, 95%)`, 834 + negative_100: `hsl(${DEER_RED_HUE}, 91%, 90%)`, 835 + negative_200: `hsl(${DEER_RED_HUE}, 91%, 80%)`, 836 + negative_300: `hsl(${DEER_RED_HUE}, 91%, 70%)`, 837 + negative_400: `hsl(${DEER_RED_HUE}, 91%, 60%)`, 838 + negative_500: `hsl(${DEER_RED_HUE}, 91%, 50%)`, 839 + negative_600: `hsl(${DEER_RED_HUE}, 91%, 42%)`, 840 + negative_700: `hsl(${DEER_RED_HUE}, 91%, 34%)`, 841 + negative_800: `hsl(${DEER_RED_HUE}, 91%, 26%)`, 842 + negative_900: `hsl(${DEER_RED_HUE}, 91%, 18%)`, 843 + negative_950: `hsl(${DEER_RED_HUE}, 91%, 10%)`, 844 + negative_975: `hsl(${DEER_RED_HUE}, 91%, 7%)`, 845 + } 846 + 847 + export const DEER_SUBDUED_PALETTE: Palette = { 848 + ...DEER_PALETTE, 849 + primary_25: `hsl(140, 15%, 97%)`, 850 + primary_50: `hsl(140, 18%, 95%)`, 851 + primary_100: `hsl(140, 22%, 90%)`, 852 + primary_200: `hsl(140, 25%, 80%)`, 853 + primary_300: `hsl(140, 28%, 70%)`, 854 + primary_400: `hsl(140, 32%, 58%)`, 855 + primary_500: `hsl(140, 35%, 45%)`, 856 + primary_600: `hsl(140, 38%, 38%)`, 857 + primary_700: `hsl(140, 42%, 32%)`, 858 + primary_800: `hsl(140, 45%, 25%)`, 859 + primary_900: `hsl(140, 48%, 18%)`, 860 + primary_950: `hsl(140, 50%, 10%)`, 861 + primary_975: `hsl(140, 55%, 7%)`, 862 + contrast_1000: '#151D28', 863 + } 864 + 865 + const DEER_THEMES = createThemes({ 866 + defaultPalette: DEER_PALETTE, 867 + subduedPalette: DEER_SUBDUED_PALETTE, 868 + }) 869 + 870 + export const deerscheme = { 871 + lightPalette: DEER_THEMES.light.palette, 872 + darkPalette: DEER_THEMES.dark.palette, 873 + dimPalette: DEER_THEMES.dim.palette, 874 + light: DEER_THEMES.light, 875 + dark: DEER_THEMES.dark, 876 + dim: DEER_THEMES.dim, 877 + } 878 + 879 + export const ZEPPELIN_PALETTE: Palette = { 880 + white: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`, 881 + black: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`, 882 + like: '#ec4899', 883 + 884 + contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`, 885 + contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[13]}%)`, 886 + contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[12]}%)`, 887 + contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[11]}%)`, 888 + contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[10]}%)`, 889 + contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[9]}%)`, 890 + contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[8]}%)`, 891 + contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[7]}%)`, 892 + contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[6]}%)`, 893 + contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[5]}%)`, 894 + contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[4]}%)`, 895 + contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[3]}%)`, 896 + contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[2]}%)`, 897 + contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[1]}%)`, 898 + contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`, 899 + 900 + primary_25: `hsl(47, 80%, 89%)`, 901 + primary_50: `hsl(47, 80%, 87%)`, 902 + primary_100: `hsl(47, 80%, 82%)`, 903 + primary_200: `hsl(47, 72%, 72%)`, 904 + primary_300: `hsl(47, 74%, 62%)`, 905 + primary_400: `hsl(47, 75%, 50%)`, 906 + primary_500: `hsl(47, 75%, 37%)`, 907 + primary_600: `hsl(47, 78%, 30%)`, 908 + primary_700: `hsl(47, 80%, 24%)`, 909 + primary_800: `hsl(47, 82%, 17%)`, 910 + primary_900: `hsl(47, 85%, 12%)`, 911 + primary_950: `hsl(47, 88%, 5%)`, 912 + primary_975: `hsl(47, 90%, 2%)`, 913 + 914 + positive_25: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 97%)`, 915 + positive_50: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 95%)`, 916 + positive_100: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 90%)`, 917 + positive_200: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 80%)`, 918 + positive_300: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 70%)`, 919 + positive_400: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 60%)`, 920 + positive_500: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 50%)`, 921 + positive_600: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 42%)`, 922 + positive_700: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 34%)`, 923 + positive_800: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 26%)`, 924 + positive_900: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 18%)`, 925 + positive_950: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 10%)`, 926 + positive_975: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 7%)`, 927 + 928 + negative_25: `hsl(${ZEPPELIN_RED_HUE}, 91%, 97%)`, 929 + negative_50: `hsl(${ZEPPELIN_RED_HUE}, 91%, 95%)`, 930 + negative_100: `hsl(${ZEPPELIN_RED_HUE}, 91%, 90%)`, 931 + negative_200: `hsl(${ZEPPELIN_RED_HUE}, 91%, 80%)`, 932 + negative_300: `hsl(${ZEPPELIN_RED_HUE}, 91%, 70%)`, 933 + negative_400: `hsl(${ZEPPELIN_RED_HUE}, 91%, 60%)`, 934 + negative_500: `hsl(${ZEPPELIN_RED_HUE}, 91%, 50%)`, 935 + negative_600: `hsl(${ZEPPELIN_RED_HUE}, 91%, 42%)`, 936 + negative_700: `hsl(${ZEPPELIN_RED_HUE}, 91%, 34%)`, 937 + negative_800: `hsl(${ZEPPELIN_RED_HUE}, 91%, 26%)`, 938 + negative_900: `hsl(${ZEPPELIN_RED_HUE}, 91%, 18%)`, 939 + negative_950: `hsl(${ZEPPELIN_RED_HUE}, 91%, 10%)`, 940 + negative_975: `hsl(${ZEPPELIN_RED_HUE}, 91%, 7%)`, 941 + } 942 + 943 + export const ZEPPELIN_SUBDUED_PALETTE: Palette = { 944 + ...ZEPPELIN_PALETTE, 945 + black: `hsl(${ZEPPELIN_BLUE_HUE}, 3%, ${ZEPPELIN_dimScale[0]}%)`, 946 + 947 + contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[14]}%)`, 948 + contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[13]}%)`, 949 + contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[12]}%)`, 950 + contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[11]}%)`, 951 + contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[10]}%)`, 952 + contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[9]}%)`, 953 + contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[8]}%)`, 954 + contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[7]}%)`, 955 + contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[6]}%)`, 956 + contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[5]}%)`, 957 + contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[4]}%)`, 958 + contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[3]}%)`, 959 + contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[2]}%)`, 960 + contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[1]}%)`, 961 + contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[0]}%)`, 962 + 963 + primary_25: `hsl(47, 60%, 97%)`, 964 + primary_50: `hsl(47, 63%, 94%)`, 965 + primary_100: `hsl(47, 65%, 88%)`, 966 + primary_200: `hsl(47, 70%, 78%)`, 967 + primary_300: `hsl(47, 73%, 68%)`, 968 + primary_400: `hsl(47, 77%, 58%)`, 969 + primary_500: `hsl(47, 80%, 45%)`, 970 + primary_600: `hsl(47, 83%, 38%)`, 971 + primary_700: `hsl(47, 87%, 30%)`, 972 + primary_800: `hsl(47, 90%, 25%)`, 973 + primary_900: `hsl(47, 93%, 18%)`, 974 + primary_950: `hsl(47, 95%, 10%)`, 975 + primary_975: `hsl(47, 98%, 7%)`, 976 + } 977 + 978 + const ZEPPELIN_THEMES = createThemes({ 979 + defaultPalette: ZEPPELIN_PALETTE, 980 + subduedPalette: ZEPPELIN_SUBDUED_PALETTE, 981 + }) 982 + 983 + export const zeppelinscheme = { 984 + lightPalette: ZEPPELIN_THEMES.light.palette, 985 + darkPalette: ZEPPELIN_THEMES.dark.palette, 986 + dimPalette: ZEPPELIN_THEMES.dim.palette, 987 + light: ZEPPELIN_THEMES.light, 988 + dark: ZEPPELIN_THEMES.dark, 989 + dim: ZEPPELIN_THEMES.dim, 990 } 991 992 /**

+49

src/alf/util/blackskyColorGeneration.ts

···

··· 1 + import {logger} from '#/logger' 2 + 3 + export const BLUE_HUE = 240 4 + export const RED_HUE = 0 5 + export const GREEN_HUE = 80 6 + 7 + /** 8 + * Smooth progression of lightness "stops" for generating HSL colors. 9 + */ 10 + export const COLOR_STOPS = [ 11 + 0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1, 12 + ] 13 + 14 + export function generateScale(start: number, end: number) { 15 + const range = end - start 16 + return COLOR_STOPS.map(stop => { 17 + return start + range * stop 18 + }) 19 + } 20 + 21 + export const defaultScale = generateScale(6, 100) 22 + // dim shifted 6% lighter 23 + export const dimScale = generateScale(12, 100) 24 + 25 + export function transparentifyColor(color: string, alpha: number) { 26 + if (color.startsWith('hsl(')) { 27 + return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})` 28 + } else if (color.startsWith('rgb(')) { 29 + return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})` 30 + } else if (color.startsWith('#')) { 31 + if (color.length === 7) { 32 + const alphaHex = Math.round(alpha * 255).toString(16) 33 + // Per MDN: If there is only one number, it is duplicated: e means ee 34 + // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color 35 + return color.slice(0, 7) + alphaHex.padStart(2, alphaHex) 36 + } else if (color.length === 4) { 37 + // convert to 6-digit hex before adding alpha 38 + const [r, g, b] = color.slice(1).split('') 39 + const alphaHex = Math.round(alpha * 255).toString(16) 40 + return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart( 41 + 2, 42 + alphaHex, 43 + )}` 44 + } 45 + } else { 46 + logger.warn(`Could not make '${color}' transparent`) 47 + } 48 + return color 49 + }

+21

src/alf/util/deerColorGeneration.ts

···

··· 1 + export const BLUE_HUE = 211 2 + export const RED_HUE = 346 3 + export const GREEN_HUE = 152 4 + 5 + /** 6 + * Smooth progression of lightness "stops" for generating HSL colors. 7 + */ 8 + export const COLOR_STOPS = [ 9 + 0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1, 10 + ] 11 + 12 + export function generateScale(start: number, end: number) { 13 + const range = end - start 14 + return COLOR_STOPS.map(stop => { 15 + return start + range * stop 16 + }) 17 + } 18 + 19 + export const defaultScale = generateScale(6, 100) 20 + // dim shifted 6% lighter 21 + export const dimScale = generateScale(12, 100)

+49

src/alf/util/zeppelinColorGeneration.ts

···

··· 1 + import {logger} from '#/logger' 2 + 3 + export const BLUE_HUE = 47 4 + export const RED_HUE = 346 5 + export const GREEN_HUE = 152 6 + 7 + /** 8 + * Smooth progression of lightness "stops" for generating HSL colors. 9 + */ 10 + export const COLOR_STOPS = [ 11 + 0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1, 12 + ] 13 + 14 + export function generateScale(start: number, end: number) { 15 + const range = end - start 16 + return COLOR_STOPS.map(stop => { 17 + return start + range * stop 18 + }) 19 + } 20 + 21 + export const defaultScale = generateScale(6, 100) 22 + // dim shifted 6% lighter 23 + export const dimScale = generateScale(11, 100) 24 + 25 + export function transparentifyColor(color: string, alpha: number) { 26 + if (color.startsWith('hsl(')) { 27 + return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})` 28 + } else if (color.startsWith('rgb(')) { 29 + return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})` 30 + } else if (color.startsWith('#')) { 31 + if (color.length === 7) { 32 + const alphaHex = Math.round(alpha * 255).toString(16) 33 + // Per MDN: If there is only one number, it is duplicated: e means ee 34 + // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color 35 + return color.slice(0, 7) + alphaHex.padStart(2, alphaHex) 36 + } else if (color.length === 4) { 37 + // convert to 6-digit hex before adding alpha 38 + const [r, g, b] = color.slice(1).split('') 39 + const alphaHex = Math.round(alpha * 255).toString(16) 40 + return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart( 41 + 2, 42 + alphaHex, 43 + )}` 44 + } 45 + } else { 46 + logger.warn(`Could not make '${color}' transparent`) 47 + } 48 + return color 49 + }

+28 -9

src/lib/ThemeContext.tsx

··· 1 - import {type ReactNode} from 'react' 2 import {createContext, useContext} from 'react' 3 import {type TextStyle, type ViewStyle} from 'react-native' 4 import {type ThemeName} from '@bsky.app/alf' 5 6 import {darkTheme, defaultTheme, dimTheme} from './themes' 7 8 export type ColorScheme = 'light' | 'dark' ··· 88 theme: ThemeName 89 } 90 91 - export const ThemeContext = createContext<Theme>(defaultTheme) 92 ThemeContext.displayName = 'ThemeContext' 93 94 export const useTheme = () => useContext(ThemeContext) 95 96 - function getTheme(theme: ThemeName) { 97 - switch (theme) { 98 case 'light': 99 - return defaultTheme 100 case 'dim': 101 - return dimTheme 102 case 'dark': 103 - return darkTheme 104 default: 105 - return defaultTheme 106 } 107 } 108 ··· 110 theme, 111 children, 112 }) => { 113 - const themeValue = getTheme(theme) 114 115 return ( 116 <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>

··· 1 + import {type ReactNode, useMemo} from 'react' 2 import {createContext, useContext} from 'react' 3 import {type TextStyle, type ViewStyle} from 'react-native' 4 import {type ThemeName} from '@bsky.app/alf' 5 6 + import {useThemePrefs} from '#/state/shell/color-mode' 7 + import {type SchemeType, selectScheme} from '#/alf' 8 + import {themes} from '#/alf/themes' 9 import {darkTheme, defaultTheme, dimTheme} from './themes' 10 11 export type ColorScheme = 'light' | 'dark' ··· 91 theme: ThemeName 92 } 93 94 + export const ThemeContext = createContext<Theme>( 95 + defaultTheme({ 96 + lightPalette: themes.lightPalette, 97 + darkPalette: themes.darkPalette, 98 + }), 99 + ) 100 ThemeContext.displayName = 'ThemeContext' 101 102 export const useTheme = () => useContext(ThemeContext) 103 104 + function getTheme(themeName: ThemeName, scheme: SchemeType) { 105 + const paletteOptions = { 106 + lightPalette: scheme.lightPalette, 107 + darkPalette: scheme.darkPalette, 108 + dimPalette: scheme.dimPalette, 109 + } 110 + 111 + switch (themeName) { 112 case 'light': 113 + return defaultTheme(paletteOptions) 114 case 'dim': 115 + return dimTheme(paletteOptions) 116 case 'dark': 117 + return darkTheme(paletteOptions) 118 default: 119 + return defaultTheme(paletteOptions) 120 } 121 } 122 ··· 124 theme, 125 children, 126 }) => { 127 + const {colorScheme} = useThemePrefs() 128 + 129 + const themeValue = useMemo(() => { 130 + const currentScheme = selectScheme(colorScheme) 131 + return getTheme(theme, currentScheme) 132 + }, [theme, colorScheme]) 133 134 return ( 135 <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>

+34 -14

src/lib/themes.ts

··· 1 import {Platform} from 'react-native' 2 3 import {tokens} from '#/alf' 4 - import {darkPalette, dimPalette, lightPalette} from '#/alf/themes' 5 import {fontWeight} from '#/alf/tokens' 6 import {colors} from './styles' 7 import {type Theme} from './ThemeContext' 8 9 - export const defaultTheme: Theme = { 10 colorScheme: 'light', 11 palette: { 12 default: { ··· 288 fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New', 289 }, 290 }, 291 - } 292 293 - export const darkTheme: Theme = { 294 - ...defaultTheme, 295 colorScheme: 'dark', 296 palette: { 297 - ...defaultTheme.palette, 298 default: { 299 background: darkPalette.contrast_0, 300 backgroundLight: darkPalette.contrast_25, ··· 318 borderLinkHover: darkPalette.contrast_300, 319 }, 320 primary: { 321 - ...defaultTheme.palette.primary, 322 textInverted: colors.blue2, 323 }, 324 secondary: { 325 - ...defaultTheme.palette.secondary, 326 textInverted: colors.green2, 327 }, 328 inverted: { ··· 337 icon: lightPalette.contrast_500, 338 }, 339 }, 340 - } 341 342 - export const dimTheme: Theme = { 343 - ...darkTheme, 344 palette: { 345 - ...darkTheme.palette, 346 default: { 347 - ...darkTheme.palette.default, 348 background: dimPalette.contrast_0, 349 backgroundLight: dimPalette.contrast_25, 350 text: dimPalette.white, ··· 367 borderLinkHover: dimPalette.contrast_300, 368 }, 369 }, 370 - }

··· 1 import {Platform} from 'react-native' 2 3 import {tokens} from '#/alf' 4 + import {type Palette} from '#/alf/themes' 5 import {fontWeight} from '#/alf/tokens' 6 import {colors} from './styles' 7 import {type Theme} from './ThemeContext' 8 9 + export const defaultTheme = ({ 10 + lightPalette, 11 + darkPalette, 12 + }: { 13 + lightPalette: Palette 14 + darkPalette: Palette 15 + }): Theme => ({ 16 colorScheme: 'light', 17 palette: { 18 default: { ··· 294 fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New', 295 }, 296 }, 297 + }) 298 299 + export const darkTheme = ({ 300 + lightPalette, 301 + darkPalette, 302 + }: { 303 + lightPalette: Palette 304 + darkPalette: Palette 305 + }): Theme => ({ 306 + ...defaultTheme({lightPalette, darkPalette}), 307 colorScheme: 'dark', 308 palette: { 309 + ...defaultTheme({lightPalette, darkPalette}).palette, 310 default: { 311 background: darkPalette.contrast_0, 312 backgroundLight: darkPalette.contrast_25, ··· 330 borderLinkHover: darkPalette.contrast_300, 331 }, 332 primary: { 333 + ...defaultTheme({lightPalette, darkPalette}).palette.primary, 334 textInverted: colors.blue2, 335 }, 336 secondary: { 337 + ...defaultTheme({lightPalette, darkPalette}).palette.secondary, 338 textInverted: colors.green2, 339 }, 340 inverted: { ··· 349 icon: lightPalette.contrast_500, 350 }, 351 }, 352 + }) 353 354 + export const dimTheme = ({ 355 + lightPalette, 356 + darkPalette, 357 + dimPalette, 358 + }: { 359 + lightPalette: Palette 360 + darkPalette: Palette 361 + dimPalette: Palette 362 + }): Theme => ({ 363 + ...darkTheme({lightPalette, darkPalette}), 364 palette: { 365 + ...darkTheme({lightPalette, darkPalette}).palette, 366 default: { 367 + ...darkTheme({lightPalette, darkPalette}).palette.default, 368 background: dimPalette.contrast_0, 369 backgroundLight: dimPalette.contrast_25, 370 text: dimPalette.white, ··· 387 borderLinkHover: dimPalette.contrast_300, 388 }, 389 }, 390 + })

+39 -2

src/screens/Settings/AppearanceSettings.tsx

··· 20 import {type Props as SVGIconProps} from '#/components/icons/common' 21 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' 22 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' 23 import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize' 24 import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' 25 import * as Layout from '#/components/Layout' ··· 32 const {_} = useLingui() 33 const {fonts} = useAlf() 34 35 - const {colorMode, darkTheme} = useThemePrefs() 36 - const {setColorMode, setDarkTheme} = useSetThemePrefs() 37 38 const onChangeAppearance = useCallback( 39 (value: 'light' | 'system' | 'dark') => { 40 setColorMode(value) 41 }, 42 [setColorMode], 43 ) 44 45 const onChangeDarkTheme = useCallback( ··· 96 ]} 97 value={colorMode} 98 onChange={onChangeAppearance} 99 /> 100 101 {colorMode !== 'light' && (

··· 20 import {type Props as SVGIconProps} from '#/components/icons/common' 21 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' 22 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' 23 + import {Pizza_Stroke2_Corner0_Rounded as PizzaIcon} from '#/components/icons/Pizza' 24 import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize' 25 import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' 26 import * as Layout from '#/components/Layout' ··· 33 const {_} = useLingui() 34 const {fonts} = useAlf() 35 36 + const {colorMode, colorScheme, darkTheme} = useThemePrefs() 37 + const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs() 38 39 const onChangeAppearance = useCallback( 40 (value: 'light' | 'system' | 'dark') => { 41 setColorMode(value) 42 }, 43 [setColorMode], 44 + ) 45 + 46 + const onChangeScheme = useCallback( 47 + (value: 'witchsky' | 'bluesky' | 'blacksky' | 'deer' | 'zeppelin') => { 48 + setColorScheme(value) 49 + }, 50 + [setColorScheme], 51 ) 52 53 const onChangeDarkTheme = useCallback( ··· 104 ]} 105 value={colorMode} 106 onChange={onChangeAppearance} 107 + /> 108 + 109 + <AppearanceToggleButtonGroup 110 + title={_(msg`Color scheme`)} 111 + icon={PizzaIcon} 112 + items={[ 113 + { 114 + label: _(msg`Witchsky`), 115 + name: 'witchsky', 116 + }, 117 + { 118 + label: _(msg`Bluesky`), 119 + name: 'bluesky', 120 + }, 121 + { 122 + label: _(msg`Blacksky`), 123 + name: 'blacksky', 124 + }, 125 + { 126 + label: _(msg`Deer`), 127 + name: 'deer', 128 + }, 129 + { 130 + label: _(msg`Zeppelin`), 131 + name: 'zeppelin', 132 + }, 133 + ]} 134 + value={colorScheme} 135 + onChange={onChangeScheme} 136 /> 137 138 {colorMode !== 'light' && (

+2

src/state/persisted/schema.ts

··· 49 const schema = z.object({ 50 colorMode: z.enum(['system', 'light', 'dark']), 51 darkTheme: z.enum(['dim', 'dark']).optional(), 52 session: z.object({ 53 accounts: z.array(accountSchema), 54 currentAccount: currentAccountSchema.optional(), ··· 164 export const defaults: Schema = { 165 colorMode: 'system', 166 darkTheme: 'dim', 167 session: { 168 accounts: [], 169 currentAccount: undefined,

··· 49 const schema = z.object({ 50 colorMode: z.enum(['system', 'light', 'dark']), 51 darkTheme: z.enum(['dim', 'dark']).optional(), 52 + colorScheme: z.enum(['witchsky', 'bluesky', 'blacksky', 'deer', 'zeppelin']), 53 session: z.object({ 54 accounts: z.array(accountSchema), 55 currentAccount: currentAccountSchema.optional(), ··· 165 export const defaults: Schema = { 166 colorMode: 'system', 167 darkTheme: 'dim', 168 + colorScheme: 'witchsky', 169 session: { 170 accounts: [], 171 currentAccount: undefined,

+16 -1

src/state/shell/color-mode.tsx

··· 5 type StateContext = { 6 colorMode: persisted.Schema['colorMode'] 7 darkTheme: persisted.Schema['darkTheme'] 8 } 9 type SetContext = { 10 setColorMode: (v: persisted.Schema['colorMode']) => void 11 setDarkTheme: (v: persisted.Schema['darkTheme']) => void 12 } 13 14 const stateContext = React.createContext<StateContext>({ 15 colorMode: 'system', 16 darkTheme: 'dark', 17 }) 18 stateContext.displayName = 'ColorModeStateContext' 19 const setContext = React.createContext<SetContext>({} as SetContext) ··· 22 export function Provider({children}: React.PropsWithChildren<{}>) { 23 const [colorMode, setColorMode] = React.useState(persisted.get('colorMode')) 24 const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme')) 25 26 const stateContextValue = React.useMemo( 27 () => ({ 28 colorMode, 29 darkTheme, 30 }), 31 - [colorMode, darkTheme], 32 ) 33 34 const setContextValue = React.useMemo( ··· 41 setDarkTheme(_darkTheme) 42 persisted.write('darkTheme', _darkTheme) 43 }, 44 }), 45 [], 46 ) ··· 52 const unsub2 = persisted.onUpdate('colorMode', nextColorMode => { 53 setColorMode(nextColorMode) 54 }) 55 return () => { 56 unsub1() 57 unsub2() 58 } 59 }, []) 60

··· 5 type StateContext = { 6 colorMode: persisted.Schema['colorMode'] 7 darkTheme: persisted.Schema['darkTheme'] 8 + colorScheme: persisted.Schema['colorScheme'] 9 } 10 type SetContext = { 11 setColorMode: (v: persisted.Schema['colorMode']) => void 12 setDarkTheme: (v: persisted.Schema['darkTheme']) => void 13 + setColorScheme: (v: persisted.Schema['colorScheme']) => void 14 } 15 16 const stateContext = React.createContext<StateContext>({ 17 colorMode: 'system', 18 darkTheme: 'dark', 19 + colorScheme: 'witchsky', 20 }) 21 stateContext.displayName = 'ColorModeStateContext' 22 const setContext = React.createContext<SetContext>({} as SetContext) ··· 25 export function Provider({children}: React.PropsWithChildren<{}>) { 26 const [colorMode, setColorMode] = React.useState(persisted.get('colorMode')) 27 const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme')) 28 + const [colorScheme, setColorScheme] = React.useState( 29 + persisted.get('colorScheme'), 30 + ) 31 32 const stateContextValue = React.useMemo( 33 () => ({ 34 colorMode, 35 darkTheme, 36 + colorScheme, 37 }), 38 + [colorMode, darkTheme, colorScheme], 39 ) 40 41 const setContextValue = React.useMemo( ··· 48 setDarkTheme(_darkTheme) 49 persisted.write('darkTheme', _darkTheme) 50 }, 51 + setColorScheme: (_colorScheme: persisted.Schema['colorScheme']) => { 52 + setColorScheme(_colorScheme) 53 + persisted.write('colorScheme', _colorScheme) 54 + }, 55 }), 56 [], 57 ) ··· 63 const unsub2 = persisted.onUpdate('colorMode', nextColorMode => { 64 setColorMode(nextColorMode) 65 }) 66 + const unsub3 = persisted.onUpdate('colorScheme', nextColorScheme => { 67 + setColorScheme(nextColorScheme) 68 + }) 69 return () => { 70 unsub1() 71 unsub2() 72 + unsub3() 73 } 74 }, []) 75

+4 -3

src/view/com/util/UserAvatar.tsx

··· 104 size: number 105 }): React.ReactNode => { 106 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') 107 108 const aviStyle = useMemo(() => { 109 if (finalShape === 'square') { ··· 123 fill="none" 124 stroke="none" 125 style={aviStyle}> 126 - <Rect width="32" height="32" rx="4" fill="#ED5345" /> 127 <Path 128 d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z" 129 fill="white" ··· 145 style={aviStyle}> 146 <Path 147 d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z" 148 - fill="#ED5345" 149 /> 150 <Path 151 d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z" ··· 200 fill="none" 201 stroke="none" 202 style={aviStyle}> 203 - <Circle cx="12" cy="12" r="12" fill="#ED5345" /> 204 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" /> 205 <Path 206 strokeLinecap="round"

··· 104 size: number 105 }): React.ReactNode => { 106 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') 107 + const t = useTheme() 108 109 const aviStyle = useMemo(() => { 110 if (finalShape === 'square') { ··· 124 fill="none" 125 stroke="none" 126 style={aviStyle}> 127 + <Rect width="32" height="32" rx="4" fill={t.palette.primary_500} /> 128 <Path 129 d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z" 130 fill="white" ··· 146 style={aviStyle}> 147 <Path 148 d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z" 149 + fill={t.palette.primary_500} 150 /> 151 <Path 152 d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z" ··· 201 fill="none" 202 stroke="none" 203 style={aviStyle}> 204 + <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} /> 205 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" /> 206 <Path 207 strokeLinecap="round"

+10 -2

src/view/icons/Logo.tsx

··· 59 {gradient && ( 60 <Defs> 61 <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> 62 - <Stop offset="0" stopColor="#ED5345" stopOpacity="1" /> 63 - <Stop offset="1" stopColor="#E25C50" stopOpacity="1" /> 64 </LinearGradient> 65 </Defs> 66 )}

··· 59 {gradient && ( 60 <Defs> 61 <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> 62 + <Stop 63 + offset="0" 64 + stopColor={t.palette.primary_500} 65 + stopOpacity="1" 66 + /> 67 + <Stop 68 + offset="1" 69 + stopColor={t.palette.primary_500} 70 + stopOpacity="1" 71 + /> 72 </LinearGradient> 73 </Defs> 74 )}

+33

src/view/shell/index.web.tsx

··· 47 const welcomeModalControl = useWelcomeModal() 48 49 useLayoutEffect(() => { 50 if (showDrawer !== showDrawerDelayedExit) { 51 if (showDrawer) { 52 setShowDrawerDelayedExit(true)

··· 47 const welcomeModalControl = useWelcomeModal() 48 49 useLayoutEffect(() => { 50 + const rootElement = document.documentElement 51 + rootElement.className = `html` 52 + rootElement.style.setProperty( 53 + 'background', 54 + `${t.atoms.bg.backgroundColor}`, 55 + 'important', 56 + ) 57 + }, [t.atoms.bg.backgroundColor, t.name]) 58 + 59 + useLayoutEffect(() => { 60 + const color = t.palette.primary_500 61 + 62 + const styleId = 'prosemirror-mention-color' 63 + let style = document.getElementById(styleId) as HTMLStyleElement | null 64 + 65 + if (!style) { 66 + style = document.createElement('style') 67 + style.id = styleId 68 + document.head.appendChild(style) 69 + } 70 + 71 + style.innerHTML = ` 72 + .ProseMirror .mention { 73 + color: ${color} !important; 74 + } 75 + .ProseMirror a, 76 + .ProseMirror .autolink { 77 + color: ${color} !important; 78 + } 79 + ` 80 + }, [t.palette.primary_500]) 81 + 82 + useLayoutEffect(() => { 83 if (showDrawer !== showDrawerDelayedExit) { 84 if (showDrawer) { 85 setShowDrawerDelayedExit(true)