Dark Theme for Tensorflow website (made to blend with dark breeze theme)
Tensorflow Dark Breeze by kajika
Details
Authorkajika
LicenseCC BY-SA - Creative Commons Attribution-ShareAlike
Categorytensorflow
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Tensorflow Dark Breeze
@namespace USO Archive
@author Kajika
@description `Dark theme for Tensorflow.org, made to blend nicely with breeze dark (KDE theme).Started from Matt Van Dyke7s tensorflow dark (WIP).`
@version 20190906.11.1
@license CC-BY-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("www.tensorflow.org") {
:root {
--main-bg-color: hsl(213, 10%, 17%);
--main-fg-color: #bbb;
--light-bg-color: hsl(213, 10%, 23%);
--light-fg-color: #ccc;
--lighter-bg-color: hsl(213, 10%, 29%);
--lighter-fg-color: #ddd;
--highlight-bg-color: hsl(213, 10%, 35%);
--highlight-fg-color: #eee;
--inactive-fg-color: #999;
--border-color: #666;
--border-secondary-color: #444;
--primary: hsl(33, 70%, 50%);
--secondary: #cf4c20;
--link-fg-color: hsl(215, 57%, 50%);
--notice-bg-color: hsl(200, 15%, 25%);
--notice-fg-color: hsl(200, 65%, 65%);
--announcement-bg-color: hsl(0, 15%, 25%);
--announcement-fg-color: hsl(0, 62%, 68%);
--devsite-body-background: var(--main-bg-color);
--devsite-heading-color: var(--lighter-fg-color);
--devsite-background-0: var(--lighter-bg-color);
--devsite-background-1: var(--main-bg-color);
--devsite-background-2: var(--light-bg-color);
--devsite-background-3: var(--light-bg-color);
--devsite-background-4: var(--lighter-bg-color);
--devsite-background-5: var(--lighter-bg-color);
--devsite-primary-text-color: var(--main-fg-color);
--devsite-primary-text-rgba: rgba(255, 255, 255, 255.87);
--devsite-secondary-text-color: #5f6368;
--devsite-secondary-text-rgba: rgba(255, 255, 255, 0.65);
--devsite-tertiary-text-color: #bdc1c6;
--devsite-tertiary-text-rgba: rgba(255, 255, 255, 0.26);
--devsite-inverted-text-color: #fff;
--devsite-inverted-text-rgba: hsla(0, 0%, 100%, 0.7);
--devsite-primary-border: 1px solid var(--border-color);
--devsite-secondary-border: 1px solid var(--border-secondary-color);
--devsite-elevation-key-shadow-color: rgba(60, 64, 67, 0.3);
--devsite-elevation-ambient-shadow-color: rgba(60, 64, 67, 0.15);
--devsite-elevation-inset-shadow-color: rgba(154, 160, 166, 0.5);
--tenant-background-1: var(--main-bg-color);
--tenant-background-2: var(--light-bg-color);
--tenant-background-3: var(--lighter-bg-color);
--tenant-primary-text-color: #202124;
--tenant-secondary-text-color: #5f6368;
--tenant-inverted-text-color: #fff;
--tenant-primary-border: 1px solid var(--border-color);
--tenant-secondary-border: 1px solid var(--border-secondary-color);
--devsite-link-background: var(--light-bg-color);
--devsite-link-background-active: var(--lighter-bg-color);
--devsite-link-color: var(--link-fg-color);
--devsite-contrast-link-color: var(--link-fg-color);
--devsite-button-background-hover: var(--lighter-bg-color);
--devsite-button-background-active: #c8ddf9;
--devsite-button-color: var(--link-fg-color);
--devsite-button-primary-color: var(--light-fg-color);
--devsite-hr-color: var(--border-color);
--devsite-caution-notice-background: var(--light-bg-color);
--devsite-caution-notice-color: #bf360c;
--devsite-dogfood-notice-background: var(--lighter-bg-color);
--devsite-dogfood-notice-color: #546e7a;
--devsite-key-point-notice-background: var(--lighter-bg-color);
--devsite-key-point-notice-color: #3f51b5;
--devsite-key-term-notice-background: var(--light-bg-color);
--devsite-key-term-notice-color: #9334e6;
--devsite-note-notice-background: var(--notice-bg-color);
--devsite-note-notice-color: var(--notice-fg-color);
--devsite-success-notice-background: var(--lighter-bg-color);
--devsite-success-notice-color: #00796b;
--devsite-warning-notice-background: var(--announcement-bg-color);
--devsite-warning-notice-color: var(--announcement-fg-color);
--devsite-confidential-results-background: rgba(254, 239, 227, 0.5);
--devsite-notice-margin: 16px 0;
--devsite-notice-padding: 16px 24px;
--devsite-notice-padding-x-start: 60px;
--devsite-book-nav-background: var(--devsite-background-1);
--devsite-card-background: var(--devsite-background-1);
--devsite-input-background: var(--devsite-background-1);
}
devsite-header {
--devsite-header-link-background-active: var(--light-fg-color);
--devsite-header-link-color: var(--link-fg-color);
--devsite-header-link-color-active: var(--link-fg-color);
--devsite-header-border: 1px solid var(--border-secondary-color);
--devsite-header-color-lower: var(--light-bg-color);
--devsite-header-foreground-lower: var(--inactive-fg-color);
--devsite-header-foreground-lower-hover: var(--inactive-fg-color);
--devsite-header-foreground-lower-active: var(--lighter-fg-color);
--devsite-header-foreground-lower-description: var(--inactive-fg-color);
--devsite-upper-tab-active: var(--lighter-fg-color);
--devsite-upper-tab-inactive: var(--inactive-fg-color);
--devsite-upper-tab-dropdown-active: var(--lighter-fg-color);
--devsite-upper-tab-dropdown-inactive: var(--inactive-fg-color);
--devsite-upper-tab-dropdown-description: var(--inactive-fg-color);
--devsite-upper-tab-dropdown-link: var(--main-fg-color);
--devsite-upper-tab-dropdown-link-hover: #ff6f00;
}
devsite-search {
--devsite-search-form-background-active: var(--main-bg-color);
--devsite-search-form-text-active: var(--light-fg-color);
--devsite-searchbox-hover: var(--highlight-bg-color);
--devsite-searchbox-inactive: var(--devsite-background-3);
--devsite-searchbox-placeholder: var(--main-fg-color);
--devsite-searchbox-placeholder-active: var(--light-fg-color);
--devsite-searchbox-text-active: var(--light-fg-color);
}
table {
--devsite-alt-table-cell-background: rgba(241, 243, 244, 0.75);
--devsite-h2-border: 0;
--devsite-responsive-table-first-column-background: var(--light-bg-color);
--devsite-table-cell-background: var(--main-bg-color);
--devsite-table-heading-background: var(--lighter-bg-color);
}
table.orange {
--devsite-alt-table-cell-background: hsl(26, 10%, 13%);
--devsite-table-heading-background: 0;
--devsite-responsive-table-first-column-background: hsl(26, 10%, 13%);
--devsite-table-row-background: hsl(26, 10%, 23%);
--devsite-table-row-border: 1px solid hsl(26, 10%, 39%);
}
devsite-code,
devsite-content {
--devsite-code-background: var(--light-bg-color);
--devsite-code-color: var(--light-fg-color);
--devsite-var-color: #d01884;
}
.devsite-nav-active {
--devsite-link-color-active: var(--link-fg-color);
}
html,
body {
background: var(--main-bg-color);
color: var(--main-fg-color);
}
.tensorsite-top-tab {
background: var(--light-bg-color);
}
.tensorsite-top-tab__tabs label {
color: var(--light-fg-color);
}
.tensorsite-button::after,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a::after {
background: none;
}
.tensorsite-button,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a {
color: var(--lighter-fg-color);
}
.tensorsite-button:hover,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a:hover,
.tensorsite-button:focus,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a:focus,
.tensorsite-button.tensorsite-content__cta:hover,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a.tensorsite-content__cta:hover,
.tensorsite-button.tensorsite-content__cta:focus,
.tensorsite-home-hero .tensorsite-content .tensorsite-content__cta-wrapper a.tensorsite-content__cta:focus {
color: var(--highlight-fg-color);
}
.tensorsite-content__title {
color: var(--main-fg-color);
}
.tensorsite-home-hero-wrapper {
background: var(--main-bg-color)
}
.tensorsite-card::before,
.tensorsite-content__clip-bg::after {
background: var(--lighter-bg-color);
}
.tfo-landing-row-item-inset-white {
background: var(--highlight-bg-color);
}
.devsite-banner-announcement {
background: var(--announcement-bg-color);
}
.devsite-banner-announcement:not(.devsite-banner-tenant),
.devsite-banner-announcement a {
color: var(--light-fg-color) !important;
}
.devsite-banner-message-text {
color: var(--announcement-fg-color) !important;
}
.devsite-banner-announcement :link,
.devsite-banner-announcement :visited {
color: var(--announcement-fg-color) !important;
}
.tensorsite-ecosystem .ecosystem,
.tensorsite-ecosystem .ecosystem-card__lower-content {
background: var(--light-bg-color);
}
.tensorsite-ecosystem .ecosystem-card__cta,
.tensorsite-ecosystem .ecosystem-card__label {
color: var(--light-fg-color);
}
.tensorsite-ecosystem .ecosystem__row-body__bg::before,
.tensorsite-ecosystem .ecosystem__row-body__bg::after,
.tensorsite-ecosystem .ecosystem__row-body__bg .ecosystem__row-body__bg-col {
background: var(--lighter-bg-color);
}
.tensorsite-ecosystem .ecosystem__row--header {
color: var(--light-fg-color);
}
.tensorsite-ecosystem .ecosystem__row...