Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support an ability to switch the UI to a dark mode #319

Open
wants to merge 8 commits into
base: vue
Choose a base branch
from
Open

Support an ability to switch the UI to a dark mode #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e1fbe03
Adjust colors for a dark theme and define mixins
pqrsooo Jan 1, 2020
ff4f7d2
Apply the dark theme to components
pqrsooo Jan 1, 2020
dabbacb
Apply a theme based on a value saved in a local storage
pqrsooo Jan 1, 2020
6376a19
Add a dark theme control to UserMenu
pqrsooo Jan 1, 2020
2ddd1e1
Apply a dark theme to Modal
pqrsooo Jan 1, 2020
4c7168f
Apply a dark theme to login pages
pqrsooo Jan 1, 2020
8fda17f
Run a linter
pqrsooo Jan 2, 2020
3c8c9de
Make sure all color variables are themed properly
pqrsooo Jan 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@
<router-view />
</template>

<script>
import { applySavedTheme } from "@/lib/theme";

export default {
mounted() {
applySavedTheme();
}
};
</script>

<style lang="scss">
@import "./assets/styles/reset.scss";
@import "./assets/styles/global.scss";
Expand Down
41 changes: 41 additions & 0 deletions src/assets/styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,44 @@
@content
}
}

@mixin themed($attached: false) {
@each $theme, $map in $themes {
$wrapped-selector: ".theme--#{$theme} &";
@if $attached {
$wrapped-selector: "&.theme--#{$theme}";
}
#{$wrapped-selector} {
$theme-map: () !global;

@each $key, $value in $map {
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}

@content;
$theme-map: null !global;
}
}
}

@mixin themed-only($theme: default, $attached: false) {
$wrapped-selector: ".theme--#{$theme} &";
@if $attached {
$wrapped-selector: "&.theme--#{$theme}";
}
#{$wrapped-selector} {
$theme-map: () !global;

$map: map-get($themes, $theme);
@each $key, $value in $map {
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}

@content;
$theme-map: null !global;
}
}

@function tget($key) {
@return map-get($theme-map, $key);
}
66 changes: 64 additions & 2 deletions src/assets/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,91 @@ $bp-mobile: 480px;
/* [-----------](-----------)[-----------> */
/* 480px 980px */

$surface-color: #ffffff;
$surface-color--dark: #161616;

$body-color: #f7f8fa;
$body-color--dark: #0a0a0a;

$body-background-size: 100% 100%;

