Skip to content

Commit

Permalink
add dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
bmesuere committed Jun 6, 2022
1 parent 8a96d58 commit 8deba95
Show file tree
Hide file tree
Showing 11 changed files with 196 additions and 234 deletions.
9 changes: 6 additions & 3 deletions app/assets/stylesheets/base.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@

// 2. Include any default variable overrides here
@import "theme/m3-theme-light.css.scss";
@import "theme/m3-theme-dark.css.scss";

@if $theme =="dark" {
@include theme-dark;
}

@import "bootstrap_variable_overrides.css.scss";
@import "mixins.css.scss";
@import "vendor";

// also loads dark mode stuff
@import "theme/theme-light.css.scss";

@import "theme/rouge-light.css.scss";
@import "theme/rouge-dark.css.scss";

Expand Down
9 changes: 8 additions & 1 deletion app/assets/stylesheets/bootstrap_variable_overrides.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@
// primary, secondary, success, info, warning, danger and the variables for color names are already overridden in m3-theme-light

$body-bg: $background; // TODO: remove all uses
$content-bg: $background;
$content-bg: $surface;
$body-color: $on-background;
$link-color: $primary;
$text-secondary: $text-muted; // TODO: all uses of this can probably be replaced by text-muted
$text-disabled: $text-muted; // TODO: can probably be removed

// dropdowns
$dropdown-bg: $background;
$dropdown-color: $on-background;
$dropdown-link-color: $on-background;
$dropdown-link-hover-bg: $secondary-container;
$dropdown-link-hover-color: $on-secondary-container;

// disable rfs
$enable-rfs: false;

Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/code_listing.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ $annotation-info: $info;
// Highlight for the line numbers.
.lineno.marked {
background-color: $warning-container;
border-left: $code-warning-border-left solid $warning;
//border-left: $code-warning-border-left solid $warning;
// Only do the line number, don't extend to the full height
background-clip: content-box;
}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/layout/footer.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ $footer-height-sm: 180px;
flex-shrink: 0;
width: 100%;
padding: 32px;
color: $on-gray;
background-color: $gray;
color: $gray-80;
background-color: $gray-20;
height: $footer-height;
}

Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/layout/navbar.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ $navbar-height: 50px;

&.active {
padding-bottom: 8px;
border-bottom: solid #fff 3px;
border-bottom: solid $on-primary 3px;
}
}
}
Expand Down Expand Up @@ -282,7 +282,7 @@ $navbar-height: 50px;
float: none;
margin-top: 0;
margin-left: 20px;
background-color: $content-bg;
background-color: $background;
border: 0;
box-shadow: none;
color: $text-color;
Expand Down
4 changes: 1 addition & 3 deletions app/assets/stylesheets/mails.sass.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@import "theme/colors.css.scss";

$theme: "light";

@import "theme/theme-light.css.scss";
@import "theme/m3-theme-light.css.scss";
@import "theme/rouge-light.css.scss";

body {
Expand Down
3 changes: 3 additions & 0 deletions app/assets/stylesheets/models/course.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,18 +84,21 @@
font-size: 13px;
font-weight: 500;
color: $text-disabled;
opacity: 75%;
}

.nav>li>a.active,
.nav>li>a.active:hover {
border-left: 2px solid $secondary;
padding-left: 4px;
color: $text-secondary;
opacity: 100%;
}

.nav>li>a:hover {
border-left: 1px solid $secondary;
padding-left: 5px;
color: $text-secondary;
opacity: 100%;
}
}
164 changes: 164 additions & 0 deletions app/assets/stylesheets/theme/m3-theme-dark.css.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
// This file contains all "design tokens" according to material 3 in light mode.
// At the bottom of this file, there are a number of dodona-specific variables

@import "theme/m3-theme.css.scss";

@mixin theme-dark {

$primary: $primary-80 !global;
$primary-container: $primary-30 !global;
$on-primary: $primary-20 !global;
$on-primary-container: $primary-90 !global;

$secondary: $secondary-80 !global;
$secondary-container: $secondary-30 !global;
$on-secondary: $secondary-20 !global;
$on-secondary-container: $secondary-90 !global;

$tertiary: $tertiary-80 !global;
$tertiary-container: $tertiary-30 !global;
$on-tertiary: $tertiary-20 !global;
$on-tertiary-container: $tertiary-90 !global;

$surface: $neutral-20 !global;
$surface-variant: $neutral-variant-30 !global;
$background: $neutral-25 !global;
$on-surface: $neutral-90 !global;
$on-surface-variant: $neutral-variant-80 !global;
$on-background: $neutral-90 !global;

$outline: $neutral-variant-60 !global;
$divider: $surface-variant !global;
$shadow: $neutral-0 !global;
$surface-tint: $primary !global;
$inverse-surface: $neutral-90 !global;
$inverse-on-surface: $neutral-20 !global;
$inverse-primary: $primary-40 !global;

$info: $info-80 !global;
$info-container: $info-30 !global;
$on-info: $info-20 !global;
$on-info-container: $info-90 !global;

$success: $success-80 !global;
$success-container: $success-30 !global;
$on-success: $success-20 !global;
$on-success-container: $success-90 !global;

$danger: $danger-80 !global;
$danger-container: $danger-30 !global;
$on-danger: $danger-20 !global;
$on-danger-container: $danger-90 !global;

$warning: $warning-80 !global;
$warning-container: $warning-30 !global;
$on-warning: $warning-20 !global;
$on-warning-container: $warning-90 !global;

$red: $red-80 !global;
$red-container: $red-30 !global;
$on-red: $red-20 !global;
$on-red-container: $red-90 !global;

$pink: $pink-80 !global;
$pink-container: $pink-30 !global;
$on-pink: $pink-20 !global;
$on-pink-container: $pink-90 !global;

$purple: $purple-80 !global;
$purple-container: $purple-30 !global;
$on-purple: $purple-20 !global;
$on-purple-container: $purple-90 !global;

$deep-purple: $deep-purple-80 !global;
$deep-purple-container: $deep-purple-30 !global;
$on-deep-purple: $deep-purple-20 !global;
$on-deep-purple-container: $deep-purple-90 !global;

$indigo: $indigo-80 !global;
$indigo-container: $indigo-30 !global;
$on-indigo: $indigo-20 !global;
$on-indigo-container: $indigo-90 !global;

$blue: $blue-80 !global;
$blue-container: $blue-30 !global;
$on-blue: $blue-20 !global;
$on-blue-container: $blue-90 !global;

$light-blue: $light-blue-80 !global;
$light-blue-container: $light-blue-30 !global;
$on-light-blue: $light-blue-20 !global;
$on-light-blue-container: $light-blue-90 !global;

$cyan: $cyan-80 !global;
$cyan-container: $cyan-30 !global;
$on-cyan: $cyan-20 !global;
$on-cyan-container: $cyan-90 !global;

$teal: $teal-80 !global;
$teal-container: $teal-30 !global;
$on-teal: $teal-20 !global;
$on-teal-container: $teal-90 !global;

$green: $green-80 !global;
$green-container: $green-30 !global;
$on-green: $green-20 !global;
$on-green-container: $green-90 !global;

$light-green: $light-green-80 !global;
$light-green-container: $light-green-30 !global;
$on-light-green: $light-green-20 !global;
$on-light-green-container: $light-green-90 !global;

$yellow: $yellow-80 !global;
$yellow-container: $yellow-30 !global;
$on-yellow: $yellow-20 !global;
$on-yellow-container: $yellow-90 !global;

$amber: $amber-80 !global;
$amber-container: $amber-30 !global;
$on-amber: $amber-20 !global;
$on-amber-container: $amber-90 !global;

$orange: $orange-80 !global;
$orange-container: $orange-30 !global;
$on-orange: $orange-20 !global;
$on-orange-container: $orange-90 !global;

$deep-orange: $deep-orange-80 !global;
$deep-orange-container: $deep-orange-30 !global;
$on-deep-orange: $deep-orange-20 !global;
$on-deep-orange-container: $deep-orange-90 !global;

$brown: $brown-80 !global;
$brown-container: $brown-30 !global;
$on-brown: $brown-20 !global;
$on-brown-container: $brown-90 !global;

$gray: $gray-80 !global;
$gray-container: $gray-30 !global;
$on-gray: $gray-20 !global;
$on-gray-container: $gray-90 !global;

$blue-gray: $blue-gray-80 !global;
$blue-gray-container: $blue-gray-30 !global;
$on-blue-gray: $blue-gray-20 !global;
$on-blue-gray-container: $blue-gray-90 !global;

$off-surface: $neutral-20 !global;

$text-color: $on-background !global; // todo: if not used by bootstrap, rename or replace
$text-muted: $neutral-80 !global; // todo: if not used by bootstrap, rename to on-surface-muted

$code-bg: $neutral-20 !global;
$hairlinegray: $primary !global; // todo: some use this variable, others use $outline
$skeleton-color: $surface-variant !global;

.light-only {
display: none;
}

.dark-only {
display: unset;
}
}
9 changes: 9 additions & 0 deletions app/assets/stylesheets/theme/m3-theme-light.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -152,3 +152,12 @@ $text-muted: $neutral-40; // todo: if not used by bootstrap, rename to on-surfac
$code-bg: $neutral-95;
$hairlinegray: $primary; // todo: some use this variable, others use $outline
$skeleton-color: $surface-variant;

// this should be fixed using css and not in scss
.dark-only {
display: none;
}

.light-only {
display: unset;
}
95 changes: 0 additions & 95 deletions app/assets/stylesheets/theme/theme-dark.css.scss

This file was deleted.

Loading

0 comments on commit 8deba95

Please sign in to comment.