diff options
| -rw-r--r-- | app/model/Theme.php | 31 | ||||
| -rw-r--r-- | app/views/partials/navigator.php | 87 | ||||
| -rw-r--r-- | app/views/snippets/stylesheets.php | 4 | ||||
| -rw-r--r-- | bootstrap/Bootstrap.php | 6 | ||||
| -rw-r--r-- | public/css/tdro-dark.css | 40 |
5 files changed, 168 insertions, 0 deletions
diff --git a/app/model/Theme.php b/app/model/Theme.php new file mode 100644 index 0000000..36a4c6f --- /dev/null +++ b/app/model/Theme.php @@ -0,0 +1,31 @@ +<?php + +class Theme +{ + public function dark() + { + return $darkTheme = $_COOKIE['darkTheme'] ?? null; + } + + public function set($theme) + { + $time = time()+3600*24*365*10; + + if ($theme === null) { + setcookie('darkTheme', 'on', $time, '/'); + return $_COOKIE['darkTheme'] = 'on'; + } + + setcookie('darkTheme', null, $time, '/'); + return $_COOKIE['darkTheme'] = null; + } + + public function toggle() + { + $toggle = $_GET['toggle'] ?? null; + + if ($toggle === 'theme') { + $theme = $this->set($this->dark()); + } + } +} diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php index 24f9794..6a9cc94 100644 --- a/app/views/partials/navigator.php +++ b/app/views/partials/navigator.php @@ -77,6 +77,50 @@ <div class="columns is-centered has-margin-bottom-none"> + <div class="navbar__left column"> + <a href="https://www.thedroneely.com/git/explore/repos" + class="brand__custom is-inline-block"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' . '/public/css/fonts/feather-icons/terminal.svg' + ) ?> + </a> + + <div class="navbar__separator is-inline-block"></div> + + <div class ="is-inline-block theme-toggle"> + <form method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> + <button class="theme-toggle-button button is-text" + name="toggle" type="submit" value="theme"> + + <?php if($theme->dark()) { ?> + + <span class="theme-toggle-sun"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' + . '/public/css/fonts/feather-icons/sun.svg' + ) ?> + </span> + + <?php } else { ?> + + <span class="theme-toggle-moon"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' + . '/public/css/fonts/feather-icons/moon.svg' + ) ?> + </span> + + <?php } ?> + + </button> + </form> + </div> + + </div> + <div class="navbar__left column is-2"> <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.home.php'; ?> @@ -87,6 +131,18 @@ . '/..' . '/app/views/partials/navigator.links.php'; ?> </div> + <div class="navbar__right column"> + <a href ="https://ko-fi.com/thedroneely" + class="navbar-item coffee button is-success + is-outlined is-inline-flex"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' . '/public/css/fonts/feather-icons/coffee.svg' + ) ?> + <span>Coffee</span> + </a> + </div> + </div> </div> @@ -103,5 +159,36 @@ <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.links.php'; ?> + <div class ="theme-toggle"> + <form method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> + <button class="theme-toggle-button button is-text has-text-centered is-block" + name="toggle" type="submit" value="theme"> + + <?php if ($theme->dark()) { ?> + + <span class="theme-toggle-sun"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' + . '/public/css/fonts/feather-icons/sun.svg' + ) ?> + </span> + + <?php } else { ?> + + <span class="theme-toggle-moon"> + <?php echo file_get_contents( + $_SERVER['DOCUMENT_ROOT'] + . '/..' + . '/public/css/fonts/feather-icons/moon.svg' + ) ?> + </span> + + <?php } ?> + + </button> + </form> + </div> + </div> </nav> diff --git a/app/views/snippets/stylesheets.php b/app/views/snippets/stylesheets.php index 9449c8a..45f9a27 100644 --- a/app/views/snippets/stylesheets.php +++ b/app/views/snippets/stylesheets.php @@ -1 +1,5 @@ <link rel="stylesheet" href="/css/tdro.css"> + +<?php if ($theme->dark()) { ?> +<link rel="stylesheet" href="/css/tdro-dark.css"> +<?php } ?> diff --git a/bootstrap/Bootstrap.php b/bootstrap/Bootstrap.php index 39e6c08..02d9395 100644 --- a/bootstrap/Bootstrap.php +++ b/bootstrap/Bootstrap.php @@ -14,3 +14,9 @@ $router = new Router; /* create navigator */ $navigation = new Navigation(); + +/* create new theme */ +$theme = new Theme; + +/* enable dark and light themes */ +$theme->toggle(); diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css new file mode 100644 index 0000000..f53213a --- /dev/null +++ b/public/css/tdro-dark.css @@ -0,0 +1,40 @@ +/* dark theme */ + +html { background-color: #1F364D; } +body { color: #cad6e2; } +a, .footer__section svg:hover { color: #75b2f0; } +a.navbar-item:hover { color: #fff; } +.navbar-item, .subtitle, .has-text-grey-dark { color: #ddd !important; } +.navbar__active { color: #75b2f0 !important; } +.navbar-end > a.navbar-item:hover { background-color: #4698EA; color: #fff !important; } +.has-text-danger { color: #ff8f93 !important; } +.has-text-primary { color: #a6c9e8 !important; } +.footer__section a { color: #bbb; } +.footer { box-shadow: 0px -10px 25px 0px rgba(0,0,0,0.08); } +.navbar { background-color: #1F364D; box-shadow: 0 4px 12px 0 rgba(0,0,0,.15); background-color: rgba(31, 54, 77, 0.95); } +.title, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #ffffff; } +.button.is-link.is-outlined, .button.is-success.is-outlined { border-color: #627e8d; color: white; border-width: 2px; } +.input, .textarea { background-color: #2c4c6d; border-color: transparent; color: white; } +.brand__custom { background-color: white; color: black; } +.page__tags { background-color: #75b2f0; color: #212121; } +.message__success { background-color: #55a1ec; border: 1px solid #1259a1; color: black; } +.pagination-link.is-current { background-color: #1f364d; border-color: #75b2f0; color: #fff; } +.pagination-previous, .pagination-next, .pagination-link { border-color: #4d6879; color: #cad6e2; min-width: 2.25em; } +.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { color: #cad6e2; } +.pagination-previous[disabled], .pagination-next[disabled], .pagination-link[disabled] { background-color: #4d6879; border-color: #4d6879; color: #fff; } +@media screen and (min-width: 1088px) { .navbar__active { border-bottom: 2px solid #627e8d !important; color: white !important; } } +@media screen and (min-width: 1088px) { a.navbar-item:hover { border-bottom: 2px solid #627e8d; } } +@media screen and (max-width: 1087px) { .navbar-end { background-color: #1f364d; } } +@media screen and (max-width: 1087px) { .theme-toggle-button { background-color: #3d6b99 !important; } } +#isso-thread > h4 { color: #b7c7d7; } +#isso-thread .textarea.placeholder { color: #cad6e2; } +.isso-postbox > .form-wrapper > .auth-section .input-wrapper input { background-color: #2c4c6d; color: white; } +.isso-postbox > .form-wrapper .textarea, .isso-postbox > .form-wrapper .preview { background-color: #2c4c6d; } +.isso-comment > div.text-wrapper > .isso-comment-header .author { color: #fff; } +.isso-feedlink:hover, .isso-comment > div.text-wrapper > .isso-comment-footer a:hover { background-color: #34597f; color: white; } +.isso-comment-footer .upvote svg, .isso-comment-footer .downvote svg { fill: white }; +input::-moz-placeholder, textarea::-moz-placeholder { color: #cad6e2; } +input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cad6e2; } +input:-moz-placeholder, textarea:-moz-placeholder { color: #cad6e2; } +input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cad6e2; } +.isso-postbox > .form-wrapper > .auth-section .post-action > input { border: 1px solid #557181; background-color: #1f364d; color: white; } |