$color-text: #1e375a;
$color-text-secondary: rgba(#1e375a, 0.6);
$color-text--dark: #e7f1ff;

$color-text-secondary: rgba($color-text, 0.6);
$color-text-secondary--dark: rgba($color-text--dark, 0.6);

$color-primary: #2364d2;
$color-primary--dark: #4188ff;

$color-warning: #ffbe00;
$color-warning--dark: desaturate($color-warning, 20%);

$color-danger: #ff4164;
$color-danger--dark: desaturate($color-danger, 20%);

$color-success: #19d78c;
$color-success--dark: desaturate($color-success, 20%);

$color-info: #96a5be;
$color-info--dark: desaturate($color-info, 20%);

$border-color: rgba($color-text, 0.05);
$border-color--dark: rgba($color-text--dark, 0.08);

$header-color: rgba($color-text, 0.97);
$header-color--dark: rgb(24, 24, 24);

$header-height: 56px;
$header-padding-side: 15px;

$overlay-color: rgba($color-text, 0.9);
$overlay-color--dark: rgba($body-color--dark, 0.9);

$overlay-z-index: 10;

$terminal-color: $color-text;
$terminal-color--dark: darken($color-text, 12%);

$button-outline-hover-bg-opacity: 0.1;
$button-outline-hover-bg-opacity--dark: 0.15;

$step-selected-bg-color: rgba($color-text, 0.03)
$step-selected-bg-color: rgba($color-text, 0.03);
$step-selected-bg-color--dark: rgba($color-text--dark, 0.05);

$themes: (
default: (
surface-color: $surface-color,
body-color: $body-color,
color-text: $color-text,
color-text-secondary: $color-text-secondary,
color-primary: $color-primary,
color-warning: $color-warning,
color-danger: $color-danger,
color-success: $color-success,
color-info: $color-info,
border-color: $border-color,
header-color: $header-color,
overlay-color: $overlay-color,
terminal-color: $terminal-color,
button-outline-hover-bg-opacity: $button-outline-hover-bg-opacity,
step-selected-bg-color: $step-selected-bg-color
),
dark: (
surface-color: $surface-color--dark,
body-color: $body-color--dark,
color-text: $color-text--dark,
color-text-secondary: $color-text-secondary--dark,
color-primary: $color-primary--dark,
color-warning: $color-warning--dark,
color-danger: $color-danger--dark,
color-success: $color-success--dark,
color-info: $color-info--dark,
border-color: $border-color--dark,
header-color: $header-color--dark,
overlay-color: $overlay-color--dark,
terminal-color: $terminal-color--dark,
button-outline-hover-bg-opacity: $button-outline-hover-bg-opacity--dark,
step-selected-bg-color: $step-selected-bg-color--dark
),
);
13 changes: 11 additions & 2 deletions src/assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,26 @@ html {

html, body {
box-sizing: border-box;
color: $color-text;
font-size: 14px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
min-height: 100%;
margin: 0px;
padding: 0px;
width: 100%;

@include themed(true) {
color: tget("color-text");
}
}

body {
background: $body-color;
@include themed(true) {
background: tget("body-color");
}

&.no-transition * {
transition: none !important;
}
}

a {
Expand Down
21 changes: 16 additions & 5 deletions src/components/Alert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,18 @@ export default {

<style scoped lang="scss">
@import "../assets/styles/variables";
@import "../assets/styles/mixins";

.card {
text-align: center;
word-wrap: break-word;
}

.secondary {
color: $color-text-secondary;
margin-top: 8px;
@include themed {
color: tget("color-text-secondary");
}
}

.theme-info,
Expand All @@ -47,18 +50,26 @@ export default {
}

.theme-success {
background-color: $color-success;
@include themed {
background-color: tget("color-success");
}
}

.theme-info {
background-color: $color-info;
@include themed {
background-color: tget("color-info");
}
}

.theme-warning {
background-color: $color-warning;
@include themed {
background-color: tget("color-warning");
}
}

.theme-danger {
background-color: $color-danger;
@include themed {
background-color: tget("color-danger");
}
}
</style>
5 changes: 4 additions & 1 deletion src/components/Breadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export default {

<style scoped lang="scss">
@import "../assets/styles/variables";
@import "../assets/styles/mixins";

.breadcrumbs {
padding: 5px 0;
Expand All @@ -66,7 +67,9 @@ export default {

.divider {
padding: 0 8px;
color: $color-text-secondary;
vertical-align: bottom;
@include themed {
color: tget("color-text-secondary");
}
}
</style>
29 changes: 22 additions & 7 deletions src/components/BuildsFeedIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,12 @@ export default {

<style lang="scss">
@import "../assets/styles/variables";
@import "../assets/styles/mixins";

.builds-feed-indicator .gear > g {
fill: $header-color;
@include themed {
fill: tget("header-color");
}
}

.builds-feed-indicator.status-done {
Expand All @@ -96,7 +99,9 @@ export default {
}

.circle {
background-color: $header-color;
@include themed {
background-color: tget("header-color");
}
}

.label {
Expand All @@ -109,7 +114,9 @@ export default {
}

.label {
color: $header-color;
@include themed {
color: tget("header-color");
}
}
}
}
Expand All @@ -119,12 +126,16 @@ export default {
animation: spin 5s linear infinite;

.line {
fill: $color-warning;
fill-opacity: 1;
@include themed {
fill: tget("color-warning");
}
}

.bg {
fill: $header-color;
@include themed {
fill: tget("header-color");
}
}
}

Expand All @@ -133,14 +144,18 @@ export default {
}

.label {
color: $color-warning;
@include themed {
color: tget("color-warning");
}
}

&.filled {
.gear {
.line,
.bg {
fill: $color-warning;
@include themed {
fill: tget("color-warning");
}
fill-opacity: 1;
}
}
Expand Down
15 changes: 11 additions & 4 deletions src/components/BuildsFeedPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default {

<style lang="scss">
@import "../assets/styles/variables";
@import "../assets/styles/mixins";

.builds-feed-panel {
.page-header {
Expand All @@ -57,25 +58,31 @@ export default {
.alert {
margin: 0 $header-padding-side;
box-shadow: none;
color: $color-text-secondary;
@include themed {
color: tget("color-text-secondary");
}
}

.repo-item.media-mobile {
border: none;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
box-shadow: none;
border-radius: 0;
padding-left: $header-padding-side;
padding-right: $header-padding-side;
@include themed {
border-top: 1px solid tget("border-color");
border-bottom: 1px solid tget("border-color");
}
}

.repo-link.hover-type-box-shadow:focus .repo-item,
.repo-link.hover-type-box-shadow:hover .repo-item {
box-shadow: none;

.header {
color: $color-primary;
@include themed {
color: tget("color-primary");
}
}
}

Expand Down
Loading