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

Jump to bottom

feat: dark mode #6010

Merged
merged 26 commits into from
Aug 10, 2023
Merged

feat: dark mode #6010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
b3c7094
feat: Upgrade bootstrap to 5.3.0 and enable dark mode
larseggert Apr 19, 2023
df1a4bf
Enable dark mode in other views
larseggert Apr 19, 2023
54c7951
Fix some colors
larseggert Apr 19, 2023
e6f351b
Fix more colors
larseggert Apr 19, 2023
93d50f9
feat: Upgrade bootstrap to 5.3.0 and enable dark mode
larseggert Apr 19, 2023
112d3b9
Enable dark mode in other views
larseggert Apr 19, 2023
342e6f5
Color mode fixes
larseggert May 26, 2023
f850061
Fix switching in HTMLized view
larseggert May 26, 2023
e5163b6
Load theme.js in header, to avoid flickering
larseggert May 29, 2023
8caf3a7
Fix some badges
larseggert May 29, 2023
6f8a798
[email protected]
larseggert May 31, 2023
27f9e6a
Address review comments
larseggert Jun 1, 2023
e6f47a0
Fix title
larseggert Jun 1, 2023
7497143
Better select2 fix
larseggert Jun 2, 2023
ce3114c
chore: Merge pull request #5509 from larseggert/feat-dark-mode
rjsparks Jun 13, 2023
772b6e8
Merge branch 'main' into feat/dark-mode
rjsparks Jun 13, 2023
e3a0f47
Fix test failure (#5826)
larseggert Jun 14, 2023
62523eb
fix: More dark mode fixes (#5852)
larseggert Jun 21, 2023
a20d1f4
Merge remote-tracking branch 'ietf-tools/main' into feat/dark-mode
rjsparks Jul 19, 2023
05644a1
feat: agenda / floor-plan dark mode support (#5995)
NGPixel Jul 19, 2023
3a47871
fix: More dark mode fixes (#6001)
larseggert Jul 20, 2023
4ec22da
Merge branch 'main' into feat/dark-mode
rjsparks Jul 22, 2023
97c7dd4
fix: Use correct logo in dark mode menubar (#6016)
larseggert Jul 22, 2023
1d22e39
fix: Use icons in addition to colors for review-related badges (#6012)
larseggert Jul 23, 2023
57f23f5
chore: feat/dark-mode <- main (#6103)
larseggert Aug 10, 2023
7773e9a
Merge branch 'main' into feat/dark-mode
rjsparks Aug 10, 2023
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
16 changes: 8 additions & 8 deletions .pnp.cjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file removed .yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/bootstrap-npm-5.3.0-240c38a3b2-29a83cc8ca.zip
View file
Open in desktop
Binary file not shown.
15 changes: 15 additions & 0 deletions client/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,21 @@ const siteStore = useSiteStore()

const appContainer = ref(null)

// --------------------------------------------------------------------
// Set user theme
// --------------------------------------------------------------------

const desiredTheme = window.localStorage?.getItem('theme')
if (desiredTheme === 'dark') {
siteStore.theme = 'dark'
} else if (desiredTheme === 'light') {
siteStore.theme = 'light'
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
siteStore.theme = 'dark'
} else {
siteStore.theme = 'light'
}

// --------------------------------------------------------------------
// Handle browser resize
// --------------------------------------------------------------------
Expand Down
7 changes: 7 additions & 0 deletions client/agenda/Agenda.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,13 @@ onMounted(() => {
color: $blue-700;
position: relative;

@at-root .theme-dark & {
border: 1px solid $blue-800;
background: linear-gradient(to top, lighten($blue-900, 2%), lighten($blue-900, 5%));
color: $blue-100;
box-shadow: inset 0 0 0 1px #000;
}

> button {
position: absolute;
top: 15px;
Expand Down
18 changes: 18 additions & 0 deletions client/agenda/AgendaDetailsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,10 @@ async function fetchSessionMaterials () {
.bi {
font-size: 20px;
color: $indigo;

@at-root .theme-dark & {
color: $indigo-300;
}
}

.detail-header {
Expand Down Expand Up @@ -343,6 +347,11 @@ async function fetchSessionMaterials () {
border-radius: 5px;
font-weight: 500;

@at-root .theme-dark & {
background-color: $gray-900;
border-color: $gray-700;
}

a {
cursor: pointer;

Expand All @@ -365,6 +374,11 @@ async function fetchSessionMaterials () {
margin-top: 12px;
border-radius: 5px;

@at-root .theme-dark & {
background-color: $gray-900;
border-color: $gray-700;
}

.bi {
color: $blue;
}
Expand All @@ -377,6 +391,10 @@ async function fetchSessionMaterials () {
border: none;
border-radius: 5px;
display: block;

@at-root .theme-dark & {
background-color: $gray-900;
}
}
}

Expand Down
44 changes: 44 additions & 0 deletions client/agenda/AgendaFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,30 +217,58 @@ function toggleFilterGroup (key) {
padding: 5px;
border-radius: 10px;

@at-root .theme-dark & {
background-color: $gray-800;
}

&:nth-child(2) {
background-color: $blue-100;

@at-root .theme-dark & {
background-color: $gray-800;
}

.agenda-personalize-areamain {
button {
color: $blue-600;

@at-root .theme-dark & {
color: $blue-100;
}
}
}

.agenda-personalize-groups {
background-color: lighten($blue-100, 7%);

@at-root .theme-dark & {
background-color: $gray-700;
}
}
}
&:nth-child(3) {
background-color: $orange-100;

@at-root .theme-dark & {
background-color: $gray-800;
}

.agenda-personalize-areamain {
button {
color: $orange-600;

@at-root .theme-dark & {
color: $orange-100;
}
}
}

.agenda-personalize-groups {
background-color: lighten($orange-100, 7%);

@at-root .theme-dark & {
background-color: $gray-700;
}
}
}

Expand Down Expand Up @@ -276,6 +304,12 @@ function toggleFilterGroup (key) {
transition: background-color .5s ease;
position: relative;

@at-root .theme-dark & {
background-color: $gray-600;
border-color: $gray-700;
color: #FFF;
}

> .bi {
margin-right: .5rem;
}
Expand Down Expand Up @@ -310,6 +344,10 @@ function toggleFilterGroup (key) {
flex: 1;
display: flex;
flex-wrap: wrap;

@at-root .theme-dark & {
background-color: $gray-700;
}
}

&-group {
Expand All @@ -324,6 +362,12 @@ function toggleFilterGroup (key) {
color: $gray-600;
margin-right: 0px;

@at-root .theme-dark & {
background-color: $gray-600;
border-color: $gray-700;
color: #FFF;
}

@media screen and (max-width: $bs5-break-sm) {
font-size: .9em;
}
Expand Down
12 changes: 12 additions & 0 deletions client/agenda/AgendaQuickAccess.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,9 @@ function scrollToNow (ev) {
</script>

<style lang="scss">
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

.agenda-quickaccess {
width: 300px;

Expand Down Expand Up @@ -252,6 +255,10 @@ function scrollToNow (ev) {
text-align: center;
margin-top: 12px;

@at-root .theme-dark & {
border-color: $secondary;
}

@media screen and (max-width: 1350px) {
flex-direction: column;
}
Expand All @@ -267,6 +274,11 @@ function scrollToNow (ev) {
background-color: #FFF;
transform: translate(-50%, 0);
text-transform: uppercase;

@at-root .theme-dark & {
background-color: $gray-900;
color: #FFF;
}
}

button {
Expand Down
Loading
Loading