diff --git a/app/helpers.php b/app/helpers.php index 178ffa1..7eaafe0 100644 --- a/app/helpers.php +++ b/app/helpers.php @@ -32,6 +32,10 @@ function faker() { return $fac = Faker\Factory::create(); } +function dark_mode() { + return isset($_COOKIE["dark_mode"]); +} + /** * Recursively expand validation rules * diff --git a/public/images/logo-dark.svg b/public/images/logo-dark.svg new file mode 100644 index 0000000..d7f4480 --- /dev/null +++ b/public/images/logo-dark.svg @@ -0,0 +1,2 @@ + + diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 585e57f..c7fc012 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,4 +1,5 @@ { "/js/app.js": "/js/app.js", - "/css/app.css": "/css/app.css" + "/css/app.css": "/css/app.css", + "/css/app-dark.css": "/css/app-dark.css" } \ No newline at end of file diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 866d344..155c2be 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -65,6 +65,42 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function ( } }) +$(function () { + // theme switcher without reloading + + let themeStyle = $('#theme-style'); + const lightURL = themeStyle.data('light-url'); + const darkURL = themeStyle.data('dark-url'); + const navbar = $('.page-navbar'); + const logo = $('#navbar-logo'); + + window.toggleDarkMode = function () { + let newStyle = document.createElement('link'); + newStyle.rel = 'stylesheet'; + if (themeStyle.attr('href') === lightURL) { + newStyle.href = darkURL; + navbar.removeClass('navbar-light'); + navbar.addClass('navbar-dark'); + logo.attr('src', logo.data('src-dark')); + + document.cookie = "dark_mode=1"; + } else { + newStyle.href = lightURL; + navbar.removeClass('navbar-dark'); + navbar.addClass('navbar-light'); + logo.attr('src', logo.data('src-light')); + + document.cookie = "dark_mode=0;expires=" + new Date().toUTCString(); + } + + // remove old css after new css has loaded to prevent FOUC + let oldThemeStyle = themeStyle; + themeStyle = $(newStyle); + themeStyle.on('load', () => oldThemeStyle.remove()); + $(document.head).append(themeStyle); + }; +}); + window.Vue = require('vue'); Vue.component('column-editor', require('./components/ColumnEditor.vue')); diff --git a/resources/assets/sass/app-dark.scss b/resources/assets/sass/app-dark.scss new file mode 100644 index 0000000..89453ca --- /dev/null +++ b/resources/assets/sass/app-dark.scss @@ -0,0 +1,30 @@ +// Variables +$theme: dark; + +@import "bootstrap"; + +html { + overflow-y: scroll; +} + +@import "helpers"; +@import "fa-utils"; +@import "block-collapse"; +@import "form-help"; + +@import "bootstrap-customizations/paginate"; +@import "bootstrap-customizations/card"; +@import "bootstrap-customizations/tooltip"; +@import "bootstrap-customizations/navbar"; +@import "bootstrap-customizations/footer"; +@import "bootstrap-customizations/link"; +@import "bootstrap-customizations/border"; +@import "bootstrap-customizations/button"; +@import "bootstrap-customizations/responsive"; +@import "bootstrap-customizations/typography"; + +.bio-table { + td { + padding-top: dist(2); + } +} diff --git a/resources/assets/sass/bootstrap-customizations/_card.scss b/resources/assets/sass/bootstrap-customizations/_card.scss index 7587e02..368ba99 100644 --- a/resources/assets/sass/bootstrap-customizations/_card.scss +++ b/resources/assets/sass/bootstrap-customizations/_card.scss @@ -39,3 +39,7 @@ min-width: 1.5rem; text-align:center; } + +.card .auth-footer { + background-color: $body-bg; +} diff --git a/resources/assets/sass/bootstrap-customizations/_footer.scss b/resources/assets/sass/bootstrap-customizations/_footer.scss index eea3148..c41c569 100644 --- a/resources/assets/sass/bootstrap-customizations/_footer.scss +++ b/resources/assets/sass/bootstrap-customizations/_footer.scss @@ -2,5 +2,5 @@ .page-footer { font-size: 95%; background: $body-bg; - border-top: 2px dotted $gray-200; + border-top: 2px dotted $footer-separator-color; } diff --git a/resources/assets/sass/bootstrap-customizations/_navbar.scss b/resources/assets/sass/bootstrap-customizations/_navbar.scss index 622dbe2..f096883 100644 --- a/resources/assets/sass/bootstrap-customizations/_navbar.scss +++ b/resources/assets/sass/bootstrap-customizations/_navbar.scss @@ -1,6 +1,6 @@ // layout tweaks .page-navbar { - background: white; + background: $navbar-bg; border-bottom: 1px solid $primary; box-shadow: 0 -3px 8px rgba(black, 1); @@ -17,3 +17,23 @@ .dropdown-menu { box-shadow: 0 3px 4px 0 rgba(black, .1); } + +.dropdown-menu .dropdown-item.nav-link { + cursor: pointer; +} + +@if $theme == 'dark' { + .dropdown-menu .dark-mode-switch-on { + display: block; + } + .dropdown-menu .dark-mode-switch-off { + display: none; + } +} @else { + .dropdown-menu .dark-mode-switch-on { + display: none; + } + .dropdown-menu .dark-mode-switch-off { + display: block; + } +} diff --git a/resources/assets/sass/bootstrap-customizations/_variables.scss b/resources/assets/sass/bootstrap-customizations/_variables.scss index 91eb3c8..09a2d56 100644 --- a/resources/assets/sass/bootstrap-customizations/_variables.scss +++ b/resources/assets/sass/bootstrap-customizations/_variables.scss @@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg; $pagination-padding-y-sm: dist(1); $pagination-padding-x-sm: dist(3); + +$navbar-bg: white; + +$footer-separator-color: $gray-200; + +$theme: light !default; +@if $theme == dark { + // dark mode overrides + + $body-bg: $gray-900; + $body-color: $gray-100; + $text-muted: $gray-500; + $link-color: lighten($primary, 15%); + $link-hover-color: lighten($primary, 20%); + + $card-bg: $gray-800; + $list-group-bg: $gray-800; + $list-group-hover-bg: $gray-700; + $list-group-disabled-color: $gray-400; + $list-group-action-color: $gray-200; + $list-group-action-hover-color: $gray-200; + $list-group-action-active-bg: $gray-600; + $list-group-action-active-color: $gray-100; + + $tooltip-color: rgba($white, 0.9); + + $navbar-bg: lighten($gray-900, 2%); + $footer-separator-color: $gray-800; + + $close-color: $white; + + $input-bg: $gray-700; + $input-color: $gray-200; + $input-disabled-bg: $gray-900; + $input-border-color: $gray-600; + $input-focus-bg: $input-bg; + $input-focus-color: $input-color; + $input-group-addon-bg: $gray-800; + $input-group-addon-color: $input-color; + $input-group-addon-border-color: $input-border-color; + + $custom-select-color: $input-color; + $custom-select-bg: $input-bg; + $custom-select-disabled-bg: $input-disabled-bg; + $custom-select-indicator-color: $gray-300; + $custom-select-border-color: $input-border-color; + $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23"); + + $dropdown-bg: $gray-700; + $dropdown-link-color: $gray-300; + $dropdown-link-hover-color: lighten($gray-300, 5%); + $dropdown-link-hover-bg: $gray-800; + $dropdown-link-disabled-color: $gray-500; + $dropdown-header-color: $gray-400; + + $border-color: $gray-600; +} diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 94659a6..42250f9 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -31,7 +31,7 @@ -
+
…or authenticate with diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 58fc83f..a0d686e 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -37,7 +37,7 @@
-
+
You can also register by logging in with Google, GitHub, diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index bd7b9e5..ab5a257 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -14,7 +14,12 @@ - + diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php index 49de2af..74df2e6 100644 --- a/resources/views/layouts/main-nav.blade.php +++ b/resources/views/layouts/main-nav.blade.php @@ -1,9 +1,18 @@ {{-- Global navbar --}} -