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

Reduce contrast of dark theme in `scrollable` example

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