diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index 4e0b279661..c5ba332d02 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/app/assets/stylesheets/base.css.scss @@ -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"; diff --git a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss index 9aeee3f1aa..de7b3df1bf 100644 --- a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss +++ b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss @@ -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; diff --git a/app/assets/stylesheets/components/code_listing.css.scss b/app/assets/stylesheets/components/code_listing.css.scss index 0c7589a02a..e179477d81 100644 --- a/app/assets/stylesheets/components/code_listing.css.scss +++ b/app/assets/stylesheets/components/code_listing.css.scss @@ -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; } diff --git a/app/assets/stylesheets/layout/footer.css.scss b/app/assets/stylesheets/layout/footer.css.scss index 7a96fd756c..38d9e3f248 100644 --- a/app/assets/stylesheets/layout/footer.css.scss +++ b/app/assets/stylesheets/layout/footer.css.scss @@ -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; } diff --git a/app/assets/stylesheets/layout/navbar.css.scss b/app/assets/stylesheets/layout/navbar.css.scss index d1d3289e62..e9f072e8d2 100644 --- a/app/assets/stylesheets/layout/navbar.css.scss +++ b/app/assets/stylesheets/layout/navbar.css.scss @@ -165,7 +165,7 @@ $navbar-height: 50px; &.active { padding-bottom: 8px; - border-bottom: solid #fff 3px; + border-bottom: solid $on-primary 3px; } } } @@ -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; diff --git a/app/assets/stylesheets/mails.sass.scss b/app/assets/stylesheets/mails.sass.scss index 2cc5eb1e9c..03f709129e 100644 --- a/app/assets/stylesheets/mails.sass.scss +++ b/app/assets/stylesheets/mails.sass.scss @@ -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 { diff --git a/app/assets/stylesheets/models/course.css.scss b/app/assets/stylesheets/models/course.css.scss index 61b9fc09a5..9154b77fd0 100644 --- a/app/assets/stylesheets/models/course.css.scss +++ b/app/assets/stylesheets/models/course.css.scss @@ -84,6 +84,7 @@ font-size: 13px; font-weight: 500; color: $text-disabled; + opacity: 75%; } .nav>li>a.active, @@ -91,11 +92,13 @@ 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%; } } diff --git a/app/assets/stylesheets/theme/m3-theme-dark.css.scss b/app/assets/stylesheets/theme/m3-theme-dark.css.scss new file mode 100644 index 0000000000..0f9413e524 --- /dev/null +++ b/app/assets/stylesheets/theme/m3-theme-dark.css.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/theme/m3-theme-light.css.scss b/app/assets/stylesheets/theme/m3-theme-light.css.scss index aa37ec4068..52ffdae638 100644 --- a/app/assets/stylesheets/theme/m3-theme-light.css.scss +++ b/app/assets/stylesheets/theme/m3-theme-light.css.scss @@ -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; +} diff --git a/app/assets/stylesheets/theme/theme-dark.css.scss b/app/assets/stylesheets/theme/theme-dark.css.scss deleted file mode 100644 index c9843049be..0000000000 --- a/app/assets/stylesheets/theme/theme-dark.css.scss +++ /dev/null @@ -1,95 +0,0 @@ -// importing this file has no effect -// you have to explicitly call @include theme-dark -@mixin theme-dark { - $color-red: $red-800 !global; - $color-pink: $pink-800 !global; - $color-deep-purple: $deep-purple-800 !global; - $color-indigo: $indigo-800 !global; - $color-teal: $teal-800 !global; - $color-orange: $deep-orange-800 !global; - $color-brown: $brown-800 !global; - $color-blue-grey: $blue-grey-700 !global; - - $body-bg: $blue-grey-800 !global; - $content-bg: $blue-grey-900 !global; - $text-color: $white-text !global; - $body-color: $text-color !global; - $text-disabled: $white-disabled !global; - $text-secondary: $white-secondary !global; - $hairlinegray: $white-divider !global; -} - -@mixin theme-dark-other { - $secondary: $blue-grey-800 !global; - $dropdown-link-color: $text-color !global; - $dropdown-border-color: $hairlinegray !global; - $dropdown-divider-bg: $hairlinegray !global; - $dropdown-link-hover-color: $text-color !global; - $dropdown-link-hover-bg: $body-bg !global; - - $input-bg: $content-bg !global; - $input-color: $text-color !global; - $input-disabled-bg: $body-bg !global; - - $pre-bg: $content-bg !global; - $pre-color: $text-color !global; - - $code-light-bg: $body-bg !global; - $code-warning-border-left: 0.5em !global; - - $table-border-color: $hairlinegray !global; - $table-bg-accent: $body-bg !global; - - $nav-link-hover-bg: darken($body-bg, 3%) !global; - $nav-tabs-border-color: $hairlinegray !global; - - $modal-content-bg: $content-bg !global; - $modal-content-border-color: $hairlinegray !global; - $modal-header-border-color: $hairlinegray !global; - - $pagination-bg: $content-bg !global; - $pagination-hover-bg: $content-bg !global; - $pagination-disabled-bg: $content-bg !global; - - $panel-bg: $body-bg !global; - $panel-default-heading-bg: $body-bg !global; - $panel-default-text: $text-color !global; - $panel-default-border: $content-bg !global; - - // other overrides - $text-muted: $white-secondary !global; - - // custom elements - $btn-hover-background: $body-bg !global; - $btn-active-background: $body-bg !global; - $toggle-btn-active-bg: $body-bg !global; - $toggle-btn-bg: $content-bg !global; - - $drawer-hover: $body-bg !global; - $drawer-active: $body-bg !global; - - $skeleton-color: $body-bg !global; - - $footer-bg: $blue-grey-900 !global; - - $heatmap-empty-fg: $body-bg !global; - - $table-hover-bg: $body-bg !global; - - $input-group-addon-bg: $grey-800 !global; - $input-group-addon-border-color: lighten($input-group-addon-bg, 10%) !global; - - $form-select-indicator-color: $text-color !global; - - .light-only { - display: none; - } - - .dark-only { - display: unset; - } - - .input-group input { - border-color: $input-group-addon-border-color; - } -} diff --git a/app/assets/stylesheets/theme/theme-light.css.scss b/app/assets/stylesheets/theme/theme-light.css.scss deleted file mode 100644 index 76bd185c23..0000000000 --- a/app/assets/stylesheets/theme/theme-light.css.scss +++ /dev/null @@ -1,127 +0,0 @@ -//@import "theme/theme-dark.css.scss"; -@import "theme/m3-theme.css.scss"; - - -/* -$primary-bg: $accent-200; -$success-bg: $success-200; -$danger-bg: $danger-200; -$warning-bg: $warning-200; -$info-bg: $info-200; -$body-bg: $grey-50; -$content-bg: white; -$text-color: $black-text; -$text-on-bg-color: rgba(0, 0, 0, 0.75); -$text-secondary-on-bg-color: rgba(0, 0, 0, 0.60); -$body-color: $text-color; -$color-contrast-dark: $text-color; -$text-disabled: $black-disabled; -$text-secondary: $black-secondary; -$hairlinegray: $black-divider; -*/ - -@if $theme ==dark { - @include theme-dark; -} - -//$code-bg-warning: $amber-500; -$code-warning-border-left: 0; // TODO: find out where this is used and if it is needed. -//$code-color: $text-color; -//$page-header-border-color: $black-divider; -//$panel-primary-heading-bg: $primary-500; -//$panel-primary-border: $primary-500; - -//$navbar-default-bg: $primary-500; -//$navbar-default-color: $white-text; -//$navbar-default-link-color: $white-text; -//$navbar-default-link-hover-color: $white-secondary; - -//$navbar-default-link-active-bg: lighten($navbar-default-bg, 6.5%); -//$navbar-default-toggle-icon-bar-bg: $white-text; -//$navbar-default-toggle-border-color: $white-secondary; -//$navbar-default-toggle-hover-bg: $primary-300; -//$navbar-default-border: transparent; - -//$modal-backdrop-bg: white; -//$modal-backdrop-opacity: 0.35; -//$modal-content-border-color: white; - -//$popover-border-color: $grey-100; -//$popover-title-bg: $grey-100; - -//$mark-bg: $primary-300; - -//$dropdown-bg: $content-bg; - -//$form-check-input-border: 1px solid $text-secondary; - -//$list-group-bg: $content-bg; - -// Custom elements -//$divider-color: $hairlinegray; -//$border-color: $hairlinegray; - -//$btn-accent: $accent-800; -//$btn-hover-background: $grey-300; -//$btn-active-background: $grey-100; -//$toggle-btn-border: $grey-300; -//$toggle-btn-active-border: $grey-400; -//$toggle-btn-active-bg: $grey-300; -//$toggle-btn-bg: default; - -//$danger-fg: $danger-800; -//$success-fg: $success-800; - -//$header-bg: $primary-700; -//$header-fg: $white-text; -//$header-fg-secondary: $white-secondary; - -//$footer-fg-hover: $white-text; -//$footer-fg: $grey-500; -//$footer-bg: $grey-800; - -//$alert-fg: $white-text; -//$alert-secondary: $white-secondary; - -//$home-lead-fg: $white-text; -//$home-lead-bg: $primary-900; - -//$getting-started-bg: $accent-800; -//$getting-started-fg: $white-text; - -//$drawer-bg: black; -//$drawer-hover: $grey-100; -//$drawer-active: $grey-200; - -//$toast-bg: $grey-800; -//$toast-fg: $white-text; -//$toast-spinner-bg: white; -//$toast-inner-shadow: $black-divider; -//$toast-outer-shadow: $black-disabled; - -//$callout-border: $grey-200; - -//$label-text: $grey-100; - -//$progress-bar-bg: $accent-A100; - -//$spinner-bg: $grey-300; - -//$course-link-hover-color: $grey-700; - -//$heatmap-empty-fg: $grey-50; -//$heatmap-hover-fg: $grey-200; - -//$table-hover-bg: $grey-50; - -.dark-only { - display: none; -} - -.light-only { - display: unset; -} - -@if $theme ==dark { - @include theme-dark-other; -}