reivilibre/iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reduce contrast of dark theme in scrollable example

Browse Source
This commit is contained in:
Héctor Ramón Jiménez 2020-10-24 10:29:19 +02:00
parent 7f66345d5a
commit ed458d33d9
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
examples/scrollable/src/style.rs
View File

@ -56,45 +56,39 @@ mod dark {
use iced::{container, radio, rule, scrollable, Color}; use iced::{container, radio, rule, scrollable, Color};
const BACKGROUND: Color = Color::from_rgb( const BACKGROUND: Color = Color::from_rgb(
0x0f as f32 / 255.0, 0x36 as f32 / 255.0,
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
);
const LIGHTER_BACKGROUND: Color = Color::from_rgb(
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
0x1f as f32 / 255.0,
);
const YELLOW: Color = Color::from_rgb(
0xff as f32 / 255.0,
0xb4 as f32 / 255.0,
0x54 as f32 / 255.0,
);
const CYAN: Color = Color::from_rgb(
0x39 as f32 / 255.0, 0x39 as f32 / 255.0,
0xaf as f32 / 255.0, 0x3F as f32 / 255.0,
0xd7 as f32 / 255.0,
); );
const CYAN_LIGHT: Color = Color::from_rgb( const SURFACE: Color = Color::from_rgb(
0x5d as f32 / 255.0, 0x40 as f32 / 255.0,
0xb7 as f32 / 255.0, 0x44 as f32 / 255.0,
0xd5 as f32 / 255.0, 0x4B as f32 / 255.0,
); );
const ORANGE: Color = Color::from_rgb( const ACCENT: Color = Color::from_rgb(
0xff as f32 / 255.0, 0x6F as f32 / 255.0,
0x77 as f32 / 255.0, 0xFF as f32 / 255.0,
0xE9 as f32 / 255.0,
);
const ACTIVE: Color = Color::from_rgb(
0x72 as f32 / 255.0,
0x89 as f32 / 255.0,
0xDA as f32 / 255.0,
);
const SCROLLBAR: Color = Color::from_rgb(
0x2E as f32 / 255.0,
0x33 as f32 / 255.0, 0x33 as f32 / 255.0,
0x38 as f32 / 255.0,
); );
const ORANGE_DARK: Color = Color::from_rgb( const SCROLLER: Color = Color::from_rgb(
0xe6 as f32 / 255.0, 0x20 as f32 / 255.0,
0x5b as f32 / 255.0, 0x22 as f32 / 255.0,
0x16 as f32 / 255.0, 0x25 as f32 / 255.0,
); );
pub struct Container; pub struct Container;
@ -118,16 +112,16 @@ mod dark {
impl radio::StyleSheet for Radio { impl radio::StyleSheet for Radio {
fn active(&self) -> radio::Style { fn active(&self) -> radio::Style {
radio::Style { radio::Style {
background: BACKGROUND.into(), background: SURFACE.into(),
dot_color: CYAN, dot_color: ACTIVE,
border_width: 1, border_width: 1,
border_color: CYAN, border_color: ACTIVE,
} }
} }
fn hovered(&self) -> radio::Style { fn hovered(&self) -> radio::Style {
radio::Style { radio::Style {
background: LIGHTER_BACKGROUND.into(), background: Color { a: 0.5, ..SURFACE }.into(),
..self.active() ..self.active()
} }
} }
@ -138,12 +132,16 @@ mod dark {
impl scrollable::StyleSheet for Scrollable { impl scrollable::StyleSheet for Scrollable {
fn active(&self) -> scrollable::Scrollbar { fn active(&self) -> scrollable::Scrollbar {
scrollable::Scrollbar { scrollable::Scrollbar {
background: CYAN.into(), background: Color {
a: 0.8,
..SCROLLBAR
}
.into(),
border_radius: 2, border_radius: 2,
border_width: 0, border_width: 0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: YELLOW, color: Color { a: 0.7, ..SCROLLER },
border_radius: 2, border_radius: 2,
border_width: 0, border_width: 0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
@ -155,9 +153,9 @@ mod dark {
let active = self.active(); let active = self.active();
scrollable::Scrollbar { scrollable::Scrollbar {
background: CYAN_LIGHT.into(), background: SCROLLBAR.into(),
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: ORANGE, color: SCROLLER,
..active.scroller ..active.scroller
}, },
..active ..active
@ -169,7 +167,7 @@ mod dark {
scrollable::Scrollbar { scrollable::Scrollbar {
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: ORANGE_DARK, color: ACCENT,
..hovered.scroller ..hovered.scroller
}, },
..hovered ..hovered
@ -182,10 +180,10 @@ mod dark {
impl rule::StyleSheet for Rule { impl rule::StyleSheet for Rule {
fn style(&self) -> rule::Style { fn style(&self) -> rule::Style {
rule::Style { rule::Style {
color: CYAN, color: SURFACE,
width: 2, width: 2,
radius: 1, radius: 1,
fill_mode: rule::FillMode::Percent(15.0), fill_mode: rule::FillMode::Percent(30.0),
} }
} }
} }