zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Make dim theme dim (#2966)

Browse source 
* Make dim color scheme dim

* Tweaks

* Overall tweaks

* We have to go darker

* Tweak saturation of blues in dim

* Increase contrast on dark-dark mode

* adjust dim

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
dan 2024-02-23 23:09:50 +00:00 • committed by GitHub
parent de9df50af3
commit 6ae9c5d45c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 71 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -449,7 +449,7 @@ let PostThreadItemLoaded = ({
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.border,
backgroundColor: pal.colors.replyLine,
marginBottom: 4,
},
]}
@ -487,7 +487,7 @@ let PostThreadItemLoaded = ({
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.border,
backgroundColor: pal.colors.replyLine,
marginTop: 4,
},
]}

103
src/view/screens/Storybook/Palette.tsx
View file

@ -2,99 +2,26 @@ import React from 'react'
import {View} from 'react-native'
import * as tokens from '#/alf/tokens'
import {atoms as a} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
export function Palette() {
const t = useTheme()
return (
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_25},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_50},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_950},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_975},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_1000},
]}
/>
<View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} />
</View>
<View style={[a.flex_row, a.gap_md]}>