diff --git a/OliverBooth/Data/SiteTheme.cs b/OliverBooth/Data/SiteTheme.cs deleted file mode 100644 index 2c610d3..0000000 --- a/OliverBooth/Data/SiteTheme.cs +++ /dev/null @@ -1,22 +0,0 @@ -namespace OliverBooth.Data; - -/// -/// An enumeration of site themes. -/// -public enum SiteTheme -{ - /// - /// Dark mode. - /// - Dark, - - /// - /// Light mode. - /// - Light, - - /// - /// Follow system settings. - /// - Auto -} diff --git a/OliverBooth/Pages/Shared/_Layout.cshtml b/OliverBooth/Pages/Shared/_Layout.cshtml index 06ea234..22bcae4 100644 --- a/OliverBooth/Pages/Shared/_Layout.cshtml +++ b/OliverBooth/Pages/Shared/_Layout.cshtml @@ -2,7 +2,6 @@ @using OliverBooth.Common.Data.Blog @using OliverBooth.Common.Data.Web @using OliverBooth.Common.Services -@using OliverBooth.Data @using OliverBooth.Extensions @inject IBlogPostService BlogPostService @inject ITutorialService TutorialService @@ -10,15 +9,9 @@ @{ HttpRequest request = Context.Request; var url = new Uri($"{request.Scheme}://{request.Host}{request.Path}{request.QueryString}"); - SiteTheme siteTheme = request.Cookies["_theme"] switch - { - "dark" => SiteTheme.Dark, - "light" => SiteTheme.Light, - _ => SiteTheme.Auto - }; } - "dark" })"> + @@ -68,21 +61,7 @@ - @switch (siteTheme) - { - case SiteTheme.Dark: - - break; - - case SiteTheme.Light: - - break; - - default: - - - break; - } + @@ -90,7 +69,7 @@

- Oliver Booth + Oliver Booth Oliver Booth

diff --git a/OliverBooth/Properties/launchSettings.json b/OliverBooth/Properties/launchSettings.json index 20e8e43..3012f63 100644 --- a/OliverBooth/Properties/launchSettings.json +++ b/OliverBooth/Properties/launchSettings.json @@ -4,7 +4,7 @@ "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { - "applicationUrl": "http://*:5000", + "applicationUrl": "http://localhost:5000", "sslPort": 2845 } }, @@ -14,7 +14,7 @@ "dotnetRunMessages": true, "launchBrowser": false, "workingDirectory": "bin/Debug/net8.0/", - "applicationUrl": "https://*:2845", + "applicationUrl": "https://localhost:2845", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/src/img/ob-256x256-dark.png b/src/img/ob-256x256-dark.png deleted file mode 100644 index bbc4b9a..0000000 Binary files a/src/img/ob-256x256-dark.png and /dev/null differ diff --git a/src/scss/_prism-vs.scss b/src/scss/_prism-vs.scss deleted file mode 100644 index cb44208..0000000 --- a/src/scss/_prism-vs.scss +++ /dev/null @@ -1,88 +0,0 @@ -code[class*="language-"] { - font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - background: $background; - color: $foreground; -} - -.token { - &.punctuation { - color: $foreground; - } - - &.comment { - color: $comment; - } - - &.string { - color: $string; - } - - &.function { - color: $function; - } - - &.class-name { - color: $class-name; - } - - &.doctype, &.prolog { - color: $doctype; - } - - &.keyword { - color: $keyword; - } - - &.preprocessor.property { - color: $preprocessor-property; - - .keyword { - color: $preprocessor-property; - } - } - - &.selector { - color: $css-selector; - } - - &.atrule { - color: $atrule; - } - - &.tag { - color: $markup-tag; - } - - &.attr-name { - color: $attr-name; - } - - &.attr-value { - color: $markup-attr-value; - } -} - -// CSS -code[class*="language-css"] { - color: $css-foreground; - - .token { - - &.property { - color: $css-property; - } - - &.string { - color: $css-foreground; - } - } -} - -// Markup -code[class*="language-markup"] { - .token { - &.punctuation { - color: $markup-punctuation; - } - } -} diff --git a/src/scss/app.dark.scss b/src/scss/app.dark.scss deleted file mode 100644 index 1153d0f..0000000 --- a/src/scss/app.dark.scss +++ /dev/null @@ -1,132 +0,0 @@ -@use "sass:color"; -@import "colors"; - -html, body { - background: $background-dark; - color: $foreground-dark; -} - -#site-title { - a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - - * { - color: $ui-foreground-dark; - } - } - } -} - -nav ul.site-nav li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - } -} - -ul.contact-reasons li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - } -} - -.card { - background: $card-background-dark; - color: $ui-foreground-dark; - - a.btn, button { - color: $ui-foreground-dark; - } -} - -article { - background: $content-background-dark; -} - -main.container { - background: $content-background-dark; -} - -a { - &:link, &:visited, &:hover, &:active { - color: $link-text-dark; - } - - &:hover { - color: $link-hover-dark; - } -} - -a.brand-mastodon { - &:hover { - color: $ui-foreground-dark; - } -} - -hr.page-separator { - border-top: 5px dashed $ui-foreground-dark; -} - -article blockquote { - border-left: 2px solid $blockquote-dark; -} - -.project-card { - background: $project-background-dark; - - a { - &:link, &:visited, &:hover &:active { - color: $ui-foreground-dark; - } - } - - p.project-title { - background-color: rgba($project-background-dark, 50%); - } -} - -code:not([class*="language-"]) { - background: #1e1e1e !important; - color: #dcdcda !important; -} - -a:link, a:visited, a:active { - code:not([class*="language-"]) { - color: $link-text-dark !important; - } -} - -a:hover { - code:not([class*="language-"]) { - color: $link-hover-dark !important; - } -} - -a.brand-linkedin { - &:hover { - color: $ui-foreground-dark; - } -} - -pre { - background: #1e1e1e !important; - - code mark, code mark span { - background: #d8ba76 !important; - } -} - -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem $ui-foreground-dark, 0 0 0 0.25rem #258cfb; -} - -.keystroke { - background: color.adjust($foreground-dark, $lightness: -20%); - color: $background-dark; - border: color.adjust($foreground-dark, $lightness: -30%); -} - -.mastodon-update-card.card { - background-color: desaturate(darken(#6364FF, 50%), 50%); - color: #fff; -} diff --git a/src/scss/app.light.scss b/src/scss/app.light.scss deleted file mode 100644 index f76a7e3..0000000 --- a/src/scss/app.light.scss +++ /dev/null @@ -1,140 +0,0 @@ -@use "sass:color"; -@import "colors"; - -html, body { - background: $background-light; - color: $foreground-light; -} - -#site-title { - a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - - * { - color: $ui-foreground-light; - } - } - } -} - -nav ul.site-nav li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - } -} - -ul.contact-reasons li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - } -} - -.card { - background: $card-background-light; - color: $ui-foreground-light; - - a.btn, button { - color: $ui-foreground-light; - } -} - -article { - background: $content-background-light; -} - -main.container { - background: $content-background-light; -} - -a.brand-mastodon { - &:hover { - color: $ui-foreground-light; - } -} - -a { - &:link, &:visited, &:hover, &:active { - color: $link-text-light; - } - - &:hover { - color: $link-hover-light; - } -} - -hr.page-separator { - border-top: 5px dashed $ui-foreground-light; -} - -article blockquote { - border-left: 2px solid $blockquote-light; -} - -.project-card { - background: $project-background-light; - - a { - &:link, &:visited, &:hover &:active { - color: $ui-foreground-light; - } - } - - p.project-title { - background-color: rgba($project-background-light, 50%); - } -} - -code:not([class*="language-"]) { - background: #dcdcda !important; - color: #1e1e1e !important; -} - -a:link, a:visited, a:hover, a:active { - code:not([class*="language-"]) { - color: $link-text-light !important; - } -} - -a:hover { - code:not([class*="language-"]) { - color: $link-hover-light !important; - } -} - -a.brand-linkedin { - &:hover { - color: $ui-foreground-light; - } -} - -pre { - background: #ffffff !important; - - code mark, code mark span { - background: #ffff00 !important; - } -} - -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem $ui-foreground-light, 0 0 0 0.25rem #258cfb; -} - -.keystroke { - background: color.adjust($foreground-light, $lightness: -20%); - color: $background-light; - border: color.adjust($foreground-light, $lightness: -30%); -} - -.mastodon-update-card.card { - background-color: #6364FF; - color: $ui-foreground-dark; - - .text-muted abbr { - color: $ui-foreground-dark; - } - - a:link, a:visited, a:hover, a:active { - color: $ui-foreground-dark; - } -} \ No newline at end of file diff --git a/src/scss/app.scss b/src/scss/app.scss index 19a9c68..b78c93b 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -4,17 +4,11 @@ @import "blog"; html, body { + background: $background; + color: $foreground; font-size: 16px; } -@media (prefers-color-scheme: dark) { - @import "app.dark"; -} - -@media (prefers-color-scheme: light) { - @import "app.light"; -} - @media (min-width: 768px) { html { font-size: 16px; @@ -22,12 +16,19 @@ html, body { } .keystroke { + background: color.adjust($foreground, $lightness: -20%); + color: $background; border-radius: 2px; + border: color.adjust($foreground, $lightness: -30%); box-shadow: #2b2b2b 2px 2px; font-size: 12px; padding: 2px 4px; } +.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { + box-shadow: 0 0 0 0.1rem $ui-foreground, 0 0 0 0.25rem #258cfb; +} + html { position: relative; min-height: 100%; @@ -38,6 +39,7 @@ body { } main.container { + background: #333; padding: 20px; border-radius: 5px; } @@ -45,6 +47,11 @@ main.container { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $link-text; + } + + &:hover { + color: $link-hover; } } @@ -52,16 +59,19 @@ a { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; * { font-family: 'Roboto Mono', monospace; text-decoration: none; + color: $ui-foreground; } } } } hr.page-separator { + border-top: 5px dashed $ui-foreground; opacity: 1; margin: 50px 0; } @@ -88,6 +98,7 @@ ul.contact-reasons { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; } &:hover { @@ -97,6 +108,15 @@ ul.contact-reasons { } } +.card { + background: #212121; + color: $ui-foreground; + + a.btn, button { + color: $ui-foreground; + } +} + nav { margin: 0 auto; max-width: 960px; @@ -120,6 +140,7 @@ nav { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; } &:hover { @@ -135,6 +156,7 @@ nav { } article { + background: $content-background; padding: 20px; border-radius: 5px; @@ -143,6 +165,7 @@ article { } blockquote { + border-left: 2px solid $blockquote; padding-left: 10px; } @@ -162,7 +185,7 @@ article { abbr { text-decoration: none; - border-bottom: 1px dotted $link-hover-dark; + border-bottom: 1px dotted $link-hover; } span.timestamp { @@ -174,6 +197,7 @@ article { .project-card { position: relative; + background: $project-background; box-shadow: 0 0 15px rgba(0, 0, 0, .1); &:hover { @@ -199,6 +223,12 @@ article { transition: transform 500ms; } + a { + &:link, &:visited, &:hover &:active { + color: $ui-foreground; + } + } + p.project-title { font-size: 1em; transition: font-size 500ms, margin 500ms; @@ -207,20 +237,37 @@ article { width: 100%; margin: -34px 0 0; padding: 5px; + background-color: rgba($project-background, 50%); } } } code:not([class*="language-"]) { + background: #1e1e1e !important; + color: #dcdcda !important; font-size: inherit !important; padding: 3px; } +a:link, a:visited, a:hover, a:active { + code:not([class*="language-"]) { + color: #03a9f4 !important; + } +} + +a:hover { + code:not([class*="language-"]) { + color: #fff !important; + } +} + pre { + background: #1e1e1e !important; border-radius: 5px; font-size: 0.9em !important; code mark, code mark span { + background: #d8ba76 !important; color: #000 !important; } } @@ -304,12 +351,22 @@ a.bmc-btn { a.brand-mastodon { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: #5a48dd; + } + + &:hover { + color: #fff; } } a.brand-linkedin { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: #0077b5; + } + + &:hover { + color: #fff; } } @@ -328,6 +385,38 @@ td.trim-p p:last-child { margin-bottom: 0; } +#usa-countdown { + background-image: url('/img/us-flag-cover_512x166.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 10px; + cursor: pointer; + + * { + cursor: pointer; + } + + .usa-countdown-element { + margin: 10px 0; + padding: 5px; + font-family: "Gabarito", sans-serif; + font-weight: 500; + text-align: center; + font-size: 3em; + border-right: 2px solid #fff; + border-left: 2px solid #fff; + + &:first-child { + border-left: none; + } + + &:last-child { + border-right: none; + } + } +} + .post-tags a.badge { transition: color 250ms, background-color 250ms; @@ -337,7 +426,7 @@ td.trim-p p:last-child { } &:hover { - color: $accent-dark; + color: $accent; background-color: #1E1E1E !important; } } @@ -374,13 +463,8 @@ td.trim-p p:last-child { } } -@media (prefers-color-scheme: dark) { -} - -@media (prefers-color-scheme: light) { -} - .mastodon-update-card.card { + background-color: desaturate(darken(#6364FF, 50%), 50%); margin-bottom: 20px; border-radius: 3px; border: none; @@ -459,11 +543,6 @@ td.trim-p p:last-child { } } -button#theme-switch { - width: 42pt; - height: 42pt; -} - @keyframes headshot-spin-start { 0% { transform: rotateY(0) scale(1.0); @@ -488,4 +567,4 @@ button#theme-switch { transform: scale(1.0); box-shadow: none; } -} +} \ No newline at end of file diff --git a/src/scss/blog.scss b/src/scss/blog.scss index 83705e0..0bfc55f 100644 --- a/src/scss/blog.scss +++ b/src/scss/blog.scss @@ -1,21 +1,9 @@ -$blog-card-bg-dark: #333333; -$blog-card-bg-light: #ffffff; +$blog-card-bg: #333333; $blog-card-gutter: 20px; $border-radius: 3px; -@media (prefers-color-scheme: dark) { - div.blog-card { - background-color: $blog-card-bg-dark; - } -} - -@media (prefers-color-scheme: light) { - div.blog-card { - background-color: $blog-card-bg-light; - } -} - div.blog-card { + background: $blog-card-bg; margin-bottom: $blog-card-gutter; padding: $blog-card-gutter; border-radius: $border-radius; diff --git a/src/scss/colors.scss b/src/scss/colors.scss index fa249fd..cdb4847 100644 --- a/src/scss/colors.scss +++ b/src/scss/colors.scss @@ -1,23 +1,12 @@ @use "sass:color"; -$background-dark: #121212; -$foreground-dark: #f5f5f5; -$accent-dark: #03a9f4; -$ui-foreground-dark: #ffffff; -$content-background-dark: #333333; -$blockquote-dark: #ff0033; -$project-background-dark: #000000; -$card-background-dark: #212121; -$link-text-dark: $accent-dark; -$link-hover-dark: lighten($link-text-dark, 50%); +$background: #121212; +$foreground: #f5f5f5; +$accent: #03a9f4; +$ui-foreground: #ffffff; +$content-background: #333333; +$blockquote: #ff0033; +$project-background: #000000; -$background-light: #dddddd; -$foreground-light: #0a0a0a; -$accent-light: #007ab1; -$ui-foreground-light: #000000; -$content-background-light: #ffffff; -$blockquote-light: #ff0033; -$project-background-light: #ffffff; -$card-background-light: #dedede; -$link-text-light: $accent-light; -$link-hover-light: lighten($link-text-light, 50%); +$link-text: $accent; +$link-hover: lighten($link-text, 50%); diff --git a/src/scss/markdown-callouts-light.scss b/src/scss/markdown-callouts-light.scss deleted file mode 100644 index 26d4a61..0000000 --- a/src/scss/markdown-callouts-light.scss +++ /dev/null @@ -1,183 +0,0 @@ -$callout-bg-blue: #e6f0fc; -$callout-bg-cyan: #e5f8f8; -$callout-bg-green: #e6f8ed; -$callout-bg-orange: #fdf1e5; -$callout-bg-red: #fdeaec; -$callout-bg-purple: #f1edfd; -$callout-bg-grey: #f5f5f5; - -$callout-fg-blue: #157aff; -$callout-fg-cyan: #53dfdd; -$callout-fg-green: #44cf6e; -$callout-fg-orange: #e9973f; -$callout-fg-red: #fb464c; -$callout-fg-purple: #a882ff; -$callout-fg-grey: #9e9e9e; - -.callout { - font-size: 16px; - border-radius: 5px; - padding: 20px; - margin-bottom: 1rem; - - .callout-title { - font-weight: bold; - margin-bottom: 1rem; - } - - p:last-child { - margin-bottom: 0; - } - - &.collapsible { - .callout-fold { - transform: rotate(180deg); - transition: transform 500ms; - margin-left: 0.5em; - - svg { - transform: rotate(180deg); - transition: transform 500ms; - } - } - - .callout-title { - cursor: pointer; - transition: margin-bottom 500ms; - } - - &.collapsed { - .callout-title { - margin-bottom: 0; - } - - .callout-fold svg { - transform: rotate(0deg); - } - } - } - - &[data-callout="note"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="abstract"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="info"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="todo"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="tip"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="important"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="success"] { - background-color: $callout-bg-green; - - .callout-title { - color: $callout-fg-green; - } - } - - &[data-callout="question"] { - background-color: $callout-bg-orange; - - .callout-title { - color: $callout-fg-orange; - } - } - - &[data-callout="warning"] { - background-color: $callout-bg-orange; - - .callout-title { - color: $callout-fg-orange; - } - } - - &[data-callout="failure"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="danger"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="bug"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="example"] { - background-color: $callout-bg-purple; - - .callout-title { - color: $callout-fg-purple; - } - } - - &[data-callout="cite"] { - background-color: $callout-bg-grey; - - .callout-title { - color: $callout-fg-grey; - } - } - - &[data-callout="update"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } -} - -svg.lucide { - width: 16px; -} diff --git a/src/scss/markdown-callouts-dark.scss b/src/scss/markdown-callouts.scss similarity index 100% rename from src/scss/markdown-callouts-dark.scss rename to src/scss/markdown-callouts.scss diff --git a/src/scss/markdown.scss b/src/scss/markdown.scss index ce71211..cb5b1e1 100644 --- a/src/scss/markdown.scss +++ b/src/scss/markdown.scss @@ -1,7 +1 @@ -@media (prefers-color-scheme: dark) { - @import "markdown-callouts-dark"; -} - -@media (prefers-color-scheme: light) { - @import "markdown-callouts-light"; -} \ No newline at end of file +@import "markdown-callouts"; diff --git a/src/scss/prism-vs-dark.scss b/src/scss/prism-vs-dark.scss deleted file mode 100644 index 10ea180..0000000 --- a/src/scss/prism-vs-dark.scss +++ /dev/null @@ -1,25 +0,0 @@ -$background: #1E1E1E; -$foreground: #DCDCDA; - -// C# -$comment: #23A658; -$string: #EA9D78; -$function: #A0D7A7; -$class-name: #13C9C6; -$keyword: #439CE2; -$preprocessor-property: #9B9B99; - -// Css -$atrule: $keyword; -$css-foreground: #C8C8C6; -$css-selector: #D8BA76; -$css-property: #67DCFF; - -// Markup (HTML, XML) -$doctype: $class-name; -$markup-tag: $keyword; -$attr-name: #87DCFF; -$markup-punctuation: #80807F; -$markup-attr-value: $css-foreground; - -@import "_prism-vs"; diff --git a/src/scss/prism-vs-light.scss b/src/scss/prism-vs-light.scss deleted file mode 100644 index 07cfbfd..0000000 --- a/src/scss/prism-vs-light.scss +++ /dev/null @@ -1,25 +0,0 @@ -$background: #FFFFFC; -$foreground:#000; - -// C# -$comment: #008016; -$string: #E11500; -$function: #785318; -$class-name: #0491C1; -$keyword: #3200FF; -$preprocessor-property: #80807F; - -// Css -$atrule:$keyword; -$css-foreground: #3200FF; -$css-selector: #B80000; -$css-property: $css-selector; - -// Markup (HTML, XML) -$doctype: $class-name ; -$markup-tag: $css-selector; -$attr-name: #FF0000; -$markup-punctuation: $keyword; -$markup-attr-value:$keyword; - -@import "_prism-vs"; \ No newline at end of file diff --git a/src/ts/SiteTheme.ts b/src/ts/SiteTheme.ts deleted file mode 100644 index e5b2a5f..0000000 --- a/src/ts/SiteTheme.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * An enumeration if site themes. - */ -enum SiteTheme { - /** - * Dark mode. - */ - DARK, - - /** - * Light mode. - */ - LIGHT, - - /** - * Follow system settings. - */ - AUTO -} - -export default SiteTheme; diff --git a/src/ts/UI.ts b/src/ts/UI.ts index b209ad2..554eb07 100644 --- a/src/ts/UI.ts +++ b/src/ts/UI.ts @@ -1,5 +1,4 @@ import TimeUtility from "./TimeUtility"; -import SiteTheme from "./SiteTheme"; declare const bootstrap: any; declare const katex: any; @@ -17,68 +16,6 @@ class UI { return script; } - /** - * Gets the user's current-requested site theme. - */ - public static getSiteTheme(): SiteTheme { - const theme = getCookie("_theme"); - switch (theme) { - case "dark": - return SiteTheme.DARK; - case "light": - return SiteTheme.LIGHT; - default: - return SiteTheme.AUTO; - } - - function getCookie(name: string): string { - name = `${name}=`; - const decodedCookie = decodeURIComponent(document.cookie); - const cookies = decodedCookie.split(';'); - - for (let index = 0; index < cookies.length; index++) { - let current = cookies[index]; - - while (current.charAt(0) == ' ') { - current = current.substring(1); - } - if (current.indexOf(name) == 0) { - return current.substring(name.length, current.length); - } - } - - return ""; - } - } - - /** - * Gets the user's current-requested site theme. - */ - public static setSiteTheme(theme: SiteTheme) { - const cookieName = "_theme"; - const expiryDays = 30; - - switch (theme) { - case SiteTheme.DARK: - setCookie(cookieName, "dark", expiryDays); - break; - case SiteTheme.LIGHT: - setCookie(cookieName, "light", expiryDays); - break; - case SiteTheme.AUTO: - setCookie(cookieName, "auto", expiryDays); - break; - } - - function setCookie(name: string, value: any, expiryDays: number) { - const date = new Date(); - date.setTime(date.getTime() + (expiryDays * 24 * 60 * 60 * 1000)); - - const expires = "expires=" + date.toUTCString(); - document.cookie = `${name}=${value};${expires};path=/`; - } - } - /** * Forces all UI elements under the given element to update their rendering. * @param element The element to search for UI elements in. diff --git a/src/ts/app.ts b/src/ts/app.ts index 0712967..bd3ca1e 100644 --- a/src/ts/app.ts +++ b/src/ts/app.ts @@ -75,10 +75,6 @@ declare const lucide: any; const favicon = document.querySelector("link[rel~=\"icon\"]"); // @ts-ignore favicon.href = `/img/${darkMode ? "favicon.png" : "favicon-dark.png"}`; - document.querySelector("html").dataset.bsTheme = darkMode ? "dark" : "light"; - - const siteLogo = document.getElementById("site-logo") as HTMLImageElement; - siteLogo.src = darkMode ? "/img/ob-256x256.png" : "/img/ob-256x256-dark.png"; } setFavicon